A nice looking HTML and CSS only Theme Selector that requires no JS with TailwindCSS and Astro.

index

When I first heard about Chrome’s Customizable Select , I knew immediately you could create really cool stuff without relying on component libraries like shancn that do the difficult work of essentially reimplementing selects.

The really “cool” thing I wanted to do was create a theme selector that needs nothing, but CSS and HTML. Unfortunately for my Firefox bros, Customizable Select is not yet available so for now you’re stuck with the boring old select. Here’s its Bugzilla ticket for those interested.

You can test the by using it in the header above!

What Customizable Select looks like on Chrome.

For my Astro pals, if #1083 hasn’t been merged yet at the time of reading, then unfortunately in the meantime you’ll have to compile the Astro compiler with the changes from #1070 and using pnpm link or equivalent to use the patched compiler instead. The compiling process itself is lightweight, but will require you to have (or develop!) basic familiarity with Go.

Setting And Persisting Color Scheme Preferences With CSS And A “Touch” Of JavaScript by Henry Bley-Vroman in Smashing Magazine laid the groundwork for my implementation.

Below is the basic implementation used by this blog using TailwindCSS and Astro. Most important to note is the use of appearance: base-select; which is the actual CSS that enables customization. Also to note for Astro users, transition persistence should be set on the Select element to maintain its state across pages, but this does unfortunately require JS .

1
---
2
import { Icon } from "astro-icon/components"
3
---
4

5
<style>
6
  @reference '@/styles/global.css'; // change to reference whereever your Tailwind global class is defined
7

8
  #theme-color-select {
9
    @apply text-foreground/60 cursor-pointer text-sm;
10
    @supports (appearance: base-select) {
11
      &,
12
      &::picker(select) {
13
        @apply text-foreground/60;
14
        appearance: base-select;
15
      }
5 collapsed lines
16
      @apply focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 rounded-full text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50;
17
      @apply hover:bg-accent/25 hover:text-accent-foreground;
18
      @apply size-8 transition-colors;
19
      @apply text-right;
20

21
      &::picker-icon {
22
        display: none;
23
      }
24
      &::picker(select) {
25
        @apply min-w-28 overflow-x-hidden overflow-y-auto rounded-md border p-0 shadow-md;
26
        @apply border-border backdrop-blur-xs;
27
        @apply bg-card/25;
28
        right: anchor(right);
29
      }
6 collapsed lines
30
      &:open::picker(select) {
31
        @apply animate-in fade-in-0 zoom-in-95;
32
      }
33
      &:close::picker(select) {
34
        @apply animate-out fade-out-0 zoom-out-95;
35
      }
36
      option {
3 collapsed lines
37
        @apply relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm transition-colors outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0;
38
        @apply hover:bg-primary/10 hover:text-primary;
39
        @apply justify-end-safe;
40
        svg {
41
          display: none;
42
        }
43
        &::checkmark {
44
          display: none;
45
        }
46
      }
47
      selectedcontent {
48
        svg {
49
          @apply size-4 shrink-0;
50
        }
51
        span {
52
          @apply sr-only;
53
        }
54
      }
55
    }
56
  }
57
</style>
58
<select
59
  id="theme-color-select"
60
  transition:persist="theme-color-select"
61
>
62
  <button>
63
    <selectedcontent></selectedcontent>
64
  </button>
65
  <option value="system">
66
    <Icon name="lucide:sun-moon" />
67
    <span>System</span>
68
  </option>
69
  <option value="light">
70
    <Icon name="lucide:sun" />
71
    <span>Light Mode</span>
72
  </option>
73
  <option value="dark">
74
    <Icon name="lucide:moon" />
75
    <span>Night Mode</span>
76
  </option>
77
</select>

Notice when we get down to the basics of the select, everything becomes styling rather than managing complex states in JavaScript or deeply nested divs to manage placement. For example you can have the svg display in the select dropdown by changing the display in the css. The new customizable select enables making very elegant drop downs easily.

Tip (enhance with js)

Just because this doesn’t require scripting doesn’t mean it can’t be enhanced with some.

For example, using the Astro recommended nanostore and its persistence plugin, you can create a store that saves the user’s selection across visits.

1
import { persistentAtom } from '@nanostores/persistent'
2

3
const THEME_VALUES = ['dark', 'light', 'system'] as const
4
export type THEME_TYPE = (typeof THEME_VALUES)[number]
5
const STORAGE_KEY = 'preferred-theme'
6

7
export const isValidTheme = (val: string | null): val is THEME_TYPE =>
8
  !!val && THEME_VALUES.includes(val as THEME_TYPE)
9

10
export const $theme = persistentAtom<THEME_TYPE>(STORAGE_KEY, 'system')

Then in the theme selector astro component you can add the following script tag:

92
<script>
93
  import { $theme, isValidTheme } from '@/lib/theme-store'
