Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

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

Destry
Member
From: Haut-Rhin
Registered: 2004-08-04
Posts: 4,662
Website

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

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)

Offline

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

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 4,035
Website

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

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.


TXP Builders – finely-crafted code, design and txp

Offline

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

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 2,233
Website

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

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.


Where is that emoji for a solar powered submarine when you need it ?

Offline

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

Destry
Member
From: Haut-Rhin
Registered: 2004-08-04
Posts: 4,662
Website

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

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

Offline

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

Destry
Member
From: Haut-Rhin
Registered: 2004-08-04
Posts: 4,662
Website

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

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)

Offline

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

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 2,233
Website

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

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)


Where is that emoji for a solar powered submarine when you need it ?

Offline

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

Destry
Member
From: Haut-Rhin
Registered: 2004-08-04
Posts: 4,662
Website

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

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)

Offline

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

Destry
Member
From: Haut-Rhin
Registered: 2004-08-04
Posts: 4,662
Website

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

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)

Offline

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

Destry
Member
From: Haut-Rhin
Registered: 2004-08-04
Posts: 4,662
Website

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

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.

Offline

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

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 4,035
Website

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

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

TXP Builders – finely-crafted code, design and txp

Offline

Board footer

Powered by FluxBB