New way to handle light/dark themes with CSS

The new light-dark() is going to make color themes so much easier!

#css

[nilaallj]

This is the last missing piece we need to make CSS only theme pickers without code duplication, since the light-dark function answers to the color-scheme property unlike the media query which answers to the system/browser settings.

html:has(input#auto:checked) { color-scheme: light dark; }
html:has(input#light:checked) { color-scheme: light; }
html:has(input#dark:checked) { color-scheme: dark; }

[ItsFoxCrafter]

This whole time I was using a different page for dark mode, thxs man you made stuff easier for me

[rujor]

I'm kinda over the whole strictly light or dark thing ☺️. I recently saw an implementation offering light, dimmed, choko, grape and dark theme, using OpenProps. I loved the idea of an even more individual approach, and I started using it in my own project. I don't only switch between two themes in my VS Code either. 🙂

[chrisicotec]

could you do a longer video onthis subject?

[FaizanAnwerAli]

I really hate the prefers-color-scheme overall. I never like it, and I don't use it, and those sites that solely depend on it I don't visit again, only because I always I mean I always want the ability to change theme via the theme changer button, I want the option to choose which theme I want based on my eyesight on the website.

[jackyiakovenko]

what if for example i have custom properties like --light-surface-color : (oklch color here) and --dark-surface-color does it will be work if i write --surface-color: light-dark(var(--light-surface-color), var(--dark-surface-color)) then on body backgroud-color: oklch(var(--surface-color)); ??

[ashley.howard]

I wonder if this could be combined with color-mix too?

[supremoluminary]

Not widely supported. At least, not yet

[CirTap]

I rather have separate files and link elements featuring a media query attribute to let the browser just download one file for the user's preference instead of a single big one bloated with duplicates of each color. Ignoring the fact this will take ages to be 100% safe to use.
And how do IDEs represent those multi colors in the meantime? Can it be used anywhere colours are valid? Like shadiws, gradients, borders and outlines, filters?