Change Favicon Icon Based On OS Theme

Put the below code in your js. This code detects the theme of the user’s operating system. Using that we can change the favicon icon.

window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
const newColorScheme = e.matches ? "dark" : "light";
if (newColorScheme == "dark") { 
        $('.headerLogoS').attr('href', '/Content/Images/favicon_white.png');
}
else {
        $('.headerLogoS').attr('href', '/Content/Images/favicon_black.png');
}
});

Submit a Comment

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

Subscribe

Select Categories