This tutorial shows you how to create a theme selector in Svelte, enabling multiple theme options for your website. It also includes an automatic theme that adapts to the user's device settings.

Although it's implemented in Svelte, most of the functionality relies on standard HTML and CSS, making it easy to replicate in other frameworks.

The source code for the project can be found here: https://github.com/ivarnm/theme_selector

Live demo: https://theme-selector-inm.vercel.app/

Setting up the project:

If you don't already have an existing Svelte project, you can create one by following Svelte's getting started guide: https://svelte.dev/docs/introduction

Add color variables:

We will use CSS variables to define our color themes. First, create a src/styles/global.css file and add the following CSS:

:root {
  --neutral-0: white;
  --neutral-10: #fffcf1;
  --neutral-30: #d2d2d2;
  --neutral-40: #b7b7b7;
  --neutral-60: #666666;
  --neutral-70: #333333;
  --neutral-100: black;

  --primary-60: #696d90;
  --primary-70: #3D405B;
  --primary-80: #303349;

  --secondary-70: #5a7b6b;
  --secondary-80: #456153;
}

.dark-theme {
  --neutral-0: black;
  --neutral-10: #1a1a1a;
  --neutral-30: #3d3d3d;
  --neutral-40: #595959;
  --neutral-60: #999999;
  --neutral-70: #cccccc;
  --neutral-100: white;

  --primary-60: #979ec7;
  --primary-70: #a7aed6;
  --primary-80: #b8bfe9;

  --secondary-70: #79BEA5;
  --secondary-80: #89cfb5;
}

.warm-theme {
  --neutral-0: #fff7e0;
  --neutral-10: #ffedcc;
  --neutral-30: #ffdbb7;
  --neutral-40: #ffb89d;
  --neutral-60: #ff9473;
  --neutral-70: #ff5733;
  --neutral-100: #4d2600;

  --primary-60: #f28e2b;
  --primary-70: #d65a31;
  --primary-80: #c44536;

  --secondary-70: #e59572;
  --secondary-80: #cf6448;
}

html {
  font-family: 'Inter', sans-serif;
  background-color: var(--neutral-10);
}

body {
  margin: 0 auto;
  max-width: 870px;
  color: var(--neutral-70);
}

This defines a color palette for the light theme on the root element and adds a dark and warm theme. Which colors and themes you want is, of course, up to you. These are just some examples. You also see how we can use these variables to set the page's background color and the body's color property.

Next, add a src/routes/ layout.svelte file and add the following code to import the CSS file globally:

Create a dropdown menu:

I prefer to have my theme selector inside a dropdown menu, so I'll make a reusable DropdownMenu component that we can use. If you want to do the same, you can create a src/lib/components/DropdownMenu.svelte file and add the following:

  

    
      
    

    {#if menuOpen}
      

        
      
    {/if}
  

Create the theme selector component:

Now it's time to create the component that will handle the theme selection. Create the file
src/lib/components/ThemeSelector.svelte and add the following:

    

  

    {#each THEMES as themeOption}
       $theme = themeOption.value}
      >
        
        {themeOption.label}
      
    {/each}
  

When the component is loaded in the browser, we check to see if the user has previously selected a theme. If not it defaults to the automatic theme. The automatic theme sets the theme to either light or dark using the media query prefers-color-scheme to detect if the user has requested light or dark color themes in their OS.

When setting a theme, for instance warm, the class warm-theme is added to the root element of the page, which will override the CSS color variables to the ones we previously defined in the .warm-theme selector in our global.css file.

Adding the theme selector:

Now we can add the ThemeSelector component to our layout file. Change the content of the src/routes/ layout.svelte file to this:

This will add the theme selector dropdown to the top right of all pages.

Add some example content to view the themes:

In the src/routes/ page.svelte file we can add some boxes to view the color themes:

Theme selector


  
--neutral-0
  
--neutral-10
  
--neutral-30
  
--neutral-40
  
--neutral-60
  
--neutral-70
  
--neutral-100
  
--primary-60
  
--primary-70
  
--primary-80
  
--secondary-70
  
--secondary-80

And here is the final result