Sync with OS Dark Mode

Read at startup


import { os, tyndWindow } from "@tynd/core/client";
 
export async function applyInitialTheme() {
  const dark = await os.isDarkMode();
  document.documentElement.dataset.theme = dark ? "dark" : "light";
}

React to changes

tyndWindow.onThemeChanged fires when the OS theme flips:


tyndWindow.onThemeChanged(({ theme }) => {
  document.documentElement.dataset.theme = theme;
});

CSS


:root[data-theme="light"] {
  --bg: #ffffff;
  --text: #111111;
}
:root[data-theme="dark"] {
  --bg: #0a0a0a;
  --text: #fafafa;
}
body {
  background: var(--bg);
  color: var(--text);
}

Or rely on pure CSS via @media (prefers-color-scheme: dark) — matches the same OS signal:


@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a0a0a;
    --text: #fafafa;
  }
}

Both work. Pick JS if you need programmatic access or want to override (user toggles “always light”); pick CSS if OS-synced behavior is all you need.

Related: os API · tyndWindow events.