@sunfish wait, is this essentially "I like doing hard puzzles. Of course I don’t want to make them simple"?!

@hanno suggested `X-Content-Type-Options: nosniff` and I believe @snroth suggested `Strict-Transport-Security`.

I argued against `X-Frame-Options` (because 1990s) and `Cross-Origin-Opener: same-origin` (because paypal payments are in popups).

@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 @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

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

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...

@Edent https://⒕ ₨ is just two glyphs.

@jaffathecake @simon yes, totally. Dunno if Simon would want scripts in the images. If you want them, sandbox gives better controls. If you want to police the exact set of allowed elements, a sanitizer is even better.

But if all you want is to safely display them, img is really simple (don’t host the user supplied files on the same origin in either of these cases though :))

@simon @jaffathecake if you just want the SVG displayed, put them in an <img> tag. Otherwise, your favorite sanitizer library DOMPurify has great SVG support. (Iframe sandbox works really great too!!)