[solved] Dark/light modes via OS preference

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');
  }
}

Destry · 2020-12-14 20:37:33

I’m only keeping the 50op image (to be called, simply, ladder.png).

jakob wrote #327501:

How about like you had it above

I tried, but it doesn’t seem to work. Still loads the same light mode image. That would be the easiest and best solution for an image served from CSS, but it seems too good to be true.

I think I’ll have to take it out of the CSS and put it in a div, which I hate doing for just a presentation image. But then I can use filter: invert (100%);, perhaps.

Compromises.

phiw13 · 2020-12-14 23:06:33

Destry wrote #327502:

I tried, but it doesn’t seem to work. Still loads the same light mode image. That would be the easiest and best solution for an image served from CSS, but it seems too good to be true.

That code does work (assuming no typos, wrong path, …) but that extension you use does not seem to be able to handle that situation. A weakness in the extension ?

Destry · 2020-12-14 23:30:40

phiw13 wrote #327506:

That code does work (assuming no typos, wrong path, …) but that extension you use does not seem to be able to handle that situation. A weakness in the extension ?

Probably the extension.

Well, I just refactored the markup/css to put an extra stupid div in for the ladder image, which blows because I struggled for hours using absolute positioning (no doubt the worst way I could have gone) to get two dumb divs side by side and the ladder sized correctly, and that was just for one screen size. What a nightmare. And feels about as stable as a card house. I could have exercised instead and felt better.

But I can now say that this works:

@media (prefers-color-scheme: dark) {

  :root { [all the variables] }

  .ladder img { filter: invert(100%); }

}

And that’s nice, if I decide to keep it, because it only needs the one light mode image to work, so one less file.

But If you say that other way works, too, then I might change it all back because it doesn’t feel right with the div in the markup.

Last edited by Destry (2020-12-14 23:33:53)

Destry · 2020-12-15 07:21:21

I don’t like the image being content, and the extra (lousy, in my case) code it requires for it, so I’ll put it back to how I had it and push it live today and check the image on my phone to see if your right. If not I’ll revert again to the lousy markup, ‘cause the ladder stays, one way or the other. :}

Destry · 2020-12-15 07:52:14

Too bad the filter: invert(100%); can’t be used on a background image. Or can it…?

What about a pseudo element, so it doesn’t impact the menu content? This may not be exactly right, but for example:

.menu {
    overflow: hidden;
    position: relative;
}

.menu:before {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image:url(‘/assets/.../ladder.png’);
    . . .
    filter: invert(100%);
}

Or would it be :after?

Last edited by Destry (2020-12-15 08:03:42)

phiw13 · 2020-12-15 08:02:39

You haven’t put if live yet I guess? Ask for testing…

As for your other suggestion, sure inserting the image via generated content (::before) would work
You need to specify the content property:

.menu::before { 
  content: '';
  background: url(path/to/image);
/* rest of your code */
}

or

.menu::before { 
  content: url(path/to/image);
 …
}

Textpattern CMS

Textpattern CMS support forum

#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:

#31 2020-12-14 20:37:33

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

jakob wrote #327501:

#32 2020-12-14 23:06:33

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

Destry wrote #327502:

#33 2020-12-14 23:30:40

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

phiw13 wrote #327506:

#34 2020-12-15 07:21:21

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

#35 2020-12-15 07:52:14

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

#36 2020-12-15 08:02:39

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

Board footer