feat: theme switcher

[hecht-a]

Hello,
I was thinking that the ability to change themes was missing. So I implemented this feature.

We can define 2 themes: light and dark.
The theme changes automatically depending on the device theme (it's also possible to disable this behaviour using the sync-device-theme: false configuration).

Here's an example configuration for a light & dark theme with the theme synchronised with the device theme :

theme:
  default-color-scheme: light
  sync-device-theme: true
  light:
    background-color: 220 23 95
    contrast-multiplier: 1.0
    primary-color: 220 91 54
    positive-color: 109 58 40
    negative-color: 347 87 44
  dark:
    background-color: 229 19 23
    contrast-multiplier: 1.2
    primary-color: 222 74 74
    positive-color: 96 44 68
    negative-color: 359 68 71

There's also a button at the top left of the page to change the theme directly from the app.

Don't hesitate to let me know if I need to change anything or be clearer in the documentation.

[svilenmarkov]

Hey, thanks for contributing!

I try very hard not to introduce backwards-incompatible changes for the config such as this one and I think there's a way to avoid doing that here. In addition, I believe it would be more practical if rather than enforcing sync-device-theme: true everywhere, the user had the option to choose this on a per-device basis, as you might want this behavior on your phone but not on your desktop. Here's vaguely what I have in mind in order to be able to achieve both of these:

• Glance should provide its own default light theme
• Users can define theme "presets" in the config
• The front-end should provide a dropdown, allowing you to choose between:
  • Default (the theme defined in the config as is currently)
  • Auto light/dark (using the default dark/light theme provided by Glance)
  • User-defined preset #​1 (if any)
  • User-defined preset #​2 (if any)
  • User-defined preset #​3 (if any)
• The default dark/light themes can be overridden in the config by specifying a different preset

The config for all of that may look something along the lines of:

theme:
  background-color: 255 14 6
  primary-color: 156 50 65
  negative-color: 342 65 65

  light-theme-preset: my-custom-light-theme
  dark-theme-preset: my-custom-dark-theme

  presets: 
    my-custom-dark-theme:
      background-color: 225 14 15
      primary-color: 157 47 65
      contrast-multiplier: 1.1
    my-custom-light-theme: 
      light: true
      background-color: 0 0 95
      primary-color: 0 0 10
      negative-color: 0 90 50

Where:

• light-theme-preset and dark-theme-preset are optional and if not provided will fallback to the defaults from Glance
• Preset names are user-defined, can be anything, but must be unique
• You can define as many presets as you want

Implementation-wise, selecting a theme would just set a cookie with either:

• No value or delete the cookie, which would use the default theme
• Some special value for auto light/dark
• The name of the chosen preset

Some potentially nasty-looking CSS wizardry might be needed to get all of that overriding behavior working properly, along with being able to change themes on the fly without a page reload.

I've put a little bit of work into implementing this idea but am currently trying to finish things around the v0.7.0 release so haven't made further progress. I'll get back to it once that's out.

[hecht-a]

Hello,

Thanks for the feedback. I didn't have in mine that you don't want backwards-incompatible changes.
I'll apply these changes very soon 😄

[hecht-a]

This PR is now ready (according your feedback). The only thing missing is [light, dark]-theme-preset. I think it's quite useless.

Some potentially nasty-looking CSS wizardry might be needed to get all of that overriding behavior working properly, along with being able to change themes on the fly without a page reload.

I found a trick (here). I simply add a css class to each preset with the different variables for that preset. When I change the theme in the webpage I add the css class (corresponding to the selected theme) to the tag and the vars are automatically applied.

[svilenmarkov]

Thanks for making those changes! I'll get back to this PR in a couple of weeks once v0.7.0 is out.