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: ```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: ```svelte ``` ### 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: ```svelte

``` ### 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: ```svelte

{#each THEMES as themeOption} {/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`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/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: ```svelte

``` 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: ```svelte

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 ![Picture of the web page showing the theme selector and color palette](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nopw8d95o2iamhr7b9p1.png)

ivarnm

CSS Theme Selector with Automatic Mode [Tutorial]

Join Our Newsletter. No Spam, Only the good stuff.