Eye Comfort

The 'Eye Comfort' Library is designed to improve user experience by providing functionalities aimed at reducing eye strain and promoting comfortable viewing. It can be easily integrated into any JS application to enable features such as eye comfort mode, font size adjustments, and screen brightness control. By incorporating this library, developers can enhance the accessibility and usability of their applications, ensuring that users can comfortably interact with the interface for extended periods without experiencing discomfort or fatigue.

Features

• Night Mode (clsNightMode)
• Brightness (clsBrightness)
• Font Size Adjustment [in progress]

Function & Options

clsNightMode()

Use this to initalize an eye comfort/night light mode for a page/element. It returns a function that can be used to create the effect.

clsBrightness()

Use this, to initalize brightness functionality, to adjust the brightness of a page/element. It returns a function that can be used to create the effect.

Installation

npm install eye_comfort
<!-- or -->
<script src="https://cdn.jsdelivr.net/npm/eye_comfort@1.0.1/index.min.js"></script>

Initialize

import { clsNightMode, clsBrightness } from "eye_comfort";
// or
import { clsNightMode } from "eye_comfort";
// or
import { clsBrightness } from "eye_comfort";
// or
<script src="https://cdn.jsdelivr.net/npm/eye_comfort@1.0.1/index.min.js"></script>

Note

In case you get the "export error" while using it with NextJS try adding this rule in the next.config

{ ... transpilePackages: ['eye_comfort'], ...}

Usage

Scroll Down for the complete list of options, to consumed by returned functions

const nightmode = clsNightMode();
const brightness = clsBrightness();

// whole page
nightmode();
brightness({value: .7}); // you can also use percentage for eg. 70%

// specific element
nightmode({ element: document.querySelector("#element") });
brightness({ element: document.querySelector("#element"), value: .7 }); // you can also use percentage for eg. 70%

// the best way, to use in react or other lib. that reinitiates local variable on state change, is to use it with a hook that can memoize/cache the output
const nightmode = useMemo(clsNightMode, []);
const brightness = useMemo(clsBrightness, []);

// reset to default when disabled
nightmode({ original: "brightness(.4)" });

// include another filter as well
brightness({ include: "blur(10px)" });

Options

Night Mode

This function is used to toggle night mode effect on a page, it returns a boolean (enabled or not).

Option	Description	Default Value
element	the element on which you want to apply the effect	:root (whole page)
original	the original value, i.e. value that should be applied on reset / when disabled	empty string
include	the value to be included along with the effect, when it's enabled	empty string

Brightness

This function is used to adjust brightness of a page, it returns nothing.

Option	Description	Default
element	the element on which you want to apply the effect	:root (whole page)
value	the intensity of the filter, it could be in decimals (0 to 1) or in percentage (0% to 100%)	0 (dim) | 1 (bright)
include	the value to be included along with the effect	empty string

Fun Facts

• It uses CSS filtes behind the hood so, You don't have to worry about the site's performance or ranking issues
• It is created using plain JavaScript, thus not bound by any framework rules. This gives you the freedom to use it anywhere and in any way you like, whether inside other hooks or in a script tag. 😉

You can play with these features, applied to our website at https://www.autonomousweb.org/