SvelteHow-ToBeginner · 3 min read

How to Create Dark Mode in Svelte: Simple Toggle Example

In Svelte, create dark mode by using a reactive variable to toggle a CSS class on the root element or component. Use class:dark={darkMode} or conditional class application to switch styles dynamically based on the toggle state.

📐

Syntax

To create dark mode in Svelte, you typically use a reactive variable to track the theme state (dark or light). Then, apply a CSS class conditionally based on this state to change styles.

let darkMode = false; declares the state.
class:dark={darkMode} adds the dark class when darkMode is true.
CSS defines styles for both normal and dark modes.

svelte

let darkMode = false;

<button on:click={() => darkMode = !darkMode}>
  Toggle Dark Mode
</button>

<div class:dark={darkMode}>
  <p>This content changes style based on dark mode.</p>
</div>

💻

Example

This example shows a button that toggles dark mode on and off. The background and text colors change accordingly.

svelte

<script>
  let darkMode = false;
</script>

<style>
  div {
    padding: 1rem;
    background-color: white;
    color: black;
    transition: background-color 0.3s, color 0.3s;
  }
  .dark {
    background-color: #121212;
    color: #e0e0e0;
  }
  button {
    margin-bottom: 1rem;
    padding: 0.5rem 1rem;
    cursor: pointer;
  }
</style>

<button on:click={() => darkMode = !darkMode} aria-pressed={darkMode} aria-label="Toggle dark mode">
  {darkMode ? 'Switch to Light Mode' : 'Switch to Dark Mode'}
</button>

<div class:dark={darkMode}>
  <p>This is a simple dark mode example in Svelte.</p>
</div>

Output

A page with a button labeled 'Switch to Dark Mode' initially. Clicking it toggles the background to dark gray and text to light gray, and the button label changes to 'Switch to Light Mode'.

⚠️

Common Pitfalls

Common mistakes when creating dark mode in Svelte include:

Not using reactive variables, so the UI does not update on toggle.
Forgetting to add smooth CSS transitions, causing abrupt color changes.
Not using semantic HTML or ARIA attributes for accessibility.
Applying styles only inline instead of using CSS classes, which is less maintainable.

svelte

/* Wrong: Using a normal variable without reactivity */
let darkMode = false;

function toggle() {
  darkMode = !darkMode; // UI will NOT update because Svelte does not track this change
}

/* Right: Use reactive variable and event binding */

<button on:click={() => darkMode = !darkMode}>Toggle</button>
<div class:dark={darkMode}>Content</div>

📊

Quick Reference

Tips for implementing dark mode in Svelte:

Use let variables for reactive state.
Toggle CSS classes with class:classname={condition}.
Define dark mode styles in CSS under a .dark class.
Use transitions for smooth visual changes.
Include ARIA attributes for accessibility on toggle buttons.

✅

Key Takeaways

Use a reactive let variable to track dark mode state in Svelte.

Toggle a CSS class conditionally with class:dark={darkMode} to switch themes.

Define dark mode styles in CSS under a dedicated class for clean separation.

Add smooth CSS transitions for better user experience during theme changes.

Use semantic HTML and ARIA attributes on toggle controls for accessibility.