Dark Mode / Themed Navbar Template

Dark mode certainly has its devotees. Now you can cater for them with this dark mode / themed navbar. Mobile-responsive and accessible. Copy and paste the code straight into your own web projects.

Get Source Code → Preview →

The Dark Mode / Themed Navbar

A modern navbar that includes a fully functional theme switcher. It allows users to toggle between a light and dark mode, providing a comfortable viewing experience in any lighting condition. The component is built with modern best practices, including support for OS-level preferences and persistence.

Persistent State — The user's theme choice (light or dark) is automatically saved in their browser's localStorage, so their preference is remembered on their next visit.
OS Preference Aware — On a user's first visit, the navbar automatically detects and applies their operating system's theme preference (via prefers-color-scheme).
No-Flash (FOUC) Script — A tiny script runs before the page loads to set the theme, preventing the flash of an incorrect theme on page load.
Accessible Toggle — The theme switcher is an accessible button with clear SVG icons (sun and moon) that indicate the current state and action.
Entire Page Theming: The CSS is structured with variables so that applying the theme to the entire page bodyâ€”not just the navbarâ€”is simple.

Coding Best Practices

CSS custom properties (variables) are used for easy theme customization (colors, fonts).
The code is heavily commented to explain the purpose of each section.
A tiny, efficient JavaScript snippet is used for the mobile menu toggle, as it is the most accessible and modern method (arguably superior to the older "checkbox hack").

Code

Here's the full code for the navbar template:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dark Mode & Themed Navbar</title>
    <style>
        /*
        ========================================
        CSS Custom Properties for Theming
        ========================================
        The entire theme system is controlled by these variables. The default
        state (:root) is the light theme.
        */
        :root {
            --color-background: #f8f9fa;
            --color-surface: #ffffff; /* Card/Navbar background */
            --color-text-primary: #212529;
            --color-text-secondary: #6c757d;
            --color-border: #dee2e6;
            --color-primary: #007bff;
            --color-primary-hover: #0056b3;

--transition-speed: 0.3s;
            --navbar-height: 70px;
            --navbar-padding: 1.5rem;
            --container-width: 1140px;
            --border-radius: 8px;
            --font-family-sans-serif: system-ui, -apple-system, sans-serif;
        }
        
        /*
        The dark theme is an override of the root variables.
        It is applied when the <html> tag has the `data-theme="dark"` attribute.
        */
        [data-theme="dark"] {
            --color-background: #121212;
            --color-surface: #1e1e1e;
            --color-text-primary: #e0e0e0;
            --color-text-secondary: #a0a0a0;
            --color-border: #333333;
            --color-primary: #3391ff;
            --color-primary-hover: #5ca8ff;
        }

/*
        ========================================
        Global Styles
        ========================================
        */
        *, *::before, *::after { box-sizing: border-box; }

body {
            margin: 0;
            font-family: var(--font-family-sans-serif);
            font-size: 1rem;
            line-height: 1.6;
            background-color: var(--color-background);
            color: var(--color-text-primary);
            transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
        }
        .content { height: 200vh; padding: 100px var(--navbar-padding); text-align: center; }
        ul { list-style: none; margin: 0; padding: 0; }
        a { text-decoration: none; color: var(--color-primary); }
        a:hover { color: var(--color-primary-hover); }

/*
        ========================================
        Navbar Styles
        ========================================
        */
        .navbar {
            height: var(--navbar-height);
            display: flex;
            align-items: center;
            position: sticky; top: 0;
            background-color: var(--color-surface);
            border-bottom: 1px solid var(--color-border);
            transition: background-color var(--transition-speed) ease, border-color var(--transition-speed) ease;
            z-index: 1000;
        }
        .navbar__container {
            display: flex; justify-content: space-between; align-items: center;
            width: 100%; max-width: var(--container-width);
            margin: 0 auto; padding: 0 var(--navbar-padding);
        }
        .navbar__brand {
            font-size: 1.5rem; font-weight: bold; color: var(--color-text-primary);
            text-decoration: none; transition: color var(--transition-speed) ease;
        }
        .navbar__toggle {
            display: block; border: none; background: transparent; cursor: pointer; padding: 0.5rem;
        }
        .navbar__toggle .bar {
            display: block; width: 25px; height: 3px; margin: 5px auto;
            background-color: var(--color-text-primary);
            transition: all var(--transition-speed) ease;
        }
        .navbar__toggle.is-active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
        .navbar__toggle.is-active .bar:nth-child(2) { opacity: 0; }
        .navbar__toggle.is-active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
        .navbar__menu {
            display: none; flex-direction: column; width: 100%;
            position: absolute; top: var(--navbar-height); left: 0;
            background-color: var(--color-surface);
            border-bottom: 1px solid var(--color-border);
            z-index: 999;
        }
        .navbar__menu.is-active { display: flex; }
        .navbar__item { text-align: center; border-top: 1px solid var(--color-border); }
        .navbar__link { display: block; padding: 1.25rem; font-weight: bold; }
        
        /* Focus state for all interactive elements */
        :is(.navbar__toggle, .navbar__link, #theme-toggle):focus-visible {
            outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: 4px;
        }
        
        /*
        ========================================
        Theme Toggle Button Styles
        ========================================
        */
        #theme-toggle {
            background: none; border: none; cursor: pointer;
            padding: 0.5rem; border-radius: 50%; display: flex; align-items: center;
        }
        .theme-icon {
            width: 24px; height: 24px; color: var(--color-text-secondary);
            transition: color var(--transition-speed) ease, transform var(--transition-speed) ease;
        }
        #theme-toggle:hover .theme-icon, #theme-toggle:focus .theme-icon {
             color: var(--color-text-primary); transform: rotate(15deg);
        }
        
        /* Logic to show the correct icon based on the current theme */
        .sun-icon { display: none; }
        .moon-icon { display: block; }

