<theme-toggle>

A custom element for toggling between light and dark color themes while following the system preference by default.

Source code & documentation

Demo

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

Theme toggle palette
100%
Code sample

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

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

  --theme-toggle-background-color: #f7fee7;
  --theme-toggle-background-hover-color: #ecfccb;
  --theme-toggle-border-color: #bef264;
  --theme-toggle-color: #3f6212;
  --theme-toggle-focus-ring-color: #65a30d;
}

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

License

Licensed under the The MIT License (MIT)