Function initDarkCopy item path

Initialize the dark mode global state

Detect user preference

User preference is detected with matchMedia API, if available.

import { prefersDarkMode } from "@pistonite/celera";

console.log(prefersDarkMode());
Copy

Global dark mode state

initDark initializes the dark mode state.

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

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

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

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/celera";

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/celera";

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