Dark mode for SVG favicon

Photo by Szabo Viktor on Unsplash

You can embed CSS within an SVG with a <style> element. This means that you can style your icon with inline prefers-color-scheme.

<!-- icon.svg -->
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<style>
circle {
fill: white;
stroke: black;
stroke-width: 2px;
}
@media (prefers-color-scheme: dark) {
circle {
fill: black;
stroke: white;
}
}
</style>
<circle cx="50" cy="50" r="47"/>
</svg>

For Safari, it’s a bit different. You need to add a mask-icon. It’s also an SVG, but it has to be made of a single color and placed on a transparent background. You specify the color, so there is no opportunity there for a dark mode situation.

<link rel=”mask-icon” href=”mask-icon.svg” color=”#000000">

--

--

--

I drink a lot of tea and build beautiful websites. If you are looking to work together or just start a conversation 👉 https://www.ronaldsvilcins.com/

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Getting Started with Server-Sent Events and understanding when to use Polling, WebSockets, and SSE

Build a Project Management Tool with Vue.js, Node.js and Apollo — Part 4

React Hooks and D3

JavaScript/Node.js Kampı 3.gün

Toggle Theme in ReactJs

Building a Single Page Application Website With ReactJS Part 1: React Instalation

I have just discovered Vue.js and I’ll never get back to jQuery!

Top 3 Angular 6 Online Courses

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ronalds Vilcins

Ronalds Vilcins

I drink a lot of tea and build beautiful websites. If you are looking to work together or just start a conversation 👉 https://www.ronaldsvilcins.com/

More from Medium

Creating AutoComplete/ AutoSuggestor in vanilla Javascript

MDN semantics and structures w/HTML — chapter 3

Architecture of Chrome Extension

A good case for Eval in JavaScript