Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
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 ?
Sand space – admin theme for Textpattern
Offline
Re: [solved] Dark/light modes via OS preference
Will try it sometime this week.
Offline
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
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
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
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 ?
Sand space – admin theme for Textpattern
Offline
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
Re: [solved] Dark/light modes via OS preference
You can use JavaScript 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
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
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
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 ?
Sand space – admin theme for Textpattern
Offline
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