Overriding --css-variables in Anki

[badlydrawnrob]

Here's how custom properties in the cascade are scoped globally and locally.

1. Override the --css-variables you want after importing main.css
2. Make sure the specificity is correct
3. Compile your css file

So long as the specificity is correct (i.e: you're updating CSS variables on the correct global or local class, such as :root or .selector) simply change the CSS Variables at the end of the main.css document! I don't think that you can change --css-variables to override styles that have used that variable (i.e: var(--css-variable)) — although you may be able to if there's greater specificity. The code below won't work as you might hope:

It's fairly easy to add a class to the main HTML <tag> element to switch between themes. I've tried this kind of setup Anki and it works:

:root {
   /* The highlighting colours */
  --color-code-light-background: #ffffcc;
  --color-code-light-base: #586e75;
  --color-code-light-comment: #93a1a1;
  --color-code-light-error: #93a1a1;
  --color-code-light-highlight: #dc322f;
  --color-code-light-keyword: #859900;
  --color-code-light-lowlight: #268bd2;
  --color-code-light-number: #2aa198;
  --color-code-light-operator: #859900;
  --color-code-light-string: #2aa198;
  --color-code-light-variable: #268bd2;
}

/* They're used here, for example */
code,
kbd,
pre,
samp {
  ...
  background: var(--color-code-light-background);
}

You can override the styles at the bottom of the main.css document like this:

:root {
  --color-code-light-background: blue;  /* Make me blue! */
}

You can even use a variable before it's declared:

p {
  color: var(--new-css-variable);
}

#inner {
  --new-css-variable: green;
}

Other examples:

Before (default --css-variables)

After (changing --css-variables)

Originally posted by @badlydrawnrob in #42 (comment)

[badlydrawnrob]

Closing this and adding link in other issue.