94

95
  let themeSelector = document.querySelector<HTMLSelectElement>(
96
    '#theme-color-select',
97
  )
98
  $theme.subscribe((val) => {
99
    if (isValidTheme(val) && themeSelector) {
100
      themeSelector.value = val
101
    }
102
  })
103
  themeSelector?.addEventListener('change', (event) => {
104
    const target = event.target as HTMLSelectElement
105
    if (isValidTheme(target.value)) {
106
      $theme.set(target.value)
107
    }
108
  })
109
</script>

Now if you’re using TailwindCSS you need a dark variant to replace the one provided by Tailwind by default:

1
// change #theme-color-select to the ID if you've changed it
2
@custom-variant dark {
3
  :root:has(#theme-color-select option[value='dark']:checked) & {
4
    @slot;
5
  }
6
  @media (prefers-color-scheme: dark) {
7
    :root:has(#theme-color-select option[value='system']:checked) & {
8
      @slot;
9
    }
10
  }
11
}

Explanation (how it works)

The variant works by using the :has to check whether the root (which is always the <html> tag in the browser) contains some element with the given id and either the option dark is checked. .

The ampersand following is the Nesting Selector . Because of how TailwindCSS places the variant within the class rather than the class in the variant, the nesting selector is vital in making this work:

1
.dark\:bg-purple-950\/5 {
2
  :root:has(#theme-color-select option[value='dark']:checked) & {
3
    background-color: color-mix(in srgb, oklch(29.1% 0.149 302.717) 5%, transparent);
4
    @supports (color: color-mix(in lab, red, red)) {
5
      background-color: color-mix(in oklab, var(--color-purple-950) 5%, transparent);
6
    }
7
  }
8
  @media (prefers-color-scheme: dark) {
9
    :root:has(#theme-color-select option[value='system']:checked) & {
10
      background-color: color-mix(in srgb, oklch(29.1% 0.149 302.717) 5%, transparent);
11
      @supports (color: color-mix(in lab, red, red)) {
12
        background-color: color-mix(in oklab, var(--color-purple-950) 5%, transparent);
13
      }
14
    }
15
  }
16
}

The nesting selector means that the following are functionally equivalent!

1
:root:has(#theme-color-select option[value='dark']:checked) .dark\:bg-purple-950\/5 {
2
  ...
3
}
4

5
.dark\:bg-purple-950\/5 {
6
  :root:has(#theme-color-select option[value='dark']:checked) & {
7
    ...
8
  }
9
}

Unfortunately, last I checked there isn’t a way to have all the related classes wrapped under the variant:

1
:root:has(#theme-color-select option[value='dark']:checked) {
2
  .dark\:bg-purple-950\/5 {
3
    ...
4
  }
5
  .dark\:bg-pink-950\/5 {
6
    ...
7
  }
8
}

But hey that’s why compression exists.

Tip (multiple themes)

You could potentially define multiple themes by adding more values to the select and defining more custom variants in Tailwind:

1
  @custom-variant forest {
2
  :root:has(#theme-color-select option[value='forest']:checked) & {
3
    @slot;
4
  }
5
}

The possibilities are endless!

If you are using a component library like shadcn with CSS Variables for theming, the above variant doesn’t just werk :(. But worry not there is a solution. For shadcn, keep all your lightmode colors where they are in :root. Presuming that you are using .dark as prescribed by the shadcn docs, copy the values into root like the following:

1
:root {
2
  --radius: 0.625rem;
3
  --background: oklch(1 0 0);
4
  --foreground: oklch(0.145 0 0);
5
  // ... the rest of the variables
6
  --sidebar-border: oklch(0.922 0 0);
7
  --sidebar-ring: oklch(0.708 0 0);
8

9
  &:has(#theme-color-select option[value='dark']:checked) {
10
    // paste your dark mode variables here
11
  }
12

13
  @media (prefers-color-scheme: dark) {
14
    &:has(#theme-color-select option[value='system']:checked) {
15
      // paste your dark mode variables here
16
    }
17
  }

However if you’re like me, you’ll be annoyed at the fact that you have to double check that you are keeping dark mode in sync between the two modes. However, just how we defined a custom variant for dark, we can create a custom variant just for this:

1
@custom-variant ROOT_DARK {
2
  &:has(#theme-color-select option[value='dark']:checked) {
3
    @slot;
4
  }
5
  @media (prefers-color-scheme: dark) {
6
    &:has(#theme-color-select option[value='system']:checked) {
7
      @slot;
8
    }
9
  }
10
}
11

12
:root {
13
  // ...light mode variables
14

15
  @variant ROOT_DARK {
16
    // paste your dark mode variables here
17
  }
18
}

Now you have a single source of truth for your dark mode variables.

Now you have a theme selector that works looks fancy using native HTML elements and can be minimally enhanced with JS.