How to change the size of the dark mode toggle?

[dense-set]

Description

Upon inspection, the dark mode toggle (Quarto documentation here) that appears on the top right corner appears like so in the HTML:

<div class="quarto-navbar-tools">
  <a href="http://localhost:5555/" class="quarto-color-scheme-toggle quarto-navigation-tool px-1 alternate" onclick="window.quartoToggleColorScheme(); return false;" title="Toggle dark mode">
    <i class="bi"></i>
  </a>
</div>

However, trying to change the size of the toggle in CSS like so

.quarto-color-scheme-toggle > i {
    font-size: 100px;
}

doesn't seem to work. What can be a solution?

[mcanouil]

Could you share a small self-contained "working" (reproducible) example to work with, i.e., a complete Quarto document or a Git repository? Thanks.

You can share a Quarto document using the following syntax, i.e., using more backticks than you have in your document (usually four ````).

````qmd
---
title: "Reproducible Quarto Document"
format: html
---

This is a reproducible Quarto document using `format: html`.
It is written in Markdown and contains embedded R code.
When you run the code, it will produce a plot.

```{r}
plot(cars)
```

![A placeholder image](https://placehold.co/600x400.png)

The end.
````

[mcanouil]

Note that you don't target the right thing.
You need to use your favourite browser inspect mode to look for the right element and you'll see why setting font size has no effect.
But you'll also see that it is controlled by height and width.

---
title: "Quarto Playground"
format: html
theme:
  light: flatly
  dark: darkly
include-in-header:
  text: |
    <style type="text/css">
    .quarto-reader-toggle .bi::before, .quarto-color-scheme-toggle .bi::before {
      height: 5rem;
      width: 5rem;
      background-size: 5rem 5rem;
    }
    </style>
---