Chroma syntax highlighting and dark / light themes

Using Themes
1

I’m trying to use the bearblog theme with the lovelace Chroma style and, because the theme supports dark mode on devices that request it, the theme seems to be interfering with the Chroma style when in dark mode.

Chroma styles expect to have a specific background color, and works by setting explicit colors on elements (spans), but themes also set colors and background colors and seem to be taking precedence in code blocks.

I don’t know enough about CSS to be able to tell how to get the theme to step back and let Chroma set all the colors, without interference from the theme, or if there’s a way to make Chroma cope with light / dark choices correctly. I’ve not seen any evidence that that’s possible.

Has anyone else solved this problem in a theme that supports light and dark modes?

2

I use an SCSS partial called “_chroma_fix-all.scss” that, as the name implies, deals with such things:

Re dark/light specifically, I have this…


article code {
  font-size: 0.9em;
  background-color: $blueLightCode;
  @media (prefers-color-scheme: dark) {
    background-color: #454545;
  }
}

…and the index.scss file @imports it after the SCSS for whichever Chroma theme I happen to be using at the time. (That $blueLightCode variable comes from another SCSS partial, _variables.scss.)

3

Thanks, that looks promising. The theme I’m using also messes with the font color, so fixing only the background color doesn’t quite do it.

1 Like