bx

Dark Mode

Adding dark mode to your PRISM site.

Dark mode is a .dark class on . Two pieces: a no-flash bootstrap script and a toggle.

No-flash script

Run this in , before paint, so the correct theme is applied with no flash:

<script>
(function(){try{
  var s = localStorage.getItem('ui-theme');
  var d = s ? s === 'dark' : matchMedia('(prefers-color-scheme: dark)').matches;
  document.documentElement.classList.toggle('dark', d);
}catch(e){}})();
</script>

The toggle

A button wired to the shared island flips the class and persists the choice:

// in the island
function toggleTheme() {
  var dark = document.documentElement.classList.toggle('dark');
  localStorage.setItem('ui-theme', dark ? 'dark' : 'light');
}
← Theming CLI →