Dark Mode Favicons

alternating-dots.png
Dark Mode Favicons 1

Oooo! A bonafide trick from Thomas Steiner. Chrome will soon be supporting SVG favicons (e.g. <link rel="icon" href="/icon.svg">). And you can embed CSS within an SVG with a <style> element. That CSS can use a perfers-color-sceme media query, and as a result, a favicon that supports dark mode!

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

Safari also supports SVG, but it’s different…

<link rel="mask-icon" href="/favicon.svg" color="#990000">

You specify the color, so there is no opportunity there for a dark mode situation. A little surprising, since Apple is so all-in on this dark mode stuff. I have no idea if they plan to address that or what.


This post was originally posted here

Check out our Starter Sites built with #ToolWeLove including Toolset, Elementor Pro, and Astra Pro.

 

Share this page

Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on email

Blue Beanie Day 2019

November 30th, the official “Blue Beanie Day,” has come and gone. I’m not sure I ever grokked the exact spirit of it, but I’ve written

Read More »

Yap

This post was originally posted here Check out our Starter Sites built with #ToolWeLove including Toolset, Elementor Pro, and Astra Pro.  

Read More »

Detecting Inactive Users

Most of the time you don’t really care about whether a user is actively engaged or temporarily inactive on your application. Inactive, meaning, perhaps they

Read More »
sendinblue