Darkish Mode Favicons | CSS-Methods

Oooo! A bonafide trick from Thomas Steiner. Chrome will quickly be supporting SVG favicons (e.g. <hyperlink rel="icon" href="https://css-tricks.com/icon.svg">). And you may embed CSS inside an SVG with a <model> factor. That CSS can use a perfers-color-sceme media question, and consequently, a favicon that helps darkish mode!

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

Safari additionally helps SVG, nevertheless it’s completely different…

<hyperlink rel="mask-icon" href="https://css-tricks.com/favicon.svg" colour="#990000">

You specify the colour, so there isn’t a alternative there for a darkish mode scenario. Slightly shocking, since Apple is so all-in on this darkish mode stuff. I don’t know in the event that they plan to deal with that or what.

Source link

Leave a Reply

Your email address will not be published. Required fields are marked *