Team-TAU / tau

TAU- Twitch API Unifier, a containerized relay/proxy to unify the WebHook- and WebSocket-based real-time Twitch APIs under a single (local) WebSocket connection.
MIT License
149 stars 38 forks source link

[FEAT] Dark Mode #123

Open techygrrrl opened 1 year ago

techygrrrl commented 1 year ago

Is your feature request related to a problem? Please describe.

Some users prefer dark mode to light mode.

Describe the solution you'd like

It would be great to have the following configuration:

We can store the preference e.g. light | dark in localStorage. On load, we can use that. If it's not present, we can choose system preference, if supported, or fallback to light mode.

Describe alternatives you've considered

I may write a user script to achieve the same thing, or I could use a Chrome extension like dark reader but I prefer to not install many extensions.

Additional context

Current light mode:

image

With dark mode modifications:

Use a colour picker to sample the colours.

Some borders were removed for simplicity in the theming, but you can change the border colours.

Add the following CSS for dark scrollbars:

html {
  color-scheme: dark;
}
image

The colours chosen above were sampled from elsewhere on TAU then had HSL value L adjusted to be darker. Feel free to change the colours.

techygrrrl commented 1 year ago

If anyone sees this and wants to use dark mode for TAU, I made a user script that hacks on some dark mode. It has screenshots below the gist. Click "Raw" to install with your user script runner (e.g. ViolentMonkey, GreaseMonkey, TamperMonkey, etc.).