~Dis~Respect System Color Theme (light/dark)

ZimCodes commented 2 years ago

System theme color is now ~dis~respected by Doki Theme.

Description

Acquiring the current system theme color mode using window.matchMedia() was quite problematic as the event listener would not pick up anything. Thus, I decided to use CSS media feature in combination with CSS variables, event listeners, and the new browserSettings.overrideContentColorScheme component from the browserSettings WebExtension API.

This feature is added as a new option to be enabled/disabled in the Options page. In addition, the dark/light mode switch in the popup menu is disabled when this feature is activated!

Detecting System Theme

So the detection works like so:

CSS variable --system-color-theme is used to hold the current system color theme. (light/dark).
The media prefers-color-scheme: updates --system-color-theme based on current system color theme.
An event listener listens for the popup menu to show before storing the current state of --system-color-theme. *This is important to note!
Finally, when the option is enabled, the new browserSettings.overrideContentColorScheme is applied. *This is important to note!

BrowserSetting Addition

The browserSettings.overrideContentColorScheme has two settings of note: browser & system. The big difference between the two is the browser has an independent theme setting from the overall system, and thus has a chance of ignoring the system settings. See #82 for more details. Changing browserSettings.overrideContentColorScheme to system will force the browser to recognize the system-wide theme color (light/dark).

Beware

The problem however is that browserSettings.overrideContentColorScheme only supports Firefox 95.0+, which is the latest Firefox version (as of this time of writing). This means in order to install this extension now, users MUST download Doki Theme on Firefox 95.0+.

Motivation and Context

Implements issue #82 .

Screenshots (if appropriate):

Random Select (Dark System Setting)

https://user-images.githubusercontent.com/23222943/146148772-c7e236ed-6be6-46b6-ac2d-aa3f1b1326ca.mp4

Mixed mode (Light System Setting)

https://user-images.githubusercontent.com/23222943/146149663-22ad428e-0cc7-45f8-9700-1fc4c6f616d2.mp4

Types of changes

[ ] Bug fix (non-breaking change which fixes an issue)
[ ] New feature (non-breaking change which adds functionality)
[x] Breaking change (fix or feature that would cause existing functionality to change)
[ ] Non-Functional Change (non-user facing changes)

Checklist:

[x] I updated the version (base package.json and re-built the master extension).
[x] I updated the changelog with the new functionality.

Unthrottled commented 2 years ago

Hey! Thanks for getting this started. I'll have some time to look over it later this week (probably the weekend)

Just briefly skimmed the pr. Does this only work for mixed mode?

Or is there a way for the user to select a specific dark theme & light theme to be used?

example settings

Something this where the user would be able to select from a list of all the available light themes & dark themes?

ZimCodes commented 2 years ago

Does this only work for mixed mode?

This pr #83 currently works for all modes including individual choice, random, and mixed.

Or is there a way for the user to select a specific dark theme & light theme to be used?

The option page could be setup this way. So long as it uses the aforementioned browserSettings.overrideContentColorScheme which has all of the overrides shown in the image.

ZimCodes commented 2 years ago

@Unthrottled is the image setup for the Option page preferred?

Unthrottled commented 2 years ago

is the image setup for the Option page preferred?

I'll assume that since this works for all modes, it will attempt to switch to the dark/light variant of the same character. Or does it just randomly pick a light or dark (I guess I could look at the code later)

Since not every character has a light/dark variant, I think it makes sense to allow the user to choose which theme they want to use for the light setting and the dark setting.

I'm not hung up on how the options page should look like (I just picked that as an example), just as long whatever you come up with satisfies these things:

Enables/disables theme switching based on system setting, disabled by default.
Allows user to specify light & dark theme combo to match the system setting, or let's them keep the default behavior.

ZimCodes commented 2 years ago

I'll assume that since this works for all modes, it will attempt to switch to the dark/light variant of the same character. Or does it just randomly pick a light or dark

@Unthrottled For individual choice, if the character does not have the light/dark theme that follows the system settings it will use the opposite theme. For instance, my system theme is currently light mode. If the character does not have a light theme, it will use the dark one instead.

For random, only characters that can follow the system theme can be randomly chosen. For instance, my system theme is dark mode. Only characters that have the dark theme will be randomly selected.

For mixed, only characters that can follow the system theme can be added to the mix. For instance, my system theme is light mode. Only characters that have the light theme will be randomly selected to be added to the mix.

Hope this diminishes some of the confusion.

Enables/disables theme switching based on system setting, disabled by default.

Allows user to specify light & dark theme combo to match the system setting, or let's them keep the default behavior.

I'll see what I can do.

ZimCodes commented 2 years ago

Settings Page

options_page

ZimCodes commented 2 years ago

Secondary backgrounds will now be chosen when selecting the next theme in random & mixed modes.

Before, secondary backgrounds were not added to the mix in mixed or even selected in random mode.

Unthrottled commented 2 years ago

For individual choice, if the character does not have the light/dark theme that follows the system settings it will use the opposite theme. For instance, my system theme is currently light mode. If the character does not have a light theme, it will use the dark one instead.

So it doesn't do anything then? If I had Shigure set, and the OS sets itself to dark, then Shigure will still be set then, right? This part isn't clear to me.

Sorry for not being clear, what I looking for

Allows user to specify light & dark theme combo to match the system setting, or let's them keep the default behavior.

Was something like this plugin:

https://user-images.githubusercontent.com/15972415/146554544-4b6ad4ab-3325-433a-89d8-b213590f7069.mp4

Where I could choose Shigure to match the light OS theme, and Shima Rin to match the dark theme. That way when the OS changes theme, if dark, then firefox is Shima Rin, if light then Shigure. (edit: ignore the time setting, this will respect the OS theme instead)

Though I suppose this use case is only for folks that aren't in random/mixed (If I understand what you've described so far on how a specific doki theme selection works).

TBH, I think this is something that might only apply to me. Because I don't use mixed/random mode. So it might just be a me problem. I'll ask the original feature author what they where thinking.

ZimCodes commented 2 years ago

For individual choice, if the character does not have the light/dark theme that follows the system settings it will use the opposite theme. For instance, my system theme is currently light mode. If the character does not have a light theme, it will use the dark one instead.

So it doesn't do anything then? If I had Shigure set, and the OS sets itself to dark, then Shigure will still be set then, right? This part isn't clear to me.

Yes. If the system choice is selected from the Options Page. And if I had Shigure set, (Note: Shigure only has a light theme) and the OS is set to dark, Shigure (light theme) will still be set.

In the upcoming commit(s), I intend to load characters that are compatible with the currently selected choice from the Options Page (see settings page image below). This means the popup menu will only show characters that only have dark themes, light themes, or both depending on selection. edit: At the moment, the popup menu shows all characters regardless of choice.

Settings Page

Where I could choose Shigure to match the light OS theme, and Shima Rin to match the dark theme. That way when the OS changes theme, if dark, then firefox is Shima Rin, if light then Shigure.

So it might just be a me problem. I'll ask the original feature author what they where thinking.

Also with the uncertainty for a different implementation. I'll wait a bit before implementing this interesting theme concept you brought up here.

ZimCodes commented 2 years ago

The feature mentioned at #82 is now complete! This new option is called druthers, which is another way of saying preference, would rather, or choice. This feature does exactly as requested. druthers is added alongside the other system option choices:

System options

system
druthers
dark
light
default

Druthers Mode

https://user-images.githubusercontent.com/23222943/146766085-ecb1b416-a678-4cbc-a75c-44c7fb5b32de.mp4

doki-theme / doki-theme-web