[solved] Dark/light modes via OS preference

Destry · 2020-11-27 14:40:16

philwareham wrote #326909:

The [forum] site theme adheres to the OS-level dark/light mode preference.

This makes me wonder if I can do this with my own website (a sensible evolution).

Briefly, how does that work?

I may add a manual toggle at some point.

Or is this how it must be done and then Txp themes become relevant?

Last edited by Destry (2020-12-17 22:49:57)

jakob · 2020-11-27 15:29:11

Yes, it’s quite straightforward. You just need to add a media query to your css as follows:

@media (prefers-color-scheme: dark) {
    /* your css overrides for dark mode */
}

More details here and here (both css-tricks.com).

The basic method just responds to whatever your OS is set to do (e.g. if it automatically switches to night mode at a certain time), or if the whole OS is set to night mode. You can add a manual toggle, which is slightly more involved because you need to save the state. It’s described in the article.

Destry · 2020-11-27 16:02:35

Thank you.

You can add a manual toggle, which is slightly more involved because you need to save the state.

Good to know.

I’m mainly only concerned with mobile display, so I’ll stick to the low road. And Apple offers this suggestion:

Comply with the appearance mode people choose in Settings. If you offer an app-specific appearance mode option, you create more work for people because they have to adjust more than one setting. Worse, they may think your app is broken because it doesn’t respond to their systemwide appearance choice.

Destry · 2020-11-27 17:32:59

What is the trick for testing the colors besides uploading the styles to production and disrupting the live site?

I thought maybe the colors would appear when using the responsive testing mode in the browsers, at least Safari, but no dice, apparently.

colak · 2020-11-27 17:49:25

New way: You can work with another theme to test the other style(s).
Old way:

<txp:if_logged_in>
<txp:css name="testing" media="all" format="flat.link" />
<txp:else />
<txp:css name="default" media="all" format="flat.link" />
</txp:if_logged_in>

Destry · 2020-11-27 18:01:36

Hmm… I can see how that would be useful if I was actually creating another theme, or revamping an entire style sheet, but all I’m working with here is a few lines of CSS under a media query to change a few colors when looking at it on a phone.

I guess this will be more time-consuming than I thought.

A good reason to try themes, though.

Last edited by Destry (2020-11-27 18:02:28)

philwareham · 2020-11-27 18:16:08

The approach to dark mode handling depends on what browsers you want to target. If you are ok to ditch IE11 support then the solution is much easier (CSS custom properties).

phiw13 · 2020-11-28 00:19:06

Destry wrote #327113:

What is the trick for testing the colors besides uploading the styles to production and disrupting the live site?

In Safari, open the WebInspector, Elements tab or Cmd+Shift+I, in the mini toolbar above the tree view, on the right hand side, click on the little screen icon. Caveat, you need an OS that supports Dark mode (10.14+).

As for Dark mode in general, as noted, a media query and custom properties are your friend

phiw13 · 2020-11-28 01:08:01

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

Destry · 2020-11-28 11:47:26

phiw13 wrote #327122:

Caveat, you need an OS that supports Dark mode (10.14+).

There’s the problem. Thanks.

jakob · 2020-11-28 21:34:10

Destry wrote #327131:

There’s the problem. Thanks.

Just to clarify, Philippe was referring to the switch in the Safari web inspector. It’s only for the automatic switching at night time that OS support is needed and you could still provide it for others even if your own OS doesn’t support it.

Even then, you can still make a dark theme for your own site when your OS doesn’t support it. You only need to toggle back and forth using another method. See the toggling themes section of the css-tricks article I linked above.

The method with CSS themes comprised of CSS custom properties (also called css variables) that Phil mentioned is particularly elegant but not possible for older browsers (see caniuse.com). The method suggested in that article with a body class would work everywhere.

Destry · 2020-11-28 22:21:42

Destry wrote #327113:

What is the trick for testing the colors besides uploading the styles to production and disrupting the live site?

I thought maybe the colors would appear when using the responsive testing mode in the browsers, at least Safari, but no dice, apparently.

Reposting this because I think you’re ahead of me, J. The annoyance I’m having right now is not being able to easily see my development. I thought maybe Safari would show the colors when viewing local dev in the browsers responsive tools, but I could not. If I understood 13 correctly, its because that functionality didn’t arrive until 10.14, which I don’t have.

Yes, I’ll probably change my styleshits a bit to take advantage of other tricks like css variables since I’ll probably develop this as a new theme now for easier development viewing.

No, I’m not concerned about every browser, and don’t care at all about desktop browsers. I really only care to cater to my iPhone 6 so when I admire my articles on the phone, I get a dark mode.

Textpattern CMS

Textpattern CMS support forum

#1 2020-11-27 14:40:16