Scribblehub should read the dark mode preferences from the operation system when they have no preference set

Lena

Active member
Joined
Nov 26, 2019
Messages
19
Points
43
Every day, hundreds* of Scribblehub readers & writers are confronted with something terrible: light mode.
And this while almost all† browsers support setting dark mode preferences!
I say: stop this madness! Vote for this feature request!

*: okay, I don't actually have any numbers. But I image with people resetting their cookies and stuff it must happen at least a few times a day. I just wanted this to sound like a political ad. I originally wanted to make the title sound like one of those US laws with “patriotic” titles, but that seemed excessive.
†: 92% according to caniuse.com.

Okay, but in all seriousness, Javascript has support for asking if the OS (and/or browser depending on implementation) is currently set to dark mode, and website can automatically adapt to that. I would implement it by adding an extra option in the theme dropdown called system, which will switch between dark and light mode depending on the preferences of the user, and make that mode the standard. This is how some sites, like StackOverflow, do it.

Here is some example code:
JavaScript:
if (window.matchMedia("(prefers-color-scheme: dark)")){
 //reader prefers dark mode
}else if (window.matchMedia("(prefers-color-scheme: light)")){
 //reader prefers light mode 🤨
}else{
 //reader's browser is old
}
It's also possible to use .addListener for when the reader changes the theme without refreshing the page, but honestly I don't think that happens often.
 
Last edited:

AliceShiki

Magical Girl of Love and Justice
Joined
Dec 23, 2018
Messages
3,530
Points
183
I mean, it only takes a few seconds to change from Light Mode to Dark Mode, so... I dunno, feels unnecessary, really.
 

Lena

Active member
Joined
Nov 26, 2019
Messages
19
Points
43
I mean, it only takes a few seconds to change from Light Mode to Dark Mode, so... I dunno, feels unnecessary, really.
I know it's an almost negligible amount of work, but it's still somewhat easier than doing it by hand, especially if someone decided to switch every app they've installed from light to dark mode; all those little things add up. (aka death by a thousand cuts)
And most operation systems have an option to switch automatically on e.g. sunset and sunrise, and implementing this, which shouldn't be that difficult, means Scribblehub also gets support for those scenarios.
 

Nhatduongg

Yuyuko Saigyouji, The Dreaming Ghost
Joined
Jun 28, 2021
Messages
268
Points
133
Heh. Look at me, I use dark mode for SH and light mode for SHF. Perfectly balanced.
 

AnonymousIncognito

Active member
Joined
Dec 20, 2019
Messages
5
Points
43
As someone who has their computer automatically switch to Dark Mode at sunset and Light Mode at sunrise, ScribbleHub's lack of support for this despite having themes for both is quite frustrating.

If you want to preserve the ability to explicitly choose a theme, there should be three settings: Default, Light, and Dark. Default uses the CSS prefers-color-scheme feature, the others override it.

Otherwise, ScribbleHub already changes theme with a JavaScript function, so it is trivially easy to implement this. In fact, I'll do it for you:
JavaScript:
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change',   e => toggleTheme(e.matches ? 'dark' : 'default'));
You can try it out right now by running that in your browser's JavaScript console and switching your theme. Note that it sets up a listener to respond to changes in theme: it doesn't set the theme when initially loaded. Doing that is basically the same but without the listener, so I won't put it here.
 
Last edited:

Lena

Active member
Joined
Nov 26, 2019
Messages
19
Points
43
Yeah, I implemented it myself with a custom css rule that consisted an @import and a media query.
But that doesn't work on mobile and is still quite a hassle.
Also, it's soo frustrating how extremely it would be for the site to implement.
 

AnonymousIncognito

Active member
Joined
Dec 20, 2019
Messages
5
Points
43
Yeah, I implemented it myself with a custom css rule that consisted an @import and a media query.
But that doesn't work on mobile and is still quite a hassle.
Also, it's soo frustrating how extremely it would be for the site to implement.
What's infuriating is that all of the difficult parts, namely designing and implementing multiple themes, are literally done already.

You can do all of this stuff on iOS, at least. I'd assume you can on Android too, so I'm not sure what you mean by "doesn't work on mobile".
 

Lena

Active member
Joined
Nov 26, 2019
Messages
19
Points
43
You can do all of this stuff on iOS, at least. I'd assume you can on Android too, so I'm not sure what you mean by "doesn't work on mobile".

Oh, I meant that I use an browser extension (called Stylish) plus one line of CSS to make it switch automatically for me alone. You can't install extensions on iOS.

Implemented might be wrong choice of words here, but didn't know what else to call it.
What's infuriating is that all of the difficult parts, namely designing and implementing multiple themes, are literally done already.
Yeah, like only five lines change total I think if you want to do it properly. (Of course there might be some server side stuff I'm unaware off)
 

AnonymousIncognito

Active member
Joined
Dec 20, 2019
Messages
5
Points
43
I've come up with a way to do it that even respects the existing settings.

Replace the following line of HTML:
HTML:
<link rel="stylesheet" id="mesh-nightmode-css" href="https://www.scribblehub.com/wp-content/themes/writeit-child/styles/default.css?ver=1.9.1" type="text/css" media="all">
with these lines:
HTML:
<link rel="stylesheet" id="mesh-nightmode-css" href="https://www.scribblehub.com/wp-content/themes/writeit-child/styles/default.css?ver=1.9.1" type="text/css" media="not all and (prefers-color-scheme: dark)">
<link rel="stylesheet" id="mesh-nightmode-css-dark" href="https://www.scribblehub.com/wp-content/themes/writeit-child/styles/dark.css?ver=1.9.1" type="text/css" media="(prefers-color-scheme: dark)">
If the dark theme is selected, it will always be dark. If default is selected, it will use the OS preference.
 

Ai-chan

Queen of Yuri Devourer of Traps
Joined
Dec 23, 2018
Messages
1,413
Points
153
Do people really feel bothered by light mode? Ai-chan prefers to read in light mode. It doesn't make Ai-chan feel sleepy from reading those yawnful stories by authors who think they're so awesome that they don't have to take the effort to bother about basic spell checker or sentence structure.
 

AnonymousIncognito

Active member
Joined
Dec 20, 2019
Messages
5
Points
43
Do people really feel bothered by light mode? Ai-chan prefers to read in light mode. It doesn't make Ai-chan feel sleepy from reading those yawnful stories by authors who think they're so awesome that they don't have to take the effort to bother about basic spell checker or sentence structure.
If I disliked light mode, I'd set it to dark mode. I dislike having the mode not match the rest of my system.
 

melchi

What is a custom title?
Joined
May 2, 2021
Messages
1,807
Points
153
If one line of code can make it just a little bit easier for a vast amount of people what is the harm?
 
Top