Creating a Theme System in Svelte Kanban Apps

Introduction to Theming in Svelte Applications

Welcome to the fourth lesson of our Advanced UI Features and Theming course! In our previous lessons, we've built a comprehensive notification system to provide feedback after actions, implemented loading indicators to show when operations are in progress, and created empty states to guide users when there's no content to display. Now, we'll focus on the final piece of our UI enhancement journey: creating a theme system . Theming is a crucial aspect of modern web applications that goes beyond mere aesthetics. A well-implemented theme system serves several important purposes: Accessibility : Different users have different visual needs. Some users may find light themes easier to read, while others might prefer dark themes to reduce eye strain, especially in low-light environments. User Preference : Allowing users to choose their preferred visual style creates a more personalized experience, increasing satisfaction and engagement. Brand Consistency : Themes help maintain a consistent visual language across your application, reinforcing your brand identity. Our Kanban application already handles notifications, loading states, and empty states, but it currently has a fixed visual style. By implementing a theme system, we'll allow users to switch between light, dark, and sepia modes according to their preferences. For our theme implementation, we'll use CSS variables (also known as custom properties) as the foundation. This approach offers several advantages: Dynamic Updates : CSS variables can be updated at runtime without requiring a full page reload. Cascading Inheritance : Variables defined at the root level cascade down to all elements, making global theme changes simple. Reduced Redundancy : We can define colors once and reuse them throughout the application. Let's start by setting up our theme configuration and state management using Svelte's runes system.

Setting Up the Theme Configuration

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

Theme Persistence and System Preferences

A good theme system should remember the user's preference across sessions and respect their system-wide color scheme preference. Let's enhance our theme store to handle these requirements:

JavaScript

/**
 * Initialize theme system - call when app loads
 */
export function initTheme() {
  if (typeof window !== 'undefined') {
    // Check system preference if no theme is stored
    if (!localStorage.getItem('kanban-theme')) {
      const prefersDark = window.matchMedia?.('(prefers-color-scheme: dark)').matches;
      activeTheme = prefersDark ? 'dark' : 'light';
      localStorage.setItem('kanban-theme', activeTheme);
    }
    
    // Apply the active theme
    applyThemeToDOM(themes[activeTheme].colors);
    
    // Listen for system theme changes
    window.matchMedia?.('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
      // Only auto-switch if the user hasn't explicitly set a preference
      const storedTheme = localStorage.getItem('kanban-theme');
      if (!storedTheme || storedTheme === 'system') {
        const newTheme = e.matches ? 'dark' : 'light';
        setTheme(newTheme);
      }
    });
  }
}

/**
 * Initialize theme system - call when app loads
 */
export function initTheme() {
  if (typeof window !== 'undefined') {
    // Check system preference if no theme is stored
    if (!localStorage.getItem('kanban-theme')) {
      const prefersDark = window.matchMedia?.('(prefers-color-scheme: dark)').matches;
      activeTheme = prefersDark ? 'dark' : 'light';
      localStorage.setItem('kanban-theme', activeTheme);
    }
    
    // Apply the active theme
    applyThemeToDOM(themes[activeTheme].colors);
    
    // Listen for system theme changes
    window.matchMedia?.('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
      // Only auto-switch if the user hasn't explicitly set a preference
      const storedTheme = localStorage.getItem('kanban-theme');
      if (!storedTheme || storedTheme === 'system') {
        const newTheme = e.matches ? 'dark' : 'light';
        setTheme(newTheme);
      }
    });
  }
}

The initTheme function performs several important tasks:

It checks if the user has a stored theme preference in localStorage.
If no preference exists, it detects the system color scheme preference using the matchMedia API and sets the theme accordingly.
It applies the active theme to the DOM.
It sets up an event listener to detect changes in the system color scheme preference and updates the theme automatically if the user hasn't explicitly set a preference.

This approach respects both the user's explicit preference (if they've chosen a theme) and their system preference (if they haven't chosen a theme). It also ensures that the theme is applied consistently across sessions.

The optional chaining (?.) on window.matchMedia ensures that our code works in environments where this API isn't available, such as older browsers or during server-side rendering.

Now that we have our theme persistence and system preference detection in place, let's implement the function to apply theme colors to the DOM using CSS variables.

Applying Themes with CSS Variables

To apply our theme colors to the DOM, we'll use CSS variables. These variables will be set on the root element and can be used throughout our application's styles.

Let's add the applyThemeToDOM function to our theme store:

JavaScript

/**
 * Apply theme colors as CSS variables
 * @param {Object} colors - Theme color object
 */
function applyThemeToDOM(colors) {
  if (typeof document !== 'undefined') {
    const root = document.documentElement;
    
    for (const [key, value] of Object.entries(colors)) {
      root.style.setProperty(`--color-${key}`, value);
    }
  }
}

/**
 * Apply theme colors as CSS variables
 * @param {Object} colors - Theme color object
 */
function applyThemeToDOM(colors) {
  if (typeof document !== 'undefined') {
    const root = document.documentElement;
    
    for (const [key, value] of Object.entries(colors)) {
      root.style.setProperty(`--color-${key}`, value);
    }
  }
}

This function takes a colors object and sets each color as a CSS variable on the root element (<html>). The variable names are prefixed with --color- to avoid potential conflicts with other CSS variables.

For example, if the colors object contains { background: '#ffffff', text: '#2d3748' }, this function will set the following CSS variables:

--color-background: #ffffff;
--color-text: #2d3748;

These variables can then be used in our CSS using the var() function, like background-color: var(--color-background);.

To ensure that our application has default theme values even before JavaScript runs, we need to set initial CSS variables in our app.html file:

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        %sveltekit.head%
        <style>
            :root {
                /* Default light theme variables - will be overridden by JS */
                --color-background: #ffffff;
                --color-text: #2d3748;
                --color-primary: #4299e1;
                --color-secondary: #a0aec0;
                --color-accent: #ed8936;
                --color-muted: #e2e8f0;
                --color-columnBg: #f4f4f4;
                --color-cardBg: #ffffff;
                --color-success: #48bb78;
                --color-error: #f56565;
                --color-warning: #ed8936;
            }

            body {
                margin: 0;
                padding: 0;
                background-color: var(--color-background);
                color: var(--color-text);
                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
                transition: background-color 0.3s ease, color 0.3s ease;
            }
            
            /* Transition smoothly between themes */
            *, *::before, *::after {
                transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
            }
        </style>
    </head>
    <body>
        <div>%sveltekit.body%</div>
        <script>
            // Initialize theme from localStorage (this runs before Svelte hydration)
            const storedTheme = localStorage.getItem('kanban-theme') || 'light';
            
            // Apply initial theme classes to avoid FOUC (Flash of Unstyled Content)
            document.documentElement.classList.add(`theme-${storedTheme}`);
        </script>
    </body>
</html>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        %sveltekit.head%
        <style>
            :root {
                /* Default light theme variables - will be overridden by JS */
                --color-background: #ffffff;
                --color-text: #2d3748;
                --color-primary: #4299e1;
                --color-secondary: #a0aec0;
                --color-accent: #ed8936;
                --color-muted: #e2e8f0;
                --color-columnBg: #f4f4f4;
                --color-cardBg: #ffffff;
                --color-success: #48bb78;
                --color-error: #f56565;
                --color-warning: #ed8936;
            }

            body {
                margin: 0;
                padding: 0;
                background-color: var(--color-background);
                color: var(--color-text);
                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
                transition: background-color 0.3s ease, color 0.3s ease;
            }
            
            /* Transition smoothly between themes */
            *, *::before, *::after {
                transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
            }
        </style>
    </head>
    <body>
        <div>%sveltekit.body%</div>
        <script>
            // Initialize theme from localStorage (this runs before Svelte hydration)
            const storedTheme = localStorage.getItem('kanban-theme') || 'light';
            
            // Apply initial theme classes to avoid FOUC (Flash of Unstyled Content)
            document.documentElement.classList.add(`theme-${storedTheme}`);
        </script>
    </body>
</html>

In this updated app.html file, we've added default CSS variables for the light theme in the :root selector. These variables will be used until our JavaScript runs and updates them based on the user's preference.

We've also added a transition property to ensure smooth transitions between themes. This creates a more polished user experience by avoiding jarring color changes.

Additionally, we've added a small script at the end of the body that runs before Svelte hydration. This script reads the stored theme preference from localStorage and adds a corresponding class to the document element. This helps prevent a flash of unstyled content (FOUC) by applying the correct theme as early as possible.

Now that we have our theme application mechanism in place, let's set up the theme initialization in our layout component.

Initializing the Theme System

To initialize our theme system when the application loads, we need to call the initTheme function from our layout component. This ensures that the theme is applied consistently across all pages of our application.

Let's update our +layout.svelte file:

Svelte

<script>
  import { onMount } from 'svelte';
  import { initTheme } from '$lib/themeStore.svelte.js';
  const {children} = $props();
  
  onMount(() => {
    // Initialize theme system when app mounts
    initTheme();
  });
</script>

{@render children?.()}

<style>
  :global(html, body) {
    height: 100%;
  }
  
  :global(*) {
    box-sizing: border-box;
  }
  
  :global(button, input, textarea) {
    font-family: inherit;
  }
  
  /* Global themed styles */
  :global(.column) {
    background-color: var(--color-columnBg) !important;
  }
  
  :global(.task-card) {
    background-color: var(--color-cardBg) !important;
    color: var(--color-text) !important;
  }
  
  :global(.task-form) {
    background-color: var(--color-columnBg) !important;
  }
  
  :global(h1, h2, h3, h4, h5, h6) {
    color: var(--color-text) !important;
  }
  
  :global(button) {
    background-color: var(--color-primary) !important;
    color: white !important;
  }
  
  :global(button:hover:not(:disabled)) {
    filter: brightness(110%) !important;
  }
  
  :global(input, textarea) {
    background-color: var(--color-cardBg) !important;
    color: var(--color-text) !important;
    border-color: var(--color-secondary) !important;
  }
  
  :global(.char-count.warning) {
    color: var(--color-warning) !important;
  }
  
  :global(.error-text, .error-message) {
    color: var(--color-error) !important;
  }
</style>

<script>
  import { onMount } from 'svelte';
  import { initTheme } from '$lib/themeStore.svelte.js';
  const {children} = $props();
  
  onMount(() => {
    // Initialize theme system when app mounts
    initTheme();
  });
</script>

{@render children?.()}

<style>
  :global(html, body) {
    height: 100%;
  }
  
  :global(*) {
    box-sizing: border-box;
  }
  
  :global(button, input, textarea) {
    font-family: inherit;
  }
  
  /* Global themed styles */
  :global(.column) {
    background-color: var(--color-columnBg) !important;
  }
  
  :global(.task-card) {
    background-color: var(--color-cardBg) !important;
    color: var(--color-text) !important;
  }
  
  :global(.task-form) {
    background-color: var(--color-columnBg) !important;
  }
  
  :global(h1, h2, h3, h4, h5, h6) {
    color: var(--color-text) !important;
  }
  
  :global(button) {
    background-color: var(--color-primary) !important;
    color: white !important;
  }
  
  :global(button:hover:not(:disabled)) {
    filter: brightness(110%) !important;
  }
  
  :global(input, textarea) {
    background-color: var(--color-cardBg) !important;
    color: var(--color-text) !important;
    border-color: var(--color-secondary) !important;
  }
  
  :global(.char-count.warning) {
    color: var(--color-warning) !important;
  }
  
  :global(.error-text, .error-message) {
    color: var(--color-error) !important;
  }
</style>

In this updated layout component, we import the onMount lifecycle function from Svelte and the initTheme function from our theme store. We then call initTheme when the component mounts, ensuring that the theme is initialized as soon as the application loads.

We've also added global styles that use our CSS variables to apply the theme to various components. These styles override the default styles of our components, ensuring that they respect the current theme.

The use of !important in these styles ensures that they take precedence over any component-specific styles. While !important should generally be used sparingly in CSS, it's appropriate in this case because we want our theme to be consistently applied across all components.

Let's examine some of the key global styles:

.column uses var(--color-columnBg) for its background color, ensuring that columns match the current theme.
.task-card uses var(--color-cardBg) for its background and var(--color-text) for its text color, ensuring that task cards are readable in all themes.
Buttons use var(--color-primary) for their background color, maintaining consistent button styling across themes.
Form inputs use var(--color-cardBg) for their background and var(--color-text) for their text color, ensuring that forms are usable in all themes.

These global styles ensure that our application's UI components adapt to the current theme without requiring changes to their individual styles.

With our theme system fully implemented, users can now switch between light, dark, and sepia themes according to their preferences. The selected theme will be remembered across sessions and will respect the user's system color scheme preference if no explicit preference is set.