# Favicons with light/dark mode colour scheme

favicon.svg

Favicons with light/dark mode colour scheme

Use a style block in the svg which applies colours based on @media (prefers-colour-scheme):

        @media (prefers-color-scheme: light) {
            rect {
                fill: #333;
            }
            path {
                fill: #fff;
            }
        }
        @media (prefers-color-scheme: dark) {
            rect {
               fill: #fff;
            }
            path {
                fill: #333;
            }
        }

Have a look at the source of favicon.svg to see the details.