Thanks to visit codestin.com
Credit goes to github.com

Skip to content

wherewhere/color-scheme-checker

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Issues License NPM
Github Issues License NPM Status

color-scheme-checker

Check or monitor the color-scheme of html element

NPM

Install

npm i color-scheme-checker

Usage

Check Theme

import { isPrefersDark, isDarkScheme, isDarkTheme } from "color-scheme-checker";
// Check if the user prefers dark mode
const prefersDark = isPrefersDark();
// Check if the current color scheme of the element is dark
const element = document.getElementById("my-element");
const darkScheme = isDarkScheme(element);
// Check if the current theme of the element is dark
const darkTheme = isDarkTheme(element);

Monitor Theme Changes

import { registerColorSchemeListener, unregisterColorSchemeListener } from "color-scheme-checker";
// Define a callback function to handle color scheme changes
function colorSchemeChangeHandler(isDark: boolean) {
  console.log(`The color scheme is now ${isDark ? "dark" : "light"}.`);
}
// Register the listener for a specific element
const element = document.getElementById("my-element");
registerColorSchemeListener(colorSchemeChangeHandler, element);
// To unregister the listener when it's no longer needed
unregisterColorSchemeListener(colorSchemeChangeHandler, element);

References

Contributors

Contributors

About

Check or monitor the color-scheme of html element

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Sponsor this project

Packages

No packages published