[solved] Dark/light modes via OS preference

Destry · 2020-12-13 09:29:54

phiw13 wrote #327123:

Hmm, this Dark mode switcher extension for Firefox might even work when the OS itself does not support Dark mode (install via the Firefox add-ons site).

This did indeed work for me with my own local dev, and this forum and the main .com site, which I could not see in dark mode before. But for some reason it does not work on user docs or the plugins site, though I can see the dark mode on both on mobile, as the style rules intend.

In any case, it works for me with my original problem, which was local dev on my late 2011 laptop, so no complaints.

Last edited by Destry (2020-12-13 09:47:24)

philwareham · 2020-12-13 11:27:03

Sounds like your extension is having problems with cross-site scripts (because the docs, themes, plugins sites load their CSS and JavaScript from the main .com domain).

phiw13 · 2020-12-13 11:27:11

Destry wrote #327456:

But for some reason it does not work on user docs or the plugins site, though I can see the dark mode on both on mobile, as the style rules intend.

That is interesting (same result here, fwiw). It might be an interesting exercise trying to figure out why those TXP sites (they all share the same stylesheet I think) ‘fail’. Something for a cold winter afternoon…

Destry · 2020-12-13 16:37:22

Back to my local dev for dark mode…

Is it not possible to use prefers-color-scheme rules for changing images used in the theme?

I have some small graphics used in the navigation and links, and the ladder on the home page. They need to be altered for a dark theme, but when I try to change up the files under the color scheme queries, no images output. Doesn’t seem to be a cache problem either.

Maybe you can’t change image that way? Just wondering if there was some obvious thing I didn’t know before I pour myself into trying to figure out what isn’t obvious but should be.

===

Ah, maybe this is the trick.

<picture>
    <source srcset="night.jpg" media="(prefers-color-scheme: dark)">
    <img src="day.jpg">
</picture>

~~Goes to give it a go.~~ Hmm. No that means no images from CSS. Arg.

===

Yeah, the picture element seems like the only way, I guess.

That makes sense to me now since prefers-color-scheme is for colors, not images.

I guess this will work fine for the ladder images, which is key. I’ll have to rethink the nav bars (yellow in light mode); maybe try to mimic that with CSS only.

Last edited by Destry (2020-12-13 17:22:50)

philwareham · 2020-12-13 17:46:23

You can use JavaScript to display different images in dark mode. I do that on the Textpattern.com site (e.g. we show a dark mode screenshot of Textpattern if you are in dark mode).

Destry · 2020-12-13 17:56:01

I like my ladder!

But I don’t want to add more divs to make presentation-only images work, and I don’t want to have to think about JavaScript, yet.

This might be the kick I needed to go 100% text only. That would be the easiest/smartest move.

I’ll hang it up for tonight and think about it.

Last edited by Destry (2020-12-13 17:56:51)

jakob · 2020-12-13 20:27:29

It looks like you’ve found the most likely candidate with the picture element, but maybe Jeremy Keith’s article offers some further ideas in a similar vein, including using a css filter to reverse an image or css to change an svg. That might work for your largely monochrome images.

phiw13 · 2020-12-13 22:36:19

CSS:

@media only screen and (min-width: 700px) and (prefers-color-scheme:dark) {
  .menu { background-image: url(path/to/dark-mode-ladder.png); }
}

In your image editor, invert / edit the image as needed, and done. The filter property is of little use here, as that would invert the whole <div class="menu" />, given your current mark-up.

Destry · 2020-12-14 08:06:43

phiw13,

I had actually tried that, but it causes the dark mode not to work at all for the whole site, though that might be a problem with the FF plugin, I suppose. Either way, I have no way to actually see what it could look like.

Just to be sure I’m doing it right, would I add that query immediately after the associated screen size query? For example,

@media only screen and (min-width: 700px)  {
  . . .
  .menu { background-image: url(/assets/images/ladder-50op.png); }
  . . .
}

@media only screen and (min-width: 700px) and (prefers-color-scheme:dark) {
  .menu { background-image: url(/assets/images/darkmode/ladder-50op.png); }
}

Destry · 2020-12-14 08:21:43

In other news…

I have decided not to use the alternate ladder graphic I was using for mobile layout only, which sits behind the homepage body links (it was different by being more faded to reduce contrast with overlying text). That was perhaps never good for link legibility anyway, so an easy one to give up.

And I noticed that if I use the background-image rules in the color-scheme set anyway…

