Dark Mode Demo | JVDesignStudio

✦ Live Preview

See how everything adapts

Cards, text, borders, and backgrounds all respond to your mode preference. The brand colours stay constant — only the backgrounds and text shift.

🦊

Lumo and the Grumble-Grit

A purple fox learns quiet courage while carrying something heavy. A story about resilience and a different kind of strength.

Picture Book · Ages 4–8

🦎

Echo & the Mountain

An axolotl named Echo climbs a mountain one small try at a time — a story about resilience, creative thinking, and small steps.

Coming Soon · Ages 5–8

🍬

Candy Kingdom Adventure

A sweet tabletop RPG for young players. Six candy heroes, a mischievous villain, and one free adventure pack to get started.

Tabletop RPG · Free

"Some days were still hard, and some nights were long,
But he found quiet courage, a different kind of strong."

— Lumo and the Grumble-Grit, Page 20

✦ Implementation

Add dark mode to any page

Three steps. Copy the CSS variables, add the toggle button to the header, and include the JS snippet before closing </body>.

Add CSS variables to :root

Replace hardcoded colour values with CSS variables, then add the [data-theme="dark"] overrides block to your stylesheet.

Add the toggle button to the header

Drop the .theme-toggle button component into your site header next to the nav links.

Add the JS snippet

The script reads/saves preference to localStorage and applies it on page load — so the user's choice persists across all pages and visits.

darkmode.js — place before </body>

// Dark mode toggle — JVDesignStudio
// Persists preference via localStorage

function toggleTheme() {
    const html = document.documentElement;
    const isDark = html.dataset.theme === 'dark';
    html.dataset.theme = isDark ? 'light' : 'dark';
    localStorage.setItem('jvds-theme', html.dataset.theme);
    updateLabels();
}

function updateLabels() {
    const dark = document.documentElement.dataset.theme === 'dark';
    const label = document.getElementById('modeLabel');
    if (label) label.textContent = dark ? 'Dark Mode' : 'Light Mode';
}

// Apply saved preference on load
(function() {
    const saved = localStorage.getItem('jvds-theme');
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
    const theme = saved || (prefersDark ? 'dark' : 'light');
    document.documentElement.dataset.theme = theme;
    updateLabels();
})();