Combine themes into single CSS file

[willeastcott]

Currently, we have a green and grey theme. These are shipped as two .scss files. And if you want to simply import the styles, you can only use the green theme.

It would be great if we incorporated themes into the CSS and made them switchable at runtime. We can use CSS variables for this:

/* Default theme (no data-theme set) */
:root {
  --bg: #ffffff;
  --fg: #111111;
  --accent: #0066ff;
}

/* Green theme */
:root[data-theme="green"] {
  --bg: #e9f6e9;
  --fg: #0b280b;
  --accent: #24a726;
}

/* Grey theme */
:root[data-theme="grey"] {
  --bg: #e6e6e6;
  --fg: #1a1a1a;
  --accent: #7a7a7a;
}

You can then set a theme with JS:

document.documentElement.setAttribute('data-theme', 'grey');