Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

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

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 4,036
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,663
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

#13 2020-11-29 00:04:01

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

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

Destry wrote #327147:

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.

:-)

Did you try that Firefox extension I linked to upthread? Curious, as it would be helpful for others who don’t have access to an OS with built-in Dark Mode support.


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

Offline

#14 2020-11-29 14:44:57

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

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

Will try it sometime this week.

Offline

#15 2020-12-12 11:42:14

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

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

phiw13 wrote #327148:

Did you try that Firefox extension I linked to upthread? Curious, as it would be helpful for others who don’t have access to an OS with built-in Dark Mode support.

Sorry it took so long. Works great! Now all websites using the prefers-color-scheme rules shows what is offered on laptop. Including this forum! :)

There’s a quick flash of the base color scheme before the dark kicks in, a bit annoying, but nice for testing, and else if you don’t mind the flash.

==

FYI, there’s a FF plugin that dark modes wikipedia, which everything that doesn’t use the prefers-color-scheme rules: I haven’t tried it yet, but it’s called Midnight Lizard.

Last edited by Destry (2020-12-12 13:47:50)

Offline

#16 2020-12-13 09:29:54

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

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

phiw13 wrote #327123:

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

This did indeed work for me with my own local dev, and this forum and the main .com site, which I could not see in dark mode before. But for some reason it does not work on user docs or the plugins site, though I can see the dark mode on both on mobile, as the style rules intend.

In any case, it works for me with my original problem, which was local dev on my late 2011 laptop, so no complaints.

Last edited by Destry (2020-12-13 09:47:24)

Offline

#17 2020-12-13 11:27:03

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

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

Sounds like your extension is having problems with cross-site scripts (because the docs, themes, plugins sites load their CSS and JavaScript from the main .com domain).

Offline

#18 2020-12-13 11:27:11

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

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

Destry wrote #327456:

But for some reason it does not work on user docs or the plugins site, though I can see the dark mode on both on mobile, as the style rules intend.

That is interesting (same result here, fwiw). It might be an interesting exercise trying to figure out why those TXP sites (they all share the same stylesheet I think) ‘fail’. Something for a cold winter afternoon…


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

Offline

#19 2020-12-13 16:37:22

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

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

Back to my local dev for dark mode…

Is it not possible to use prefers-color-scheme rules for changing images used in the theme?

I have some small graphics used in the navigation and links, and the ladder on the home page. They need to be altered for a dark theme, but when I try to change up the files under the color scheme queries, no images output. Doesn’t seem to be a cache problem either.

Maybe you can’t change image that way? Just wondering if there was some obvious thing I didn’t know before I pour myself into trying to figure out what isn’t obvious but should be.

===

Ah, maybe this is the trick.

<picture>
    <source srcset="night.jpg" media="(prefers-color-scheme: dark)">
    <img src="day.jpg">
</picture>

Goes to give it a go. Hmm. No that means no images from CSS. Arg.

===

Yeah, the picture element seems like the only way, I guess.

That makes sense to me now since prefers-color-scheme is for colors, not images.

I guess this will work fine for the ladder images, which is key. I’ll have to rethink the nav bars (yellow in light mode); maybe try to mimic that with CSS only.

Last edited by Destry (2020-12-13 17:22:50)

Offline

#20 2020-12-13 17:46:23

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

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

You can use JavaScriot to display different images in dark mode. I do that on the Textpattern.com site (e.g. we show a dark mode screenshot of Textpattern if you are in dark mode).

Offline

Board footer

Powered by FluxBB