atlas/web/_js/favicon.js

28 lines
998 B
JavaScript
Raw Normal View History

2022-04-10 08:32:42 +02:00
// 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') {
2022-05-06 09:41:22 +02:00
favicon.href = '_img/favicon-dark.svg'
faviconFallback.href = '_img/favicon-dark.png'
2022-04-10 08:32:42 +02:00
} else {
2022-05-06 09:41:22 +02:00
favicon.href = '_img/favicon.svg'
faviconFallback.href = '_img/favicon.png'
2022-04-10 08:32:42 +02:00
}
}
}
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())
})