Targetable Color Schemes

Install this theme component

Hello :wave:

This theme component adds the color-scheme="id" attribute to the <html> tag. This attribute contains the current color scheme id. Like this, you can make (CSS, Javascript) changes easily which will be only active on the specific color scheme where you place… :slightly_smiling_face:

Target example

html[color-scheme="128"] {
  // your code
}

Screenshot 2023-08-29 at 1.18.25

9 Likes

Oh this is very useful indeed. I can’t wait to play around with this component. Great idea @Don! :slight_smile: :clap:

6 Likes