How to change the color of the dark mode toggle in light mode?

[maelle]

Description

Yet again a dark mode question 😅

The dark mode toggle is a "background-image". I wonder whether there is an easy way to change its color, with a css rule or option? Thank you!

[mcanouil]

The following might be of interest¹, especially fill="#{colorToRGBA($navbar-light-color)}":

• quarto-cli/src/resources/formats/html/bootstrap/_bootstrap-rules.scss

  Lines 1643 to 1658 in 0377364

  	.navbar .quarto-color-scheme-toggle:not(.alternate) .bi::before {
  	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#{colorToRGBA($navbar-light-color)}" class="bi bi-toggle-off" viewBox="0 0 16 16"><path d="M11 4a4 4 0 0 1 0 8H8a4.992 4.992 0 0 0 2-4 4.992 4.992 0 0 0-2-4h3zm-6 8a4 4 0 1 1 0-8 4 4 0 0 1 0 8zM0 8a5 5 0 0 0 5 5h6a5 5 0 0 0 0-10H5a5 5 0 0 0-5 5z"/></svg>');
  	}
  	.navbar .quarto-color-scheme-toggle.alternate .bi::before {
  	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#{colorToRGBA($navbar-light-color)}" class="bi bi-toggle-on" viewBox="0 0 16 16"><path d="M5 3a5 5 0 0 0 0 10h6a5 5 0 0 0 0-10H5zm6 9a4 4 0 1 1 0-8 4 4 0 0 1 0 8z"/></svg>');
  	}
  	.sidebar-navigation .quarto-color-scheme-toggle:not(.alternate) .bi::before {
  	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#{colorToRGBA(theme-dim($body-color, 10%))}" class="bi bi-toggle-off" viewBox="0 0 16 16"><path d="M11 4a4 4 0 0 1 0 8H8a4.992 4.992 0 0 0 2-4 4.992 4.992 0 0 0-2-4h3zm-6 8a4 4 0 1 1 0-8 4 4 0 0 1 0 8zM0 8a5 5 0 0 0 5 5h6a5 5 0 0 0 0-10H5a5 5 0 0 0-5 5z"/></svg>');
  	}
  	.sidebar-navigation .quarto-color-scheme-toggle.alternate .bi::before {
  	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#{colorToRGBA(theme-dim($body-color, 10%))}" class="bi bi-toggle-on" viewBox="0 0 16 16"><path d="M5 3a5 5 0 0 0 0 10h6a5 5 0 0 0 0-10H5zm6 9a4 4 0 1 1 0-8 4 4 0 0 1 0 8z"/></svg>');
  	}

CC @dragonstyle might already know the trick here.

Footnotes

1. I did not try to play with this for now. The colour might actually be updated by JavaScript on click on the toggle button. ↩

[dragonstyle]

That SCSS variable should be respected - the theme CSS should control this (e.g. the dark and light theme will each provide that scss variable). If you find otherwise let us know as this should be customizable.

We could consider adding a specific color for that toggle, if useful.

[maelle]

Thanks both, and sorry for the delay!
I was expecting the color of the toggle, and of the search icon actually, to both follow $nav-link-color. Does that make any sense?

[mcanouil]

I'm not sure to follow which part should follow which variable exactly.