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,662
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,026
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,662
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,662
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,451
Website

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,662
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,437
Website

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,230
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,230
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,662
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

Board footer

Powered by FluxBB