Dynamically setting a color variable conditioned on the light/dark theme for use in custom css

[chiragraman]

Description

Hi Quarto community!

I'm building a website with Quarto and need some custom css for one of the pages. I've been keeping my color variables in a separate file that I import into the custom CSS file for the page, and would appreciate any insights on how I might correctly set the variables such that things work for both light and dark mode.

The setup

Part of my current file structure looks like this:

.
├── about
│   └── index.qmd
├── assets
│   ├── about.css
│   ├── style
│   │   └──  colors.scss
│   ├── custom-theme-dark.scss
│   ├── custom-theme-light.scss
.
.

• Following the discussion in How do I change <h1> color for just one page in my website? #5992, I am including the entire custom CSS for the about page in about > index.qmd front-matter as follows:

---
...
header-includes: >
  <link rel="stylesheet" href="../assets/about.css">
resources:
  - ../assets/about.css
---

• In assets/style/colors.scss I'm defining variables for my custom color palette with the custom cr- prefix. Following some of the discussion here, I also created CSS variables for one of the variables for use in the custom CSS file. Here's an example:

$cr-body-bg-dark: ...;
$cr-body-bg-light: ...;
$cr-body-bg: $cr-body-bg-dark;

:root {
    --cr-body-bg: #{$cr-body-bg};
}

• In assets > about.css I am referencing the custom variable like so:

@import url(style/colors.scss);

.about-entity {
  background-color: var(--cr-body-bg);
  padding: 3em 0em 3em 0em !important;
}

The Questions

The setup works for a single theme, but the value of $cr-body-bg obviously won't update when the theme is toggled from dark to light, where I would like it to change to the value of $cr-body-bg-light from $cr-body-bg-dark. Concretely, I have the following questions I'd appreciate any help with:

• Is there any way I can dynamically set the value of $cr-body-bg somewhere upstream depending on whether the current theme is light or dark, without needing to change anything in assets > about.css? If not, is there an alternative method to get the result I am going for?
• More broadly, I believe there ought to be a more elegant way to handle my custom definitions than the setup I have, maybe using something equivalent to namespaces. However, I am not that familiar with sass/css and can't find examples for this. Is there some guideline on best practices for this as an alternative to defining a bunch of variables with -light and -dark suffixes and dynamically setting some other variable's value to these?

Thanks for your help!

Other information

Quarto version: 1.4.553, on a Macbook.

[chiragraman]

Update: Following #6307 and this discussion on Stack Overflow, I tried adding the following in colors.scss:

.quarto-light {
    $cr-body-bg-1: $cr-body-bg-light !global;
}

.quarto-dark {
    $cr-body-bg-1: $cr-body-bg-dark !global;
}

This still doesn't work. I'm not sure if I'm missing something basic about css/sass or am going down the wrong rabbit hole.

[mcanouil]

You are mixing CSS and SCSS syntaxes.
:root is CSS and should not be used in SCSS.

See the documentation on HTML theming:

• https://quarto.org/docs/output-formats/html-themes.html
• https://quarto.org/docs/output-formats/html-themes-more.html

[chiragraman]

Thanks @mcanouil ! I did see both doc pages, but unfortunately don't see any clear way mentioned by which I may reuse variables across the project in both scss and CSS files. As I mentioned, the discussion in #5992 indicates injecting custom CSS (not SCSS) for changing aspects of a single page, so I'm not sure how to avoid mixing CSS and SCSS.

My colors for the theme are defined in an SCSS file, and it seems awkward to copy paste everything into a separate CSS file and maintain two copies instead of simply creating CSS variables from SCSS ones for use in custom CSS files across the project.

[mcanouil]

What I mean is that you should not mixed CSS specific syntax with SCSs specific syntax.
Here you are using CSS variables and SCSS variables, in addition to use one to define the other.
Follow the SCSS file structure and nest your rules appropriately.

You already have the two top level classes used in Quarto for dark/light.

Beyond that, you need to learn SCSS (CSS). There are a lot of good resources online to understand SCSS and how it works.

[chiragraman]

I'm afraid I'm not sure I fully understand, so if I may request you to humor me and let me please verify my understanding:

• Am I correct that individual pages cannot have their own theming, so the way to go is inject custom CSS in the header? (From the linked discussion)
• If so, I am not sure why it is a bad thing to try and have CSS and SCSS variables represent the same constants and use them across both types of files. I believe you are trying to tell me not to want to do this, but I don't see any alternative outside of having two separate sets of variables. It seems to me creating a CSS var from an SCSS one should be preferred to avoid redefining the constant values twice. Could you please clarify this part?

I did use the top-level classes to conditionally define the variables in my comment with the update. In general, it seems like the way to go, at least from the following articles, is to have a mixin for mapping the variables to different values depending on light or dark mode:

• https://dev.to/felipperegazio/css-custom-properties-vars-with-sass-scss-a-practical-architecture-strategy-1m88
• https://codyhouse.co/blog/post/how-to-combine-sass-color-functions-and-css-variables

But this wouldn't still address the issue of being able to use variables in the custom CSS for an individual page that represents the same color as a SCSS variable used across the theme definitions. If you can specifically point out the problem in my understanding I can go try and solve it, but hopefully the discussion and the links I am sharing convey that it's not a problem with me trying to look things up and expand my understanding, the articles don't seem to point to the same thing.

[mcanouil]

In the end, do what works for you, but it would be easier to maintain to set the rules, classes,
and variables in one single syntax (SCSS), then use the newly created classes in css for single page changes.

Alternatively, there is also the JavaScript approach.

Current behaviour:

• theme (SCSS) is applied to the whole project (website/blog/book/dashboard).
• css (CSS) can be applied on a per page basis (same as the include-* options).

Note that this is a bit out of Quarto scope as beside the behaviour and the classes .quarto-light / .quarto-dark, everything else is pure HTML/(S)CSS.