Dark Mode with React

Enable light and dark themes in React using the class strategy Vinyaas tokens expect. Default follows the device preference.

Vinyaas writes CSS variables for light and dark. Dark styles apply when html has the dark class. Choose another guide from Dark Mode.

Default = system preference

Until the visitor picks light or dark, follow prefers-color-scheme. Do not write a stored preference on first visit — only persist after an explicit toggle.

ts
const stored = localStorage.getItem("vinyaas-theme");
const dark =
  stored === "dark" ||
  (stored !== "light" &&
    window.matchMedia("(prefers-color-scheme: dark)").matches);
document.documentElement.classList.toggle("dark", dark);

Theme tokens

After vinyaas init, your CSS entry (preferred: src/index.css) includes light defaults and a .dark block. Components read those variables — you do not need a separate component theme package.

Toggle the class

Flip appearance by toggling dark on the document element:

ts
document.documentElement.classList.toggle("dark");

Persist the choice in localStorage (and optionally a cookie) so navigations and reloads keep the same mode.

React wiring

Any React setup works if the bundler loads the stylesheet that contains Vinyaas light and .dark tokens, and you toggle dark on the root element before interactive paint when possible.

Persist the user choice, respect prefers-color-scheme when nothing is stored, and keep one source of truth for the class so components that read CSS variables stay in sync.