dark.realm.watch

A drop-in include for system-aware dark/light theming. Schema-agnostic. No build step.

Tier 1 · CSS only (no JS)

Drop in dark.css; define your variables in matching selectors.

copy<link rel="stylesheet" href="https://dark.realm.watch/dark.css">
<style>
  :root { --bg: #0a0a0c; --fg: #eee; }
  :root[data-theme="light"] { --bg: #f5f5f7; --fg: #111; }
  @media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) { --bg: #f5f5f7; --fg: #111; }
  }
  body { background: var(--bg); color: var(--fg); }
</style>

Tier 2 · add the engine

Inline the head snippet to kill FOUC, then load dark.js.

copy<script>(()=>{try{var s=localStorage.getItem('drw-theme');if(s==='dark'||s==='light')document.documentElement.setAttribute('data-theme',s)}catch(_){}})()</script>
<link rel="stylesheet" href="https://dark.realm.watch/dark.css">
<script src="https://dark.realm.watch/dark.js"></script>
<button onclick="Dark.cycle()">cycle</button>

Tier 3 · default toggle

copy<script src="https://dark.realm.watch/dark-toggle.js"></script>
<dark-toggle></dark-toggle>
<dark-toggle variant="pills"></dark-toggle>

Listen from your own code

copydocument.addEventListener('dark:change', e => {
  console.log(e.detail.theme, e.detail.effective);
});

Linux · the dark CLI

Reads the cross-desktop XDG portal, falls back to GNOME's gsettings.

copy$ dark
dark
$ dark watch
dark
light
dark
^C

Install:

copygit clone https://github.com/jphein/dark.realm.watch
ln -s "$PWD/dark.realm.watch/linux/dark" ~/.local/bin/dark