quarto-dev / quarto-dev/quarto-cli
brand color shortcodes in .scss don't work with theme: dark
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 6k
- Forks
- 458
- Avg merge
- 1d 9h
- Merged PRs (30d)
- 41
Description
I have:
- searched the issue tracker for similar issues
- installed the latest version of Quarto CLI
- formatted my issue following the Bug Reports guide
Bug description
The colours from palette within _brand.yml can't be used in custom.scss with $brand-color-name when a dark theme is included.
Steps to reproduce
Create a Quarto project with these files and then run quarto preview
````_quarto.yml
project:
type: website
website:
title: "Test"
navbar:
left:
- index.qmd
format:
html:
theme:
light: [brand, cosmo, custom.scss]
dark: [brand, flatly, custom.scss]
````
````_brand.yml
color:
palette:
dark-color: "purple"
````
```` custom.scss
/*-- scss:defaults --*/
/*-- scss:rules --*/
body {
color: $brand-dark-color;
}
````
````index.qmd
---
title: "Test"
---
This should be purple
````
Actual behavior
You'll get this error
Error: Undefined variable.
╷
12847 │ color: $brand-dark-color;
Expected behavior
The brand colours work without the dark mode.
format:
html:
theme: [brand, cosmo, custom.scss]
It will also work if custom.scss is not given to dark:
format:
html:
theme:
light: [brand, cosmo, custom.scss]
dark: [brand, flatly]
Your environment
- OS: MAC OS 15.4 (24E248)
- RStudio: 2025.05.1 Build 513
Quarto check output
Quarto 1.7.33
[✓] Checking environment information...
Quarto cache location: /Users/charliejhadley/Library/Caches/quarto
[✓] Checking versions of quarto binary dependencies...
Pandoc version 3.6.3: OK
Dart Sass version 1.85.1: OK
Deno version 1.46.3: OK
Typst version 0.13.0: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
Version: 1.7.33
Path: /Applications/quarto/bin
[✓] Checking tools....................OK
TinyTeX: (external install)
Chromium: (not installed)
[✓] Checking LaTeX....................OK
Using: TinyTex
Path: /Users/charliejhadley/Library/TinyTeX/bin/universal-darwin
Version: 2021
[✓] Checking Chrome Headless....................OK
Using: Chrome found on system
Path: /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
Source: MacOS known location
[✓] Checking basic markdown render....OK
[✓] Checking Python 3 installation....OK
Version: 3.10.14 (Conda)
Path: /Users/charliejhadley/Library/r-miniconda-arm64/bin/python
Jupyter: 5.7.2
Kernels: python3
[✓] Checking Jupyter engine render....OK
[✓] Checking R installation...........OK
Version: 4.5.1
Path: /Library/Frameworks/R.framework/Resources
LibPaths:
- /Library/Frameworks/R.framework/Versions/4.5-arm64/Resources/library
knitr: 1.50
rmarkdown: 2.29
[✓] Checking Knitr engine render......OK
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the issue with _quarto.yml, _brand.yml, custom.scss, and index.qmd, then run quarto preview using the reported light and dark theme configuration. Trace how the brand palette is made available to custom.scss in each theme; done means $brand-dark-color resolves in both themes without the undefined-variable error.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- scss
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 52/100