theme-switch-animated-icon-color.css

/*
 * This is an example of making a CSS animated color property for
 * the theme-switch component (https://github.com/mahozad/theme-switch).
 * This gist is referenced in the documentation of the component.
 * Currently, only Chromium-based browsers (Chrome, Opera, Edge, etc.) support this.
 * See https://stackoverflow.com/a/63848864 for more information.
 * For a real-world example, see https://mahozad.ir/android-pie-chart/
 * and its source code on https://github.com/mahozad/android-pie-chart/blob/website/docs/styles.css
 */
 
 
@property --theme-switch-icon-color {
  syntax: '<color>';
  initial-value: #000;
  inherits: true;
}

:root {
  --theme-switch-icon-color: red;
}

theme-switch {
  transition: --theme-switch-icon-color 300ms;
}

theme-switch:hover {
  --theme-switch-icon-color: blue;
}