simple-translate
simple-translate copied to clipboard
Add support for System theme - dynamic switching between Light and Dark themes
The goal is to automatically switch between the colors of existing Light and Dark themes, based on the OS settings. Notice how the theme stays the same while the colors change according to OS settings below.


The gist of the changes:
- Add a "System" theme
- Add a dark variant for the
TranslateButton
(the pop-up badge) - Add a checkbox for enabling color override in the Translation panel
- Add English texts


Technical description:
Move all colors to CSS variables. The theme is determined by a CSS class, which in turn modifies the CSS variables accordingly.
To preserve compatibility with existing color modification option, introduce a checkbox for explicitly enabling the override. If enabled, the chosen colors are applied via the style
attribute.
Tested on: ✅ Firefox 104 (beta) ✅ Chrome 104
@sienori An attention-drawing ping 😄
Does this look good? 🤔
Is there anything I can do to help move this forward? 🙂
Wonderful! Thank you for your contribution!!
Glad to help 🙂 Love the extension! 🙌