Dark and Light Theme Favicon with Media Queries and SVGs
Media queries aren’t just for adjusting elements based on width. With the prefers-color-scheme query we can set a dark or light theme to our application based on a user’s app theme preference. We will look at an example of how to do this with a favicon using SVGs.
Why?
Well, why are we doing this other than its cool? This media query is supported by all major browsers not including IE 💀. We can automatically set up a light theme or a dark theme for our users giving a better experience. When dealing with the favicon specially if a user has a dark / light theme to the apps our favicon could have some poor contrast, but we can fix that relatively painlessly.
How?
At the end of the day all we need to do is make sure we have a proper selector and hierarchy like any other style within our CSS. The prefers-color-scheme media query assumes if your app isn’t compatible or doesn’t have a setting it is a light theme. So, lets go LTF (light theme first) and override with our dark theme settings.
@media (prefers-color-scheme: dark) {
/* our style overrides */
}Now, lets look at how we might actually use this with a favicon to put our initials in a circle for instance like above.
- Create favicon.svg
- Add it to your index.html
<link rel="icon" type="image/svg+xml" href="favicon.svg">3. Lets create our SVG. Make sure to include the name space (xmlns) or you will have issues with it working as a favicon. Since favicons are squares the height and width are going to be equal.
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"></svg>
4. Add our circle. Make sure to have a radius of 50.
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"> <circle cx="62.5" cy="62.5" r="50" /></svg>
5. Add our text with our initials. Here I had to play around a bit, but the general ideal is we want the text in the middle and centered. Hence the middle text anchor and x / y assignments of 50%.
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><circle cx="62.5" cy="62.5" r="50" />
<text x="50%" y="50%" text-anchor="middle" font-size="60px" font-family="Arial" dy=".3em">DI</text></svg>
6. Add our light theme first styles.
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><style>
circle {
fill: #1e1e1e;
} text {
font-weight: bold;
fill: white;
} </style> <circle cx="62.5" cy="62.5" r="50" />
<text x="50%" y="50%" text-anchor="middle" font-size="60px" font-family="Arial" dy=".3em">DI</text></svg>
7. Last but not least lets add our dark theme overrides with the prefers-color-scheme media query.
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg">
<style>
circle {
fill: #1e1e1e;
} text {
font-weight: bold;
fill: white;
} @media (prefers-color-scheme: dark) {
circle {
fill: white;
} text {
fill: black;
}
}
</style><circle cx="62.5" cy="62.5" r="50" />
<text x="50%" y="50%" text-anchor="middle" font-size="60px" font-family="Arial" dy=".3em">DI</text>
</svg>
How to Test?
If you want to test out that it works. You can go to my website and toggle your app color theme preference settings or of course test your own version. You will need to refresh the page for it to take effect.
To do this on Windows:
- Search for “Settings”
- In “Settings” search for “Color Settings”
- Toggle “Choose Your Color”
That’s all folks! Don’t forget to applaud 👏 the post if you liked it! Drop a follow so I keep doing this. Special thanks to CSS-Tricks where I got unstuck by an example there when building this.
Leave me a comment if you have any questions and as always here are some of my links to stay up to date on my other projects.
