How do I use _brand.yml in styles.css for light/dark mode?

[roaldarbol]

Description

I am trying to use _brand.yml to customise a Quarto website with custom CSS to have a light and a dark theme. I have a styles.css CSS file where I would like to use the variables dynamically. From the brand.yml documentation it seems it should be available as var(--brand-{name}), so e.g. var(--brand-danger). However, when I attempt to use the variable, nothing really happens.

I have made a minimal repository where I tried to make it work here.

In styles.css I am attempting to use the variable var(--brand-danger):

.table {
  background-color: var(--brand-danger);
}

I have separate brand files for each mode, so brand/light.yml and brand/dark.yml with:

color:
  palette:
    white: "#FFFFFF"
    grey: "#606060"
  danger: white

and

color:
  palette:
    white: "#FFFFFF"
    grey: "#606060"
  danger: grey

---

And

format:
  html:
    theme:
      light: [cosmo, brand/light.yml]
      dark: [cosmo, brand/dark.yml]
    css: styles.css
    toc: true

or including them under brand::

brand:
  light: brand/light.yml
  dark: brand/dark.yml

---

Is this even possible, or am I missing something?

It's worth mentioning that it seems that the files are being picked up, as I can set background, and the site background color will change in response to toggling the theme - so the question is really how I can access and use the _brand.yml values in styles.css.

---

I am using the Quarto pre-release version:

quarto --version
1.8.24

And am on MacOS Sequoia 15.6.

[cscheid]

Thanks for the message! Two things. First, you're experiencing one of the weak points in Quarto's tooling: the relative lack of visibility into our CSS/SCSS. We're planning on adding some tooling, but it will be a while until it's ready for consumption.

Second, the brand spec says:

For example, in HTML/Bootstrap settings, this would create $brand-{name} (Sass) and --brand-{name} (CSS) variables for each color in the palette.

Emphasis on "for each color in the palette". danger isn't in the palette; white and grey are. Quarto exposes --brand-white and --brand-grey in CSS vars, but not --brand-danger.

[roaldarbol]

Hi @cscheid!
Thanks for the reply! Regarding your first point, no worries, but happy that it’s on your radar. :-)

On the second point, I missed that! Are there any reasons that only the palette colours are exposed and not the other colour variables?

Does this mean that there currently isn’t a way to have light/dark (dynamic) variables in styles.css - or in other words: that there isn’t a way to customise light/dark theme beyond the standard themes?

[cscheid]

Give your palette semantic names, and then use them. ("main" instead of "white", and then make "main" be "white" or "black" depending on brand.)

[roaldarbol]

Thanks! Would you need to use separate brand files for that? Just trying to find the most minimalist way to achieve this. :-)

[roaldarbol]

Ah, I’m a single file maybe this way?

light:
  color:
    palette:
      main: “#FFFFFF”
dark:
  color:
    palette:
      main: “#606060”

or is this also supported?

color:
  palette:
    main: 
      light: “#FFFFFF”
      dark: “#606060”

[mcanouil]

The latter is supported, see a real life example: https://github.com/mcanouil/quarto-mcanouil/blob/main/_extensions/mcanouil/brand.yml (1.8 required)

[roaldarbol]

The latter is supported, see a real life example: mcanouil/quarto-mcanouil@main/_extensions/mcanouil/brand.yml (1.8 required)

Unfortunately not - while it works for background etc. it is invalid when used inside palette. So this:

color:
  palette:
    page-background: 
      dark: "#0F172A"
      light: "#F1F5F9"
      ...

gives the following validation error:

ERROR: Brand validation failed for /Users/roaldarbol/Filen/Projects/R/eu-fellowships/brand/dark.yml.

In file brand/dark.yml
(line 4, column 7 through line 5, column 23) Field "palette" has value

dark: "#0F172A"
  light: "#F1F5F9"

The value must instead be a string.
3:     page-background: 
4:       dark: "#0F172A"
        ~~~~~~~~~~~~~~~~
5:       light: "#F1F5F9"
  ~~~~~~~~~~~~~~~~~~~~~~~
6:     card-background: "#1E293B"
✖ The value

dark: "#0F172A"
  light: "#F1F5F9"

is of type object.
ℹ The error happened in location color:palette.

In fact both approaches I mentioned above seem to fail validation, so the two-file approach is the only one I've manage to get to work successfully.