Different logo in light/dark mode on websites

[EllaKaye]

Hello,

Would it be possible to make it so that we can pass two different images to use as a logo in the navbar of a Quarto website, one for light mode and one for dark mode?

Thanks for considering!

[EllaKaye]

For now, I've found a hacky way to deal with this using CSS to override the logo image in dark mode.

My light.scss has

.navbar-brand > img {
max-height: 60px;
width: 78px;
}

and my dark.scss has

.navbar-brand > img {
width: 0px;
height: 0px;
padding: 30px 39px;
background: url("logo-dark.png");
background-size: contain;
background-repeat: no-repeat;
}

This works because "logo-light.png" (as inserted in _quarto.yml) and "logo-dark.png" are identical, except for color.

[ratnanil]

I don't find this hacky at all, but very elegant 😄 . I just wrote up a quick description for my team, which post here (in the hopes it might save somebody time):

In _quarto.yml, I can define a theme switcher (i.e. "dark theme" using the following syntax :

theme:
  light: flatly
  dark: darkly

The issue was, that my logo only fitted one theme (logo-negative.png fitted the dark theme, logo-positive.png fitted the light theme). To make the logos switch with the toggle button, I proceeded as follows:

Define one of the logos as a default (e.g. logo-positive.png) and use this in _quarto.yml. Then, specify an scss file for the other theme, in my case the dark theme, and define this in _quarto.yml. See below:

book:
  sidebar: 
    position: left
    logo: logo-positive.png

theme:
  dark: [darkly, custom-dark.scss]
  light: [flatly]

Now, create a file named custom-dark.css with the following content:

/*-- scss:rules --*/

.sidebar-logo{
    content: url("logo-negative.png");
}

This overrides the content of the .sidebar-log element if switched to the dark theme. Note that /*-- scss:rules --*/ needs to be at the top of the file, a so-called region decorators (see here).

[mcanouil]

FYI:

• Navbar Logo Response to Light / Dark Mode #3428
• How do I change "include-in-header" with light/dark mode? #6110