dark mode broken for my website

[daniellga]

For some time now dark mode looks broken for my website. Could someone check what is happening?

Link for the githubpages with the generated website:
https://daniellga.github.io/harmonium/

Link for the repo
https://github.com/daniellga/harmonium

The quarto generated website is in the docs folder while the inputs to generate this website is in _docs folder.

quarto_yml

project:
  type: website
  output-dir: ../../docs

website:
  title: "Harmonium"
  navbar:
    tools:
      - icon: github
        href: https://github.com/daniellga/harmonium
        text: GitHub
  sidebar:
    style: "docked"
    contents:
      - section: "Classes"
        contents: contents/* 

format:
  html:
    theme:
      dark: litera
      light: litera
    css: styles.css
    toc: true
    grid:
      body-width: 1000px

Image of the dark mode generated:

Thanks in advance!

[gadenbuie]

You currently have the following in your _quarto.yml:

format:
  html:
    theme:
      dark: litera
      light: litera

which means that you're using Litera, a light Bootswatch theme, in both dark and light mode. So when you switch between light and dark mode on the website, the overall theme doesn't change.

What does change is the highlight style, because by default Quarto uses syntax highlighting styles that are designed to work with light and dark themes. The default dark syntax highlighting doesn't look great with a light theme like litera.

[daniellga]

Thanks for your quick reply! Doesn't litera provide both a light and a dark mode?

[gadenbuie]

Sort of. Litera in dark mode in your screenshot is based a new feature in the latest releases of Bootstrap that does client-side color modes, making dark mode variants of light-mode themes easy.

Quarto doesn't yet support this feature, but it likely will in the future.

[daniellga]

Thanks! I will change the dark theme then.

[connortwiegand]

I was able to throw the following hack into a custom scss theme file:

.quarto-dark {
  @extend [data-bs-theme="dark"];
}

and it switched some colors that were being controlled by the data-bs-theme attribute. There might be unintended consequences to this...but, for now, this might work for others looking for a workaround.