updated favicon and logo according to current theme

novcmbro · Jun 6, 2024 · 12698ef · 12698ef
1 parent 7661ce9
commit 12698ef
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 5 deletions.
diff --git a/index.html b/index.html
@@ -10,10 +10,8 @@
   <meta name="author" content="Novcmbro">
   <meta name="robots" content="index, follow">
   <!-- Favicon -->
-  <link rel="icon" href="public/favicon-light.svg" type="image/svg" media="(prefers-color-scheme: dark)">
-  <link rel="icon" href="public/favicon-dark.svg" type="image/svg" media="(prefers-color-scheme: light)">
-  <link rel="shortcut icon" href="public/favicon-light.svg" type="image/svg" media="(prefers-color-scheme: dark)">
-  <link rel="shortcut icon" href="public/favicon-dark.svg" type="image/svg" media="(prefers-color-scheme: light)">
+  <link rel="icon" name="favicon" href="public/favicon-light.svg" type="image/svg">
+  <link rel="shortcut icon" name="favicon" href="public/favicon-light.svg" type="image/svg">
   <!-- Open Graph / Facebook -->
   <meta property="og:type" content="website">
   <meta property="og:title" name="title" content="Decoder">
@@ -44,7 +42,7 @@
 </head>
 <body>
   <header>
-    <img src="src/img/decoder-logo.png" alt="Decoder logo" class="logo" role="img">
+    <img id="logo" src="src/img/decoder-logo-light.png" alt="Decoder logo" class="logo" role="img">
   </header>
   <main class="container">
     <section class="input-section" aria-labelledby="input-label">

diff --git a/src/img/decoder-logo-dark.png b/src/img/decoder-logo-dark.png
diff --git a/src/img/decoder-logo-light.png b/src/img/decoder-logo-light.png
diff --git a/src/img/decoder-logo.png b/src/img/decoder-logo.png
diff --git a/src/js/theme.js b/src/js/theme.js
@@ -13,8 +13,13 @@ const theme = {
 theme.preferred = () => prefersLightTheme.matches ? "light" : "dark"
 
 theme.update = () => {
+  const updateURL = (element) => theme.name() === "light" ? element.replace("dark", "light") : element.replace("light", "dark")
+
+  document.querySelectorAll("[name='favicon']").forEach(favicon => favicon.href = updateURL(favicon.href))
   rootElement.classList.toggle("light", theme.name() === "light")
   rootElement.classList.toggle("dark", theme.name() === "dark")
+  const logo = document.querySelector("#logo")
+  logo.src = updateURL(logo.src)
 }
 
 theme.init = () => {