Had a great time at #IndieWebCamp Berlin this weekend.

[freddy@social.security.plumbing]

Had a great time at #IndieWebCamp Berlin this weekend. Actually spent much more time thinking about dark/light mode than I thought I ever would

I believe I have understood two patterns to do that in #CSS.

@krosylight demoed their page and is using `html { color-scheme: light dark }` which then allows you to supply colors for links like `a { color: light-dark(darkblue, cyan) }`.

1/2

[freddy@social.security.plumbing]

On my page, I used a different approach.

I define my colors as #CSS variables like so `:root { --color-text: #000 }` which are then changed with a media query like here
`@media (prefers-color-scheme: dark) { :root { --color-text: #fff } }`.

So, should I change the variables with the media query or set them with `light-dark()` directly in the one `:root` declaration?

What would you do and why? I bet @matuzo and @Schepp have thoughts...

[matuzo@front-end.social]

@freddy @Schepp Less typing and no need for the media query with light-dark() but browser support isn't great.

[freddy@social.security.plumbing]

@matuzo @Schepp Where do you see issues with browser support in particular? MDN claims that color-scheme is widely available and light-dark() is baseline as of this year https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark. I hope my users have browsers newer than May 2024 (is that... naive?)

Oh and I also *just* found @sarajw 's article at https://css-tricks.com/come-to-the-light-dark-side/#aa-what-makes-using-color-scheme-and-light-dark-better-than-using-media-queries which points out that it makes implementing a JS based switcher easier, which is nice

[matuzo@front-end.social]

@freddy @Schepp @sarajw FF and Chrome are usually up to date but major updates of Safari are tied to OS updates which people don't usually do immediately when a new version is released.

[freddy@social.security.plumbing]

@matuzo @Schepp @sarajw Gotcha. Where would you look for "what is the main Safari version" or "what is the share among Safaris for the latest version"?

[matuzo@front-end.social]

@freddy @Schepp @sarajw For critical stuff I follow the current version + 2 major versions back approach with Safari.