Dark mode support

[alexander-beedie]

Tweaked tuna.css to enable automatic dark mode support.

Colour/theme has not changed at all in regular/light mode, but if dark mode is enabled, tuna will now come along for the ride automatically. If you'd like to modify further, or play with some alternatives, the theme colours have all been extracted into vars, so it should be easy to experiment 👍

:root {
  /* light theme */
  --color-background: #f5f5f5;
  --color-sidebar: #f8f9fa;
  --color-footer: #c6c7c8;
  --color-footer-text: #000000;
  --color-stroke: #ffffff;

  /* rects: material, light blue 50 */
  --color-rect0: #01579b;
  --color-rect0-hover: #0277bd;
  --color-rect1: #0288d1;
  --color-rect1-hover: #0277bd;
  --color-rect2: #0288d1;
  --color-rect2-hover: #0277bd;
  --color-rect3: #bdbdbd;
  --color-rect3-hover: #757575;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* dark theme */
    --color-background: #1a1a1a;
    --color-sidebar: #212121;
    --color-footer: #212121;
    --color-footer-text: #ffffff;
    --color-stroke: #212121;

    /* rects: darker counterparts */
    --color-rect0: #1e3d4c;
    --color-rect0-hover: #285166;
    --color-rect1: #32657f;
    --color-rect1-hover: #285166;
    --color-rect2: #32657f;
    --color-rect2-hover: #285166;
    --color-rect3: #80919c;
    --color-rect3-hover: #6d7f8c;
  }
}

Example

Light mode: (current)

Dark mode: (new)

[hugovk]

Thanks for this!

I noticed for shorter charts, the bottom of the screen is white:

Adding this to html fixes it:

Suggested change

	background-color: var(--color-background);
	}