Add toggle for Dark Mode

[lalitpatel]

Summary

Many of the streamers use a Dark background for their overlay / interfaces. Having a dark theme would make the UI seamlessly integrate with their overlay.

Fixes: #41

Implementation

• A switch to allow to the user to change the theme.
• The setting is preserved across visits (stored in local storage)
• It respects the base operating systems dark mode settings and auto switch to a dark mode for the user if the
• The user's preference over-rides the base OS's setting.

Notes

• I have not refactored the Navbar since I was able to fit everything within the available width (1024px).

Screenshots

[HSZemi]

Looks good to me!

I do have a different proposal for the button's behaviour and would like your opinion on it:

• The button always offers to switch the colour theme, e. g. if the current theme is light due to the OS preference or due to an explicit user setting, the button image and the tooltip offer to switch to the dark theme, and vice versa
• There is no explicit "auto" state for the button: Once you set a theme manually, it stays set until the local storage is wiped or until it is changed manually again

The benefits I see with this:

• It is clearer what the button does when it is clicked, since it displays the target state instead of the current state
• Only two states visible to the user instead of three, of which two look the same
• The initial automatic adherence to the OS preference still works

[lalitpatel]

Thanks!

Your suggestion for displaying the icon and tooltip to offer to switch to the other theme is the ideal if there are just two states. I implemented the way it is now because there were three states and I didn't want to use a combination of buttons like we have for Language switcher since the choice of states are more or less expected / obvious.

My rationale for keeping a third 'Auto' state:

• Both Mac OS X and Windows 10 have an option to automatically change the color scheme of the OS depending on the sunset / sunrise time. The motive behind implementing auto mode was to respect this setting and change the theme of the web app as per the theme of the OS at the given point in time.
• I usually keep this setting for most of apps I used on mobile – at night most of the apps go dark mode and in the morning they are light. My assumption was that since this is the default behaviour across mobile and desktop OS-es unless user takes some action, most users would also expect/want a similar behaviour.

[HSZemi]

Ok! I did not think about OSes changing the setting based on the time of day, but only about users changing the setting manually. In that case it makes sense to have the AUTO option.

Maybe we can still improve the tooltip a bit so it conveys what will happen when you click. We could add a text like "Click to toggle Dark mode setting" :thinking:

[lalitpatel]

Maybe we can still improve the tooltip a bit so it conveys what will happen when you click. We could add a text like "Click to toggle Dark mode setting" 🤔

How about: "Current scheme: AUTO. Click to change" or "Current scheme: AUTO. Click to toggle"

[HSZemi]

How about: "Current scheme: AUTO. Click to change" or "Current scheme: AUTO. Click to toggle"

I would go with "Current colour scheme: AUTO. Click to change"

[lalitpatel]

I have made a minor change to the text by adding the call to action in brackets. Hope that is okay. Current colour scheme: {{scheme}} (click to change)

I have also extracted the scheme names for translation.

[lalitpatel]

I have also added a css transition effect for an ease in effect while switching color schemes. Looks nice to me. Pls check and let me know how you like it.

[HSZemi]

I like I click merge :yellow_heart: