Add: toggle dark/night mode styles automatically

[eight04]

Fixes #524
Fixes #62
Fixes #51

Todos:

• Options page for schemeSwitcher.*. Add: toggle dark/night mode styles automatically #736 (comment)
• Add an indicator in the popup if the style is excluded because of unmatched dark/light mode.

Note that we don't have a style setting page yet, so you can only configure this option via the installation page of usercss.

[eight04]

Or we can add the setting to the installation page, but it doesn't work with USO styles.

[eight04]

Some screenshots:

[kristofferR]

Thanks, but it doesn't detect Dark Mode properly yet. Nothing happens in Dark Mode:
https://streamable.com/12e1i

As you can see I also tested a normal website (webkit.org) with a native dark css, so the problem is in Stylus somewhere.

[eight04]

Unfortunately, I'm using Windows 7 so I don't know how to test system integration.

Can you try restarting the browser and see if the style is applied? If the extension can get the theme state on startup but fail to update it when the system theme is changed, I guess the event is not fired correctly in the background:

stylus/background/color-scheme.js

Line 12 in ce55c89

media.addListener(updateSystemPreferDark);

[eight04]

Here is the Chrome bug: https://crbug.com/968651

[kristofferR]

I tried it now and yeah, it activates if Chrome was launched during dark mode. I'll try Firefox soon.

[gdh1995]

In fact, during my tests on Firefox 67.0.1, the listener is also not triggered, and what's worse is that Firefox won't update the media.matches (Chrome does). So currently, I just set an interval to query the medias every 30/60 seconds.

[eight04]

Maybe relate: https://bugzilla.mozilla.org/show_bug.cgi?id=1561546

[Mottie]

Everything seems to be working properly, but:

• CodeMirror takes a very long time to load GitHub-Dark. It's a difference of 2-3 seconds when I compare this branch to the master.
• I think each individual style should have toggle light/dark mode settings that override the advanced option setting. We could add this as a popup on the manager page or maybe even the edit page. I'll have to think about how to manage multiple styles in the new manager PR.
• The tooltip stating that the style is controlled by light/dark mode in the popup is okay, but I think we need an icon to indicate the current mode.
• Would there ever be the case where a user would want to add more than one time period to toggle light/dark more?

[eight04]

• CodeMirror takes a very long time to load GitHub-Dark. It's a difference of 2-3 seconds when I compare this branch to the master.

CodeMirror? Where?

• I think each individual style should have toggle light/dark mode settings that override the advanced option setting. We could add this as a popup on the manager page or maybe even the edit page. I'll have to think about how to manage multiple styles in the new manager PR.

Can you elaborate? Do you mean to allow users to set different night time for each style?

• Would there ever be the case where a user would want to add more than one time period to toggle light/dark more?

I'm not familiar with dark (night) mode apps. Is there any other application which can configure multiple periods?

[Mottie]

CodeMirror? Where?

I don't see any code that modifies CodeMirror in this PR, but I was just making an observation that opening up GitHub-Dark in the editor from the popup or the manager is very slow.

Can you elaborate? Do you mean to allow users to set different night time for each style?

I think that might be desirable. In the original PR every style had it's own time setting.

Is there any other application which can configure multiple periods?

Not that I know of, I was asking as a more general question. @narcolepticinsomniac WDYT?

[eight04]

I don't see any code that modifies CodeMirror in this PR, but I was just making an observation that opening up GitHub-Dark in the editor from the popup or the manager is very slow.

It seems that CodeMirror is updated on master: b7b6ed2. Maybe the performance is improved?

[Mottie]

Yes, merging master into this branch does appear to fix the performance.

[Cimbali]

Maybe the choice of what modes (night/day/always) a stylesheet is applied to could appear/be modified on its “Edit style” page, rather than just the install page?

[eight04]

Maybe the choice of what modes (night/day/always) a stylesheet is applied to could appear/be modified on its “Edit style” page, rather than just the install page?

We will probably create a style-setting page in the future and put the option there. Including this PR, update URL, user-defined includes/excludes, etc.

[kristofferR]

Dark Reader was able to bypass the Chrome and Firefox bugs:
darkreader/darkreader#1522

They've shipped a new release with Dark Mode support, and it works great on both Firefox and Chrome. You might want to take a look to see how they've solved it.

[eight04]

They observe the change in the content script, which is not affected by the background page bugs. I think we can also use this workaround. However, since it depends on content scripts, it requires at least an opened/activated page. Not sure what will happen when opening a new page while no content script is available.

[ShivamJoker]

I don't see any option to enable only in dark mode

Don't worry, it's not realized yet.
Dark mode is not the most important.

But I saw screenshot in the thread thats why i am asking how can I get that working so that I don't have to manually turn it on and off _

[narcolepticinsomniac]

I saw screenshot in the thread

If you're referring to this one, that's a usercss install page. I guess maybe that's how this PR is configured currently? IDK, I've never tested it.

IIRC, the general plan for the UI was to eventually include these settings in config menus, along with some other per-style settings, but there hasn't been much progress in that direction so far.

[dnknn]

I can't see too

pic

[narcolepticinsomniac]

maybe that's how this PR is configured currently?

¯\(ツ)/¯ Wild guess based off the screenshot. Like I said, I never tested, nor do I plan to in its current state. Maybe you need to reinstall the style? Maybe it doesn't work at all? Who knows?

[eight04]

If want to do it, The most perfect and convenient should be like this :▼

Users can easily ON/OFF (Auto toggle Light/Dark) at any time without any difficulty.
#stylus-options not used for switching, but for advanced settings, such as Toggle Light/Dark Mode automatically.

WDYT？

I think it makes more sense to set the option to "By system preference" and flip the mode from system UI.

[dnknn]

makes more sense to set the option to "By system preference" and flip the mode from system UI.

What that means? sorry for my English..

mean : gif-demo ?

darkreader/darkreader#1522

[michaelgosling]

makes more sense to set the option to "By system preference" and flip the mode from system UI.

What that means? sorry for my English..

mean : gif-demo ?
darkreader/darkreader#1522

I believe thats exactly what they mean, yes.

[dnknn]

ms-settings:nightlight

👆This URI protocol can directly open the system night mode settings. or Win+A

[eddie-LA]

Hello.
I was going to file an issue but then found this.
Any progress with this..? I also use Stylish mainly for the more efficient Dark Mode. 😄

[eight04]

The core feature is ready. However, currently you can only configure this option for usercss at installation time.

The configuration UI is blocked by #827.

[eight04]

Conflict resolved.

@tophf How about merging this without per style options?

[tophf]

The idea sounds good, many people want it. I don't know what problems would ensue due to merging it now, but I hope we'll be able to resolve them as we go, just like we always do :-)

[eight04]

I don't know what problems would ensue due to merging it now

If we drop a release before fixing #827, we will probably receive some issues about not being able to configure dark/light mode for some styles. To avoid that, we can hide the UI via CSS so those advanced users can still access the options by showing them with custom CSS.

@narcolepticinsomniac?

[Draculah]

Just like #1343, I was wondering when/if the auto per-theme toggle based on system preferences would show be available. Is this the latest update on the auto update theme?

And, assuming it's in the extension by the merge, what CSS would I need to display these settings? Or is it highly not recommended?

[tophf]

It's in the beta.