Dark Mode

Solora's dark mode is class-based, predictable, and designed to respect user preferences from first paint — with zero flash of the wrong theme.

How It Works

Adding the class dark to <html> activates all :root.dark overrides in the Solora CSS. Every component has its own dark-mode block — no global filters, no inversions.

Preventing Flash (FOUC)

Insert this inline script as early as possible — before your CSS loads — to set the theme class synchronously:

<!-- Place in <head> BEFORE any stylesheets -->
<script>
  (function() {
    const saved = localStorage.getItem('solora-theme');
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
    const theme = saved || (prefersDark ? 'dark' : 'light');
    document.documentElement.classList.add(theme);
  })();
</script>

Theme Toggle Button

Use initThemeToggle() with any element that has the sol-theme-toggle class. The function renders a ☀️ or 🌙 icon and wires up the click handler automatically.

<button class="btn btn-secondary btn-sm sol-theme-toggle"></button>

import { initThemeToggle } from '@kerkhoff-ict/solora/dist/index.js';
initThemeToggle('.sol-theme-toggle');

Listening for Theme Changes

// Observe class changes on <html>
const observer = new MutationObserver(() => {
  const isDark = document.documentElement.classList.contains('dark');
  console.log('Theme changed to:', isDark ? 'dark' : 'light');
});

observer.observe(document.documentElement, {
  attributes: true,
  attributeFilter: ['class']
});