Is this still the solution for checking for dark mode?

Dev
1

Continuing the discussion from No specific class for dark mode:

I’ve got a theme component that’s changing the site logo based on what category the user is in and adding logos to the categories in the sidebar, and now they want to change to a different logo in dark mode.

Something like this:

.category-my-other-identity #site-logo {
  content: url($AS) !important;
  display: inline-block;
  height: $site-logo-height;
  font-size: 0;
  margin-top: $site-margin-top;
  margin-bottom: $site-margin-bottom;
}

I’m terrible at CSS, but it would seem like it would be much easier if there were a “this-is-dark-mode” class. Or maybe something like the above can work.

Or maybe if this were a “real” theme-component with settings (right now it’s just hand coded like above), then it would be easy enough to stick those settings in the CSS. This seems like what I should probably do anyway, right?

6 Likes
2

Coincidently, this is something we’ve been discussing internally this week! Couple of proof-of-concept PRs are here:

Note these are just experiments to help with our thinking - there’s no guarantee either will be merged.

As for ‘right now’, the best bet is probably to use the <LightDarkImg component like this:

8 Likes
3

That makes sense. I had the same issue once but @david, that would’ve worked for me.
Also, would badge granting difficulties be considered a bug or something else?

2 Likes
4

Could be a bug, but we’d need more detail to know one way or the other — it’s also unrelated to this topic, so your best bet would be to search for the issue, and if you can’t find an answer start a new topic walking through what you’re trying and where it’s failing.

5 Likes
5

A pure CSS solution would probably use the --scheme-type CSS variable, or even the color-scheme property that was added a few hours ago (woo!), with @container style queries or light-dark().

Unfortunately light-dark() only works with color values. You might be able to use @container style queries targeting the color-scheme property (firefox doesn’t support style queries for custom properties yet). Haven’t been able to test the idea as my dev env is currently down.

Having a dedicated .dark-mode or .light-mode class on the root would definitely be the easiest to work with.

5 Likes