Darkly toggle changes font size...?!

[sasja-san]

Description

I'm writing a small tutorial and publish it using Github Pages. To make it look good i stole some that would make it look nice with a dark theme as default. Here's my YAML:

project:
  type: website
  output-dir: docs

website:
  title: "Remote Debugging of Rust Programs in VS Code"
  navbar:
    left:
      #- href: site/index.qmd
      #  text: Start
      - site/index.qmd
      - site/manual-rdbg.qmd
      - site/vscode-setup.qmd

format:
  html:
    theme:
      dark: [site/darkly.scss]
    toc: true

Earlier the line at the end was dark: [flatly, site/darkly.scss] but flatly didn't seem to make any difference so I removed it.

The repository: https://github.com/sasja-san/vscode-remote-debug-example
The page: https://sasja-san.github.io/vscode-remote-debug-example

If you open the page and click the light/dark toggle you can see that a lot more than just the colors change.

For future reference, this is commit 72e25691e01c6fdfae315b2f0d67e53f771494ab and I'm using quarto git version:

$ git show -s --format="%as %H"
2024-08-12 22af0f2f78c2e1b2e966d2bbf9bb71863aa1fc8f

I'm placing this as a discussion and not an issue because I know almost nothing about web stuff, so there's probably some silly detail I should know about but just don't.

[cscheid]

The issue here, I think, is that our dark-light mode toggle is fundamentally just switching between two themes. If the themes themselves have different font sizes, there's not much we can do, and you'll need to find themes that have compatible styles.

[sasja-san]

Do you know of any good pairings which match up? After a bit of toying I only found darkly/flatly. But I didn't investigate all the possibilites.