[FR]Automatic change CS theme in dark mode about contextsearch-web-ext

[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:
violentmonkey/violentmonkey#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.