Source Code

<div class="ds-shell" id="dsShell" data-theme="light">
  <aside class="ds-sidebar">
    <div class="ds-logo">Northstar</div>
    <nav class="ds-nav">
      <a class="ds-nav-item ds-active" href="#">Overview</a>
      <a class="ds-nav-item" href="#">Projects</a>
      <a class="ds-nav-item" href="#">Reports</a>
      <a class="ds-nav-item" href="#">Team</a>
      <a class="ds-nav-item" href="#">Settings</a>
    </nav>
  </aside>

  <div class="ds-main">
    <header class="ds-topbar">
      <h1>Overview</h1>
      <button class="ds-theme-btn" id="dsThemeBtn">
        <svg class="ds-icon-sun" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>
        <svg class="ds-icon-moon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.8A9 9 0 1111.2 3a7 7 0 009.8 9.8z"/></svg>
        <span id="dsThemeLabel">Dark mode</span>
      </button>
    </header>

    <section class="ds-tiles">
      <div class="ds-tile">
        <span class="ds-tile-label">Active users</span>
        <span class="ds-tile-value">4,218</span>
        <span class="ds-tile-delta ds-up">+12.4%</span>
      </div>
      <div class="ds-tile">
        <span class="ds-tile-label">Revenue</span>
        <span class="ds-tile-value">$38.2k</span>
        <span class="ds-tile-delta ds-up">+8.1%</span>
      </div>
      <div class="ds-tile">
        <span class="ds-tile-label">Churn rate</span>
        <span class="ds-tile-value">2.3%</span>
        <span class="ds-tile-delta ds-down">-0.4%</span>
      </div>
    </section>

    <section class="ds-content">
      <p>Main content area — swap this placeholder for tables, charts, or any other dashboard content.</p>
    </section>
  </div>
</div>

Learn Coding Visually

Learn to code with interactive, live-preview playgrounds — HTML, CSS, JavaScript, React & more.

See all ->
HTML Playground42 lessons · Click-based · Live previewCSS PlaygroundLearn CSS with a live editorJavaScript Playground60 lessons · DOM · Async · CanvasReact PlaygroundLearn React with a live code editorGSAP PlaygroundLearn GSAP animation interactivelySVG Playground44 lessons · shapes · paths · animationSCSS Playground45 lessons · Sass modules · tokensTailwind PlaygroundLearn Tailwind CSS with a live editorBootstrap 5 Playground50 lessons · live preview

Dashboard Shell with Dark Mode — Free HTML CSS JS Snippet

Dashboard Shell with Dark Mode · Dashboards · Plain HTML, CSS & JS · Live preview

TagsSVGDark ModeDashboard UICSS Grid

What's included

Features

Complete dashboard shell: sidebar navigation, top bar, three stat tiles, and a content area
A single set of CSS custom properties on the shell drives every color in every section
One button toggles data-theme on the whole shell, restyling sidebar, tiles, and borders in sync
Sun/moon icon swap handled purely by CSS attribute selectors, no icon-swapping JS
Stat tiles include up/down delta indicators with semantic green/red coloring
Responsive collapse of the sidebar and tile grid on narrow viewports
Smooth color transitions on every themed element when the toggle is clicked
Self-contained vanilla JS toggle handler with no external state management

About this UI Snippet

Dashboard Shell with Dark Mode — Sidebar, Top Bar, and Stat Tiles with a Unified Theme Toggle

Screenshot of the Dashboard Shell with Dark Mode snippet rendered live

This snippet is a small but complete dashboard shell — a dark sidebar with navigation, a top bar with a page title and theme toggle, three stat tiles, and a placeholder content area — with a single toggle button that switches the entire shell between light and dark themes consistently.

One token set for the whole shell

Every color used across the sidebar, top bar, tiles, and content area is a CSS custom property defined on the outer .ds-shell grid container: background, surface, sidebar background, sidebar text, primary text, muted text, border, and accent. No individual section defines its own color values, which is what guarantees the sidebar, tiles, and borders all restyle together rather than some pieces lagging behind on a theme switch.

Toggling the whole shell at once

Clicking the theme button in the top bar reads the shell's current data-theme attribute and flips it between "light" and "dark". A single [data-theme="dark"] CSS rule scoped to .ds-shell redefines all eight custom properties at once — because every descendant element already reads its colors through var(), one attribute change on one element is sufficient to restyle the entire shell.

Icon and label swap without extra JS

The toggle button contains both a sun and a moon icon; CSS attribute selectors (.ds-shell[data-theme="dark"] .ds-icon-sun and its moon counterpart) show only the icon appropriate to the current theme, while the button's text label is the one piece of the UI updated directly by JavaScript, since it must describe the action the click will perform next (e.g. showing "Dark mode" while currently light).

Step by step

How to Use

  1. 1
    Load the snippetClick "Dashboard Shell with Dark Mode" in the sidebar to load its HTML, CSS, and JS into the editor panels. The preview updates instantly.
  2. 2
    Edit the codeModify any panel — HTML, CSS, or JS. The preview refreshes as you type. Use Reset in each panel header to restore the original.
  3. 3
    Preview on devicesClick the Mobile (375px), Tablet (768px), or Desktop buttons in the preview header to check responsiveness.
  4. 4
    Export in your formatClick "HTML" to download a standalone file, "JSX" for a React component, "Tailwind" for a React + Tailwind CSS component, "Tailwind HTML" for a standalone HTML file with Tailwind CDN, "Vue" for a Vue 3 SFC with <template>/<script setup>/<style scoped>, or "Angular" for a standalone Angular .component.ts file. "Copy all" copies the full code to clipboard.
  5. 5
    Save your versionClick "Save as", type a name, and press Enter. Your snippet saves to IndexedDB and appears in the Saved tab.

Real-world uses

Common Use Cases

Admin and analytics dashboards
A ready-made shell layout for internal tools, admin panels, or analytics products.
SaaS product shells
The sidebar-plus-topbar-plus-tiles layout is the default shape for most SaaS app interiors.
Dark mode implementation reference
Demonstrates theming an entire multi-region layout from one toggle and one token set.
Teaching CSS custom property theming at scale
Shows how a token system scales cleanly from a single component to a full page layout.

Got questions?

Frequently Asked Questions

Every color in the sidebar, top bar, tiles, and content area is a CSS custom property defined once on the outer .ds-shell element. A single [data-theme="dark"] rule redefines all of them at once, and because every descendant reads colors via var(), the whole shell restyles together.

Both icons are always in the DOM. CSS attribute selectors scoped to the current data-theme value show only the relevant one (display: none on the other), so no JavaScript touches the icons directly.

It reads the shell's current data-theme attribute, flips it to the opposite value, and updates the toggle button's text label to describe the next available action. All visual restyling is handled by CSS reacting to that attribute change.

Below 640px, the CSS grid collapses to a single column, the sidebar is hidden, and the stat tiles stack vertically — independent of whichever theme is currently active.