Separate html theme on single page within a website in Quarto

R Markdown
#1

Hi everyone, glad to joining this community!

I have made a website with Quarto with the following YAML for the website-wide html theme in _quarto.yml:

format:
  html:
    theme:
      dark: superhero # litera, lumen, superhero, united
      light: lumen
    css: styles.css

The styles.css is empty for now.

For one of the pages, I don't want to allow the dark theme, so I put the following in that page's YAML:

format:
  html:
    theme: lumen

But it doesn't seem to bite. That page still has the dark/light mode switch.

Any clues? Thanks!Preformatted text

#2

@matvil you could always add a small JS snippet to hide the switch in the page where you don't want it. But that is a workaround for sure. I wonder if we allow to deactivate / activate dark mode for a single part of the website once activated.

@cteague Can we deactivate the dark theme switch on a website for a single page only ?
Thanks

1 Like
#3

Thanks for the quick reply. I would be happy to keep the switch, but make the light theme the default for that single page. But It seems the website remembers my last theme and uses that as default.

#4

There is currently no way to alter the theme for a single page of a website as each page inherits the global website CSS. There is also no way to simple hide the dark toggle (or assert that the page should only be either the dark or light theme variant). I think it will be technically pretty complex to allow individual pages to have their own themes (though something I would like to eventually support). It would be pretty easy to add support for declaring the light vs. dark theme and hiding the toggle. Happy if you'd like to open a feature request to track (GitHub - quarto-dev/quarto-cli: Open-source scientific and technical publishing system built on Pandoc.).

1 Like