no js favicon theme aware (#49)

hellocoop · Sep 12, 2024 · 996b04f · 996b04f
1 parent 4275340
commit 996b04f
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 16 deletions.
diff --git a/src/index.html b/src/index.html
@@ -29,7 +29,17 @@
     <link href="https://cdn.hello.coop/css/tailwind.css" rel="stylesheet" />
     <link rel="stylesheet" href="https://cdn.hello.coop/css/hello-button.css">
 
-    <link id="favicon" rel="icon" type="image/png" href="https://cdn.hello.coop/images/favicon-dark.png" />
+    <!-- Favicons -->
+    <link
+        href="https://cdn.hello.coop/images/favicon-light.png"
+        rel="icon"
+        media="(prefers-color-scheme: light)"
+    />
+    <link
+        href="https://cdn.hello.coop/images/favicon-dark.png"
+        rel="icon"
+        media="(prefers-color-scheme: dark)"
+    />
 
     <!-- AOS -->
     <link href="https://cdn.hello.coop/css/aos.css" rel="stylesheet" />
@@ -985,18 +995,6 @@ <h3 class="group-hover:underline my-1">
         anchorPlacement: "top-bottom", // defines which position of the element regarding to window should trigger the animation
     });
 
-    const ref = document.querySelector("link[rel='icon']");
-    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
-        ref.href = 'https://cdn.hello.coop/images/favicon-light.png';
-    }
-    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (event) => {
-        if (event.matches) {
-            ref.href = 'https://cdn.hello.coop/images/favicon-dark.png';
-        } else {
-            ref.href = 'https://cdn.hello.coop/images/favicon-light.png';
-        }
-    });
-
     const image_base_path = 'https://cdn.hello.coop/images/';
 
     const logos = [

diff --git a/src/legal/.vitepress/config.js b/src/legal/.vitepress/config.js
@@ -9,7 +9,8 @@ export default {
         ['meta', { name: 'theme-color', content: '#303030' }],
         ['script', {'data-domain': 'hello.coop' , 'src': '/js/script.hash.js'}],
         ['script', { src: 'https://cdn.hello.coop/js/relative-wc-footer.js'}],
-        ['link', { rel: 'icon', type: 'image/x-icon', href: 'https://cdn.hello.coop/images/favicon-dark.png' }]
+        ['link', { rel: 'icon', media: '(prefers-color-scheme: light)', href: 'https://cdn.hello.coop/images/favicon-light.png' }],
+        ['link', { rel: 'icon', media: '(prefers-color-scheme: dark)', href: 'https://cdn.hello.coop/images/favicon-dark.png' }]
     ],
     themeConfig: {
         siteTitle: false,

diff --git a/src/pages/.vitepress/config.js b/src/pages/.vitepress/config.js
@@ -9,7 +9,8 @@ export default {
     head: [
         ['meta', { name: 'theme-color', content: '#303030' }],
         ['script', { src: 'https://cdn.hello.coop/js/relative-wc-footer.js'}],
-        ['link', { rel: 'icon', type: 'image/x-icon', href: 'https://cdn.hello.coop/images/favicon-dark.png' }]
+        ['link', { rel: 'icon', media: '(prefers-color-scheme: light)', href: 'https://cdn.hello.coop/images/favicon-light.png' }],
+        ['link', { rel: 'icon', media: '(prefers-color-scheme: dark)', href: 'https://cdn.hello.coop/images/favicon-dark.png' }]
     ],
     themeConfig: {
         sidebar: [

diff --git a/src/protocol/index.html b/src/protocol/index.html
@@ -3,7 +3,20 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link id="favicon" rel="icon" type="image/png" href="https://cdn.hello.coop/images/favicon-dark.png" />
+    <meta name="theme-color" content="#303030">
+
+    <!-- Favicons -->
+    <link
+      href="https://cdn.hello.coop/images/favicon-light.png"
+      rel="icon"
+      media="(prefers-color-scheme: light)"
+    />
+    <link
+      href="https://cdn.hello.coop/images/favicon-dark.png"
+      rel="icon"
+      media="(prefers-color-scheme: dark)"
+    />
+
     <title>Hellō Protocol</title>
     <meta name="description" content="Co-operatively Building the Internet Identity Layer" />
     <meta name="theme-color" content="#303030">