[FR]Automatic change CS theme in dark mode

[boromyr]

Many apps now support automatic switching to dark mode when the system changes color, it would also be useful in CS. An easy way would be to select two desired themes for dark and light mode. In C it might look like:

if (GetBrowserDarkMode() == false){
ApplyTheme(lightTheme);
}
else {
ApplyTheme(darkTheme);
}

[ssborbis]

Looks like it's only a Firefox thing? https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/theme

I can see about adding that functionality, though

[logusergithub]

Hi, if I understand correctly, in my opinion it can be useful if it is an advanced option to select. I have resist fingerprinting enabled in Firefox and this option interferes with the extensions theme. I remember for example this post: https://github.com/violentmonkey/violentmonkey/issues/1515

[boromyr]

That's right, the example you mentioned is exactly what I meant.

Note: my proposal concerns both the popup menu and the extension settings.

[ssborbis]

I'm looking into it. I'm not having much luck on chrome so far, but this might be more OS related than browser.

What browser are you using and are you ok to do some testing with development code or betas?

[boromyr]

I use Edge stable in Windows 11 22H2. Regarding CS I already use the git development version, every now and then I do a git pull to update everything, and I load it as an unzipped extension. I can do some tests, even if I know little about JS. Is there a function to read the system log in JS? I know it's a crude idea, but on Windows, just read SystemUsesLightTheme in the registry to tell if you are in dark mode.

[ssborbis]

Regarding CS I already use the git development version, every now and then I do a git pull to update everything, and I load it as an unzipped extension. I can do some tests, even if I know little about JS.

Both the Master and Development branch have the following added settings:

    autoTheme:false,
    autoThemeLite:"modern",
    autoThemeDark:"modern dark"

You can change them via CS Settings -> Advanced -> Manual Edit

Setting autoTheme: true will cause all menus and settings page to change between the Lite and Dark themes as set above, based on the OS dark setting. I've tested in Firefox with good results, and Chromium with bad results.

Alternative theme names are:

lite
dark
modern
modern dark
modern purple
modern sunset
modern glass

[logusergithub]

Tested the development on Firefox and everything works as expected by changing themes on the browser (auto, light, dark) and enabling the 'autoTheme' feature whith default settings:

• autoThemeDark:"modern dark",
• autoThemeLite:"modern",

Note: if precisely privacy.resistFingerprinting=true (firefox theme: 'Dark'), in this case and always as expected only the theme of the popup menu changes while the theme of the extension (settings page) remains 'Light' (after reloading) even if I set the values in 'autoThemeLite'. But I'm not sure if the cause is only the above option (now disabled) because I get the same result if I enable 'Light' theme in Firefox by setting in CS:

• autoThemeDark": "modern dark", or "dark",
• autoThemeLite": "modern dark", or "dark",

In summary everything ok! Thanks

[MW-J97]

Both the Master and Development branch have the following added settings:

@ssborbis I tried it in chrome, it works automatically, but I think it made the icons of qm larger than before.

[boromyr]

for me everything works correctly, I use a personal css style so I don't see any variations in the size of the buttons

[MW-J97]

for me everything works correctly, I use a personal css style so I don't see any variations in the size of the buttons

What's the code, please? And, is it auto theme?? I tried this above code, but it's not working, when I turn the dark mode on, it's still in light mode.

[ssborbis]

I tried it in chrome, it works automatically, but I think it made the icons of qm larger than before

hmm... not sure why this would be. Do you have a screenshot?

[MW-J97]

hmm... not sure why this would be. Do you have a screenshot?

It's not obvious, but you can compare the icons to the tools line. The tools are not smaller, they are the same. This is the original one: https://imgur.com/NZCm3KB This is the new one: https://imgur.com/uVJgqNl

[ssborbis]

@MW-J97

Unless there's something else going on, i think the issue you're seeing is due to mismatched themes for autoThemeLite and autoThemeDark Those themes are 'lite' and 'modern'. The light /dark combos that would give better results, i.e. consistent icon sizes, would be:

lite + dark or modern + modern dark

[MW-J97]

lite + dark

@ssborbis Yes, this works fine. Will be added to main version soon?

[ssborbis]

1.47.9 going up with a UI to change themes under CS Options -> General

[MW-J97]

1.47.9 going up with a UI to change themes under CS Options -> General

Thanks for help, it works. But, the settings page is always dark, is this normal? I can't even find the toggle that was on the up right corner.

[ssborbis]

But, the settings page is always dark, is this normal?

It should change with your OS or browser lite / dark mode, same as the menus. It may not be working on Chrome. I'll look into it.

[MW-J97]

But, the settings page is always dark, is this normal?

It should change with your OS or browser lite / dark mode, same as the menus. It may not be working on Chrome. I'll look into it.

Hi, This issue is still on the settings page. I am using Vivaldi now.

[ssborbis]

Hi, This issue is still on the settings page. I am using Vivaldi now.

Just to be clear, what is your setting for cs themes, vivaldi lite/dark, and system themes?

I can't seem to get the theme to switch with lite/dark themes on chrome at all. Only Firefox seems to read the browser / system themes

[ssborbis]

@MW-J97

I take that back. I DO have it working on Chromium, but Vivaldi isn't giving good results for the following line of code, meant to detect dark mode

window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;

The strange thing is, I'm stuck in Lite mode, not Dark mode. I wonder what settings ( OS or browser ) we have different to cause that to happen.

[MW-J97]

Just to be clear, what is your setting for cs themes, vivaldi lite/dark, and system themes?

I am using the same settings as your screenshot, but still the same issue.

I wonder what settings ( OS or browser ) we have different to cause that to happen.

ContextSearchOptions_2023-09-26_085130.zip Here is my config.

[ssborbis]

What is the output for window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; from the console in vivaldi and what is your vivaldi theme?

[ssborbis]

Ok, there must be a conflict with the theme settings. I temporarily disabled the automatic theme, refreshed the page, clicked the lite/dark icon at the top-right, then re-enabled auto. That seemed to do it

[MW-J97]

I temporarily disabled the automatic theme, refreshed the page, clicked the lite/dark icon at the top-right, then re-enabled auto.

I think this works fine, but it makes the quick menu bigger with bigger icons and small search bar. I think this is related to the (Automatically theme option)

[MW-J97]

This is a screenshot. I don't know if this is the normal size or not, but it's bigger than before. https://i.imgur.com/nkn313L.png

[MW-J97]

Okay, I don't know what happens, but I changed the themes to lite and dark and the size is back to smaller.

[ssborbis]

I know, in part, what's going on with Vivaldi. This may be a browser bug, but I'm looking for a workaround.

[ssborbis]

I pushed an update to the master branch for testing. Hopefully that fixes your issues

(edit) FYI, Vivaldi may not recognize OS dark / lite themes, so that will still be an issue until the devs have a fix.

[ssborbis]

New version going up 1.46.17. This should fix a few things like the options page styling, but some browsers are still behind on dark mode detection.

I'll close out this thread, but please open a new issue for anything else related to the autotheme setting.

@MW-J97 , if Vivaldi is still having issues but chrome is not, I'd expect an update to the core browser code to fix the issue. I'm fairly certain Chromium had the same issues until recently, but newer code fixed the dark mode detection.