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.