While getting Quartz to work, I added my logo as an SVG to the site.
Quartz has a theme toggle, but since my logo is a
single color it was not legible in the light theme.
I tried changing the color to
currentColor
, but that didn't seem to
work. Upon further investigation, I found out that
there is indeed a way to get an SVG to respond to
the theme of the page:
The best method for embedding dark-mode friendly SVG in HTML
svg xmlns="http://www.w3.org/2000/svg"> <defs> <style> < svg { background-color: white; color-scheme:light dark; } @media (prefers-color-scheme:dark) { svg { background-color: black; } }style> </defs> </svg> </
By changing the embedded css to use
color
instead of
background-color
and using
currentColor
instead of
#ffffff
as the color for strokes, I was
able to modify the SVG accordingly so that it would
respond to the current theme.