atlas/web/_js/favicon.js
2022-04-09 23:32:42 -07:00

27 lines
1,002 B
JavaScript

// Based on GitHub's favicon switcher. Temporary(?) fix for Chromium based browsers that won't dynamically update embedded CSS media query inside of SVG
function updateFavicon(colorScheme) {
const favicon = document.head.querySelector('.js-site-favicon[type="image/svg+xml"]')
const faviconFallback = document.head.querySelector('.js-site-favicon[type="image/png"]')
if (favicon && faviconFallback) {
if (colorScheme || colorScheme == 'dark') {
favicon.href = '_img/favicon-dark.svg';
faviconFallback.href = '_img/favicon-dark.png';
} else {
favicon.href = '_img/favicon.svg';
faviconFallback.href = '_img/favicon.png';
}
}
}
function prefersDarkColorScheme() {
return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
}
if (prefersDarkColorScheme()) {
// update favicon to dark on page load
updateFavicon('dark')
}
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
updateFavicon(prefersDarkColorScheme())
})