dark-mode-favicon.js
/**
* HTML Markup to place in your <head> tag
* <link rel="icon" type="image/png" href="/favicon.png" data-dark="/favicon-dark.png" />
*/
// Attach listener to DOM Loaded
window.addEventListener( 'DOMContentLoaded', setFavicon );
// Set specific favicon if browser is in dark mode
function setFavicon() {
if ( window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches )
{
const favicon = document.querySelector('[data-dark]');
// No icon found
if ( ! favicon )
{
return;
}
// Dark version available
if ( favicon.dataset.dark )
{
favicon.href = favicon.dataset.dark;
}
}
}
Author
Jayesh Patel
Jayesh Patel is a Professional Web Developer & Designer and the Founder of InCreativeWeb.
As a highly Creative Web/Graphic/UI Designer - Front End / PHP / WordPress / Shopify Developer, with 14+ years of experience, he also provide complete solution from SEO to Digital Marketing. The passion he has for his work, his dedication, and ability to make quick, decisive decisions set him apart from the rest.
His first priority is to create a website with Complete SEO + Speed Up + WordPress Security Code of standards.