simple-translate icon indicating copy to clipboard operation
simple-translate copied to clipboard

Add support for System theme - dynamic switching between Light and Dark themes

Open ilyapopovs opened this issue 2 years ago • 1 comments

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.

image image

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
image image

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

ilyapopovs avatar Aug 06 '22 02:08 ilyapopovs

@sienori An attention-drawing ping 😄

Does this look good? 🤔

Is there anything I can do to help move this forward? 🙂

ilyapopovs avatar Aug 13 '22 08:08 ilyapopovs

Wonderful! Thank you for your contribution!!

sienori avatar Aug 30 '22 11:08 sienori

Glad to help 🙂 Love the extension! 🙌

ilyapopovs avatar Aug 30 '22 16:08 ilyapopovs