Add Dark Mode Toggle#

Goal#

Add a dark mode toggle to the web UI with persistent preference storage.

Why This Is Easy#

The UI in generally already uses CSS variables throughout (pkg/appview/static/css/style.css:1-29) More will need to be added to support dark mode.

Tasks#

1. Add Dark Theme CSS (pkg/appview/static/css/style.css)#

Add after the existing :root block:

[data-theme="dark"] {
    --bg: #1a1a1a;
    --fg: #e0e0e0;
    --border: #404040;
    --code-bg: #2d2d2d;
    --hover-bg: #2a2a2a;
    /* invert other colors as needed */
}

2. Add Toggle Button (pkg/appview/templates/components/nav.html)#

Add a moon/sun icon button (🌙/☀️) near the user menu.

3. Add Theme Logic (pkg/appview/static/js/app.js)#

// Load theme on page load
const theme = localStorage.getItem('theme') || 'light';
document.documentElement.setAttribute('data-theme', theme);

// Toggle function
function toggleTheme() {
    const html = document.documentElement;
    const newTheme = html.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
    html.setAttribute('data-theme', newTheme);
    localStorage.setItem('theme', newTheme);
}

Files to Modify#

• pkg/appview/static/css/style.css
• pkg/appview/static/js/app.js
• pkg/appview/templates/components/nav.html