tau icon indicating copy to clipboard operation
tau copied to clipboard

[FEAT] Dark Mode

Open techygrrrl opened this issue 2 years ago • 1 comments

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:

  • Detect system appearance mode preference. Default to light mode if system preference not supported.
  • Allow a theme picker that allows the user to change between the following options:
    • System
    • Light
    • Dark

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 avatar Feb 05 '23 03:02 techygrrrl

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.).

techygrrrl avatar Mar 13 '23 04:03 techygrrrl