Making dark mode compatible SVG images
source link: https://rigtorp.se/notes/dark-mode-svg/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Making dark mode compatible SVG images
2022-11-06
I recently added dark mode support to my website. While doing so I found a neat trick to make SVG images that changes colors depending on if dark mode is active or not.
Inside a SVG image you can use CSS style sheets as usual. I made a favicon in Inkscape, optimized it’s size using SVGOMG and then added the following CSS to change the color when dark mode is active:
<style>
@media (prefers-color-scheme:dark) {
path {
fill: #e3e3e3
}
}
</style>
Ends up looking like this:
You can try toggle between light and dark mode in your browsers developer tools and see how the color changes.
For some figures I’ve made in LibreOffice Draw I instead added CSS to replace specific colors with dark mode friendly colors when dark mode is active:
<style type="text/css">
@media (prefers-color-scheme: dark)
{
:root { --background-color: #1f1f1f; --text-color: #e3e3e3;}
[stroke="rgb(0,0,0)"] { stroke: var(--text-color); }
[stroke="rgb(255,255,255)"] { stroke: var(--dark-color); }
[fill="rgb(0,0,0)"] { fill: var(--text-color); }
[fill="rgb(221,221,221)"] { fill: var(--background-color); }
[fill="rgb(255,255,255)"] { fill: var(--background-color); }
}
</style>
Recommend
-
6
Creating dynamic dark mode images at runtime Dec 14, 2020 · 5 minute read If you’re creating your images from the asset catalog you support dark mode by adding light and dark variations of the image. How about w...
-
17
In a project I work on, we had a couple of buttons that consisted of just icons (with visually hidden help text). The QA engineer I worked with, found some of those did not show up in dark mode, which rendered the buttons...
-
10
Handling SVG images with Refile and Imgix My colleague Tomek today was responsible for changing a bit how we handle file uploads in a project so that it can support SVG logos. For handling uploads this Rails...
-
11
How to Create Dark Mode Compatible Emails That Still Look Great 2018 brought the dawn of Dark Mode in the world of email marketing. Apple brought Dark Mode to its desktop email client in that year. In 2019, iOS Mail extended its s...
-
9
TX Text Control 30.0 PreviewCurrently, we are working on the anniversary release of TX Text Control: Version 30.0. This new version is planned for a release in Q4 of 2021. In a series of blog posts, we will preview some of th...
-
6
Matthew Miner SVG Images in Unity November 18, 2021 Hey, you there, did you know that you can import SVG images...
-
6
blog.cloudflare.com Checking if the site connection is secure
-
4
Convert images to SVG vectors, PNG-to-SVGHey everyone! Some tech details for geeks among us :) Vectormaker uses the Potrace algorithm to convert images into vector graphics. This algorithm is able to trace the edges of an image and c...
-
8
SpatialSVG Images from PostgresPostGIS excels at sto...
-
7
Making SVG Loading Spinners: An Interactive GuideSVG spinners: you've seen them all over, giving us as a visual cue when elements are loading or data is being fetched. They are practical, scalable, and can enhance...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK