Function initDark

Init Dark mode wrappers

Detect user preference

User preference is detected with matchMedia API, if available.

import { prefersDarkMode } from "@pistonite/pure/dark";

console.log(prefersDarkMode());
Copy

Global dark mode state

initDark initializes the dark mode state.

import { initDark, isDark, setDark, addDarkSubscriber } from "@pistonite/pure/dark";

initDark();
console.log(isDark());

addDarkSubscriber((dark) => { console.log("Dark mode changed: ", dark); });
setDark(true); // will trigger the subscriber
Copy

Use with React

A React hook is provided in the pure-react package to get the dark mode state from React components.

Use setDark to change the dark mode state from React compoenents like you would from anywhere else.

Persisting to localStorage

You can persist the dark mode preference to by passing persist: true to initDark. This will make initDark also load the preference from localStorage.

import { initDark } from "@pistonite/pure/dark";

initDark({ persist: true });
Copy

Setting color-scheme CSS property

The color-scheme property handles dark mode for native components like buttons and scrollbars. By default, initDark will handle setting this property for the :root selector. You can override this by passing a selector option.

import { initDark } from "@pistonite/pure/dark";

// will set `.my-app { color-scheme: dark }`
initDark({ selector: ".my-app" });
Copy