Combine themes into single CSS file

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');

Start by locating the two shipped .scss theme files and the import path that currently exposes only the green theme. Review how their color values are used, then determine how one combined CSS output can expose the default, green, and grey states through the proposed data-theme attribute. Done means both themes remain available and can be switched at runtime.