There were many options that I tried, I think one with the currentColor
option but the one that worked seamlessly was this little snippet, you place it right after the SVG tag and it just works.
I also use Next-Themes that fully supports dark mode, including system preference with prefers-color-scheme and also immediately syncs this between tabs.
In a gist, the prefers-color-scheme
is a CSS media feature used to detect the user's preferred color scheme or theme set in their operating system or device settings. Also, you can read more about it in MDN.
<svg width="351" height="348" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1">
<style>
svg {
fill: #232323;
stroke: #444;
}
@media (prefers-color-scheme: dark) {
svg {
fill: #999888;
stroke: #fafafa;
}
}
</style>
<g>
<title>Layer 1</title>
<g id="svg_440">
<path>.....</path>
</g>
</g>
</svg>
Backlinks, or posts that mention this article
No mentions yet