Shared scss between dark/light mode

[josherrickson]

Description

Hi,

I currently have a dark mode theme and a light mode theme, using something like

theme:
  light: [cosmo, theme-light.scss]
  dark: [cosmo, theme-dark.scss]

The theme-light.scss and theme-dark.scss files are identical, except at the head of the files I define colors. In the two files, I swap the color themes. E.g. theme-light.scss look like:

/*-- scss:defaults --*/
$col1: #002b36;
$col2: #073642;
$col3: #586e75;

$body-bg: $col1;
$body-color: $col2;

/*-- scss:rules --*/
a {
    color: $col3;
    text-decoration: none;
}

where-as theme-dark.scss has

/*-- scss:defaults --*/
$col3: #002b36;
$col2: #073642;
$col1: #586e75;

$body-bg: $col1;
$body-color: $col2;

/*-- scss:rules --*/
a {
    color: $col3;
    text-decoration: none;
}

All the rules and the settings are the same, but I reverse the color definitions (from col1-col3 to col3-col1). This let's me maintain a fairly consistent pair of themes, but any changes do require making the same modification in both files.

My question is whether there is a better way of doing this that does not require keeping the two files synced. I tried moving the color definitions to file "light-colors.scss" and "dark-colors.scss" and the rest of the rules into "style.scss", then using

theme:
  light: [cosmo, light-colors.scss, style.scss]
  dark: [cosmo, dark-colors.scss, style.scss]

but it did not work.

[jimjam-slam]

@josherrickson Could you add @use style.scss to the end of light-colors.scss and dark-colors.scss, and remove style.scss from the YAML? (Not sure if this will work, but I figure it's worth a try!)

[cderv]

I tried moving the color definitions to file "light-colors.scss" and "dark-colors.scss" and the rest of the rules into "style.scss"

This seems like a good solution, but you need to use correct order and correct content in each file

style.scss	light	dark
/*-- scss:defaults --*/ $body-bg: $col1; $body-color: $col2; /*-- scss:rules --*/ a { color: $col3; text-decoration: none; }	/*-- scss:defaults --*/ $col1: #002b36; $col2: #073642; $col3: #586e75;	/*-- scss:defaults --*/ $col3: #002b36; $col2: #073642; $col1: #586e75;

Then you need to load last, the scss with defines the variables needed in other scss file

format:
  html: 
    theme:
      light: [cosmo, styles.scss, light.scss]
      dark: [cosmo, styles.scss, dark.scss]

More at https://quarto.org/docs/output-formats/html-themes.html#theme-options and https://quarto.org/docs/output-formats/html-themes-more.html#bootstrap-bootswatch-layering

[josherrickson]

Ah that's great thank you - I just assumed I needed to define the files from left to right. Thanks.