@media (prefers-color-scheme: dark) {
  . . .
/* Following are not valid use of prefers-color-scheme rules, 
   but adding them works to not show nav and link graphics
   that are otherwise desired in the light mode.
*/

  .menu-item a:hover,
  article a:hover,
  .pied a:hover {background-image:url('/assets/images/darkmode/bar-link.png');}

  nav a:hover,
  nav li.active a,
  nav li a:focus {background-image:url('/assets/images/darkmode/bar-nav.png');}

}

It works to make those bar graphics on nav items and body links not appear in dark mode only, which aren’t really needed in dark mode anyway. So by doing that I still get them in light mode, and avoid them in dark mode. :)
I know the rules aren’t supposed to be used like that, but it works. Not tested in more browsers, though.

So that just leaves the ladder graphic for large screen layouts.

Last edited by Destry (2020-12-14 08:24:25)

phiw13 · 2020-12-14 08:24:16

hmm… strange, but I can reproduce that, not sure why that is :-(

Does omitting the only keyword work for you? (it solves your issue here in a simple test)

@media screen and (min-width: 700px) and (prefers-color-scheme:dark) {}

you don’t need it anyway (and shouldn’t really use, unless you plan to support some really old browsers)

Destry · 2020-12-14 08:45:13

phiw13 wrote #327483:

Does omitting the only keyword work for you? (it solves your issue here in a simple test)

Confirmed, works… It brings the dark mode back.

But, the dark mode image isn’t recognized (after cache clear). It still reads the light mode path and file.

I’ll keep playing with it.

Last edited by Destry (2020-12-14 08:55:00)

Destry · 2020-12-14 10:24:07

Hmm… The FF plugin doesn’t seem to work on dark mode colors set as a variable, as described in Jeremy Keith’s article. Unless I’m not using them correctly, but I think I am. I just started with one to test, the background color on the html element. It does not show up, though the light mode color set the same way (with variable) does.

===

Scratch that. It works.

Last edited by Destry (2020-12-14 10:29:22)

Destry · 2020-12-14 18:03:29

Refactored all my colors to variables. That was a chore. Glad I did it, though. I had more colors tucked throughout the CSS than I realized. Not sure the file is lighter, but definitely more organized and easier to manage. In relation to the prefers-color-scheme rules, that’s a pretty sweet situation for site owner and users.

Just need to deal with my ladder image somehow and I can push this.

jakob · 2020-12-14 19:59:22

Destry wrote #327494:

Just need to deal with my ladder image somehow and I can push this.

How about like you had it above, just for your replacement ladder images?

@media (prefers-color-scheme: dark) {
  .menu {
    background-image:url('/assets/images/darkmode/ladder-25op.png');}
  }
@media (prefers-color-scheme: dark) and (min-width: 700px) {
  .menu {
    background-image:url('/assets/images/darkmode/ladder-50op.png');
  }
}

Textpattern CMS

Textpattern CMS support forum

#16 2020-12-13 09:29:54

Re: [solved] Dark/light modes via OS preference

phiw13 wrote #327123:

#17 2020-12-13 11:27:03

Re: [solved] Dark/light modes via OS preference

#18 2020-12-13 11:27:11

Re: [solved] Dark/light modes via OS preference

Destry wrote #327456:

#19 2020-12-13 16:37:22

Re: [solved] Dark/light modes via OS preference

#20 2020-12-13 17:46:23

Re: [solved] Dark/light modes via OS preference

#21 2020-12-13 17:56:01

Re: [solved] Dark/light modes via OS preference

#22 2020-12-13 20:27:29

Re: [solved] Dark/light modes via OS preference

#23 2020-12-13 22:36:19

Re: [solved] Dark/light modes via OS preference

#24 2020-12-14 08:06:43

Re: [solved] Dark/light modes via OS preference

#25 2020-12-14 08:21:43

Re: [solved] Dark/light modes via OS preference

#26 2020-12-14 08:24:16

Re: [solved] Dark/light modes via OS preference

#27 2020-12-14 08:45:13

Re: [solved] Dark/light modes via OS preference

phiw13 wrote #327483:

#28 2020-12-14 10:24:07

Re: [solved] Dark/light modes via OS preference

#29 2020-12-14 18:03:29

Re: [solved] Dark/light modes via OS preference

#30 2020-12-14 19:59:22

Re: [solved] Dark/light modes via OS preference

Destry wrote #327494:

Board footer