Skip to content

It is designed to enhance user experience by implementing features that reduce eye strain and promote comfortable viewing.

License

Notifications You must be signed in to change notification settings

autonomous-web-org/Eye-Comfort

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

21 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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/

About

It is designed to enhance user experience by implementing features that reduce eye strain and promote comfortable viewing.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Sponsor this project

 

Packages

No packages published