How do I change "include-in-header" with light/dark mode? #6110
Replies: 2 comments 10 replies
-
|
One way is by setting the names of two figures using some defined pattern and to use JavaScript as I describe in https://mickael.canouil.fr/posts/2023-05-30-quarto-light-dark/. |
Beta Was this translation helpful? Give feedback.
-
|
I've added that to my dummy repo https://github.com/jack-davison/quarto-darkmode-temp but it doesn't seem to have done anything; the logo still doesn't toggle when quarto::quarto_version()
#> [1] '1.3.361'Created on 2023-07-06 with reprex v2.0.2 |
Beta Was this translation helpful? Give feedback.
-
|
Ok, I'll check this out later. |
Beta Was this translation helpful? Give feedback.
-
|
It does not work in embed resources because images are no longer files, they are encoded as base64 image, thus, the selector in the JavaScript is no longer valid. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks very much for looking into this for me, though could you please elaborate on what you mean by including the images as HTML? My HTML skills are a bit lacking - they do the job but I'm no expert! |
Beta Was this translation helpful? Give feedback.
-
|
Currently in your example, you include your logo using HTML. |
Beta Was this translation helpful? Give feedback.
-
|
Just as an alternative, you might consider using SVG for your logo, which could then inherit colors from the parent document via CSS |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
Description
We use quarto for a lot of our dynamic reporting, and I'm keen to create a dark mode to compliment our light theme.
Part of our template uses
include-in-headerto draw our logo and a simple band across the top of the document. The HTML looks like this:This creates a document the header of which looks like this:
On activating dark mode, I'd like to be able to change the logo to a different version (we have a completely white one) and the band to be white.
However, I can't seem to work out how best to do this!
I'd be open to an alternative that achieves the same look without using
include-in-headerif that simply cannot respond to the light-dark toggle.(Separately, do we have any control over the placement of the toggle switch, or is it forced to be in the top-right?)
Thanks very much.
Beta Was this translation helpful? Give feedback.
All reactions