Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

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

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

[solved] Dark/light modes via OS preference

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)

Offline

#2 2020-11-27 15:29:11

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

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

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.


TXP Builders – finely-crafted code, design and txp

Offline

#3 2020-11-27 16:02:35

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

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

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.

Offline

#4 2020-11-27 17:32:59

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

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

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.

Offline

#5 2020-11-27 17:49:25

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 8,753
Website GitHub Twitter

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

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>

Yiannis
——————————
neme.org | hblack.net | State Machines | NeMe @ github
I do my best editing after I click on the submit button.

Offline

#6 2020-11-27 18:01:36

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

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

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)

Offline

#7 2020-11-27 18:16:08

philwareham
Core designer
From: Haslemere, Surrey, UK
Registered: 2009-06-11
Posts: 3,541
Website GitHub Twitter

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

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

Offline

#8 2020-11-28 00:19:06

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

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

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


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

Offline

#9 2020-11-28 01:08:01

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

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

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


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

Offline

#10 2020-11-28 11:47:26

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

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

phiw13 wrote #327122:

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

There’s the problem. Thanks.

Offline

#11 2020-11-28 21:34:10

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

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

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.


TXP Builders – finely-crafted code, design and txp

Offline

#12 2020-11-28 22:21:42

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

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

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.

Offline

Board footer

Powered by FluxBB