[data-theme="dark"] .sun-icon { display: block; }
        [data-theme="dark"] .moon-icon { display: none; }

/*
        ========================================
        Desktop Navbar Styles
        ========================================
        */
        @media (min-width: 768px) {
            .navbar__toggle { display: none; }
            .navbar__menu {
                display: flex; flex-direction: row; align-items: center; position: static;
                width: auto; background-color: transparent; border: none;
            }
            .navbar__list { display: flex; align-items: center; gap: 1rem; }
            .navbar__item { border-top: none; }
            .navbar__link { padding: 0.5rem; }
            /* The theme toggle is the last item in the list */
            .navbar__item:last-child { margin-left: 1.5rem; }
        }
    </style>
</head>
<body>

<script>
      (function() {
        const theme = localStorage.getItem('theme') || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
        if (theme === 'dark') {
          document.documentElement.setAttribute('data-theme', 'dark');
        }
      })();
    </script>

<header class="navbar">
        <div class="navbar__container">
            <a href="#" class="navbar__brand">Brand</a>
            
            <button class="navbar__toggle" id="navbarToggle" aria-label="Toggle navigation" aria-controls="navbarMenu" aria-expanded="false">
                <span class="bar"></span><span class="bar"></span><span class="bar"></span>
            </button>
            
            <nav id="navbarMenu" class="navbar__menu" role="navigation">
                <ul class="navbar__list">
                    <li class="navbar__item"><a href="#" class="navbar__link">Home</a></li>
                    <li class="navbar__item"><a href="#" class="navbar__link">Features</a></li>
                    <li class="navbar__item"><a href="#" class="navbar__link">Pricing</a></li>
                    <li class="navbar__item">
                        <button id="theme-toggle" aria-label="Toggle light and dark theme">
                            
                            <svg class="theme-icon sun-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12Zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z M11 1h2v3h-2V1Zm0 19h2v3h-2v-3ZM20.414 4.929l-1.414-1.414L17.586 5L19 6.414l1.414-1.485ZM3.586 19.001l1.414 1.414L6.414 19l-1.414-1.414-1.414 1.414ZM23 11v2h-3v-2h3ZM4 11v2H1v-2h3ZM17.586 19l1.414-1.414-1.414-1.414-1.414 1.414 1.414 1.414Z"/></svg>
                            
                            <svg class="theme-icon moon-icon" xmlns="http://www.w.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2ZM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8Z M13.5 12c0-3.08-1.57-5.8-4-7.44C12.42 3.5 16.53 7.03 16.53 12s-4.11 8.5-7.03 9.44c2.43-1.64 4-4.37 4-7.44Z"/></svg>
                        </button>
                    </li>
                </ul>
            </nav>
        </div>
    </header>
    
    <main class="content">
        <h1>Page Content</h1>
        <p>This whole page, not just the navbar, changes theme!</p>
    </main>

if (themeToggle) {
            themeToggle.addEventListener('click', function() {
                // Check current theme
                const currentTheme = htmlElement.getAttribute('data-theme');
                // Determine the new theme
                const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
                
                // Set the new theme
                htmlElement.setAttribute('data-theme', newTheme);
                // Save the new theme to localStorage
                localStorage.setItem('theme', newTheme);
            });
        }
    });
    </script>
</body>
</html>

View Output