Qwik & CSS
I created this app to play with qwik component and the new color spaces in CSS
The goal was to create a pure CSS library to manage your theme
You can change the global theme with the slide at the top
Welcome to my playground
Local Theme
Everything works with CSS variables so takes advantage of classe scope.
To create a local theme, add the class theme to the HTML element and set the --hue in the CSS.
The trick is to use the oklch space (lch would work too), and split into three variables (lightness, hue, chroma).
Light & Dark
The same hue will work on both light and dark. The light mode still requires some improvement though 😅.
With the new color-mix css property we can manage states (hover, focus, ...) no matter the mode by applying an alpha layer.
background-color: color-mix(in oklch)