<theme-switcher>

A custom element for switching between light, dark, and system color themes.

Source code & documentation

Demo

Use the theme switcher below to change the page theme. The palette picker demonstrates how CSS variables can be used to customize the component's colors.

Theme switcher palette
100%
Code sample

For brevity reasons, only the CSS variables for the "Electric lime" palette are shown below.

<theme-switcher class="custom-theme"></theme-switcher>
.custom-theme {
  color-scheme: light dark;

  --theme-switcher-background-color: #f7fee7;
  --theme-switcher-border-color: #bef264;
  --theme-switcher-option-color: #3f6212;
  --theme-switcher-option-selected-color: #ffffff;
  --theme-switcher-option-selected-background-color: #65a30d;
  --theme-switcher-option-focus-ring-color: #65a30d;
}

@supports (color: light-dark(#000000, #ffffff)) {
  .custom-theme {
    --theme-switcher-background-color: light-dark(#f7fee7, #142004);
    --theme-switcher-border-color: light-dark(#bef264, #84cc16);
    --theme-switcher-option-color: light-dark(#3f6212, #d9f99d);
    --theme-switcher-option-selected-color: light-dark(#ffffff, #172008);
    --theme-switcher-option-selected-background-color: light-dark(#65a30d, #a3e635);
    --theme-switcher-option-focus-ring-color: light-dark(#65a30d, #a3e635);
  }
}

License

Licensed under the The MIT License (MIT)