Unable to Overwrite Sphinx Design Variables with Furo Variables

[rmorshea]

From what I can tell, it's not possible to overwrite CSS variables introduced by Sphinx Design with those from Furo. For example, I would like to be able to do:

:root {
  --sd-color-info: var(--color-admonition-title-background--note);
  --sd-color-warning: var(--color-admonition-title-background--warning);
  --sd-color-danger: var(--color-admonition-title-background--danger);
}

However the CSS variables from Furo get defined after those from my custom CSS is so I'm unable to use them in this way.

Note: setting the priority of my CSS files in html_css_files does not seem to change anything

[rmorshea]

Correction. I just needed to change my CSS from :root to body:

body {
  --sd-color-info: var(--color-admonition-title-background--note);
  --sd-color-warning: var(--color-admonition-title-background--warning);
  --sd-color-danger: var(--color-admonition-title-background--danger);
}