Building a Theme Switcher UI in Svelte

Introduction to Theme Switching UI

Welcome to the fifth lesson of our Advanced UI Features and Theming course! In our previous lesson, we built a comprehensive theme system that allows our Kanban application to support light, dark, and sepia themes. We created a theme configuration, implemented state management with Svelte runes, and set up theme persistence using localStorage . However, our users currently have no way to interact with this theme system. While we've implemented the underlying functionality, we need to create a user interface that allows users to switch between themes easily. That's what we'll focus on in this lesson. We'll build two main components: ThemeToggle : A button that, when clicked, displays a dropdown menu with available themes. This component will allow users to select their preferred theme. Header : A component that displays the application title and the current theme, along with the ThemeToggle component. These components will work with our existing theme system, using the activeTheme state and setTheme function we created in the previous lesson. By the end of this lesson, users will be able to switch between themes with a simple click, and they'll receive visual feedback about the current theme. Let's start by building the ThemeToggle component, which will be the primary interface for theme switching.

Building the ThemeToggle Component

Join the 1M+ learners on CodeSignal

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

Creating the Header Component with Theme Indicator

The Header component will display the application title and the current theme, along with the ThemeToggle component we just created. It will provide visual feedback about the current theme by showing a badge with the theme name for non-default themes.

Let's create a new file called Header.svelte in the src/components directory:

Svelte

<script>
  import ThemeToggle from './ThemeToggle.svelte';
  import { getCurrentTheme } from '$lib/themeStore.svelte.js';
  
  // Derived properties for the theme name
  const themeName = $derived(getCurrentTheme().name);
</script>

<header class="app-header">
  <div class="title-container">
    <h1>📝 My Kanban Board</h1>
    {#if themeName !== 'light'}
      <span class="theme-badge">{themeName} mode</span>
    {/if}
  </div>
  
  <div class="controls">
    <ThemeToggle />
  </div>
</header>

<style>
  .app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    margin-bottom: 1rem;
  }
  
  .title-container {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }
  
  h1 {
    margin: 0;
    font-size: 1.5rem;
    color: var(--color-text);
  }
  
  .theme-badge {
    background: var(--color-primary);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    text-transform: capitalize;
  }
  
  .controls {
    display: flex;
    gap: 1rem;
  }
</style>

<script>
  import ThemeToggle from './ThemeToggle.svelte';
  import { getCurrentTheme } from '$lib/themeStore.svelte.js';
  
  // Derived properties for the theme name
  const themeName = $derived(getCurrentTheme().name);
</script>

<header class="app-header">
  <div class="title-container">
    <h1>📝 My Kanban Board</h1>
    {#if themeName !== 'light'}
      <span class="theme-badge">{themeName} mode</span>
    {/if}
  </div>
  
  <div class="controls">
    <ThemeToggle />
  </div>
</header>

<style>
  .app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    margin-bottom: 1rem;
  }
  
  .title-container {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }
  
  h1 {
    margin: 0;
    font-size: 1.5rem;
    color: var(--color-text);
  }
  
  .theme-badge {
    background: var(--color-primary);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    text-transform: capitalize;
  }
  
  .controls {
    display: flex;
    gap: 1rem;
  }
</style>

Let's examine this component:

In the script section, we import the ThemeToggle component we created earlier and the getCurrentTheme function from our theme store. We use the $derived rune to create a reactive variable, themeName, that returns the name of the current theme.

In the template section, we create a header with two main parts:

The title container, which includes the application title and a theme badge. The theme badge is only shown if the current theme is not the default light theme, using conditional rendering with the #if directive.
The controls container, which includes the ThemeToggle component.

In the style section, we define the appearance of the header, title, and theme badge. The header is a flex container that places the title on the left and the controls on the right. The theme badge is a small pill-shaped element with the theme name, styled using the primary color from our theme system.

With our Header component complete, let's update the main application layout to use it.

Updating the Main Application Layout

Now that we have our ThemeToggle and Header components, we need to update the main application layout to use them. We'll replace the existing title with our new Header component, maintaining the rest of the application's structure and functionality.

Let's update the +page.svelte file in the src/routes directory:

Svelte

<script>
  import Board from '../components/Board.svelte';
  import TaskForm from '../components/TaskForm.svelte';
  import StatsBar from '../components/StatsBar.svelte';
  import NotificationManager from '../components/NotificationManager.svelte';
  import Header from '../components/Header.svelte';
  import { getTotalTasks } from '$lib/taskStore.svelte.js';
</script>

<div class="container">
  <Header />
  
  <div class="stats-header">
    <StatsBar totalTasks={getTotalTasks()} />
  </div>
  
  <TaskForm />
  <Board />
  <NotificationManager />
</div>

<style>
  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem;
  }
  
  .stats-header {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
  }
</style>

<script>
  import Board from '../components/Board.svelte';
  import TaskForm from '../components/TaskForm.svelte';
  import StatsBar from '../components/StatsBar.svelte';
  import NotificationManager from '../components/NotificationManager.svelte';
  import Header from '../components/Header.svelte';
  import { getTotalTasks } from '$lib/taskStore.svelte.js';
</script>

<div class="container">
  <Header />
  
  <div class="stats-header">
    <StatsBar totalTasks={getTotalTasks()} />
  </div>
  
  <TaskForm />
  <Board />
  <NotificationManager />
</div>

<style>
  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem;
  }
  
  .stats-header {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
  }
</style>

In this updated file, we import the Header component we created and use it at the top of the container, replacing the previous <h1> element. The rest of the application structure remains the same, with the StatsBar, TaskForm, Board, and NotificationManager components.

The styles for the container and stats header also remain unchanged, ensuring that the application maintains its overall layout and appearance.

With this update, our application now has a complete theme-switching interface. Users can click the theme toggle button to open a dropdown menu, select their preferred theme, and see visual feedback about the current theme in the header.

Let's see how this works in practice:

When the application loads, it initializes the theme system and applies the user's preferred theme or the default light theme.
The Header component displays the application title and, if the current theme is not the default light theme, a badge with the theme name.
The ThemeToggle component displays a button with an icon representing the current theme: sun for light, moon for dark, and scroll for sepia.
When the user clicks the theme toggle button, a dropdown menu appears with options for light, dark, and sepia themes. Each option shows a color sample and the theme name.
When the user selects a theme, the dropdown menu closes, and the theme is applied to the application. The theme toggle button icon and the header badge update to reflect the new theme.
The theme preference is saved to localStorage, ensuring that it persists across sessions.

This theme-switching interface provides a seamless and intuitive way for users to customize their experience, enhancing the overall usability and accessibility of our Kanban application.

Summary and Practice Preview

In this lesson, we've built a complete theme-switching interface for our Kanban application. Let's recap what we've learned:

We created a ThemeToggle component that allows users to switch between light, dark, and sepia themes with a dropdown menu.
We built a Header component that displays the application title and provides visual feedback about the current theme.
We updated the main application layout to use these components, creating a cohesive and user-friendly interface.

These components work with the theme system we built in the previous lesson, using the activeTheme state, setTheme function, and CSS variables to apply themes consistently across the application.

The theme switcher enhances our application in several ways:

It improves accessibility by allowing users to choose a theme that works best for their visual needs.
It provides a more personalized experience, increasing user satisfaction and engagement.
It demonstrates how to build interactive UI components that work with a centralized state management system.

In the upcoming practice exercises, you'll have the opportunity to reinforce these concepts by:

Extending the theme system with additional themes or color options.
Adding animations to theme transitions for a more polished user experience.
Implementing keyboard navigation for the theme dropdown menu to improve accessibility.
Creating a theme preview feature that shows a sample of each theme before selection.

These exercises will help you solidify your understanding of theme switching in Svelte and prepare you to implement similar features in your own applications.

With the completion of this lesson, you now have a fully functional Kanban application with advanced UI features, including notifications, loading indicators, empty states, and a comprehensive theme system with user-friendly theme switching. These features elevate your application from merely functional to truly professional, providing a polished and engaging user experience.