| Issues | License | NPM |
|---|---|---|
Check or monitor the color-scheme of html element
npm i color-scheme-checkerimport { 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);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);