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/[email protected]/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/[email protected]/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).

Brightness

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

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. :wink:

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