dynamic color

InesZenkri · Feb 4, 2024 · 56d7980 · 56d7980
1 parent 9149e5b
commit 56d7980
Showing 1 changed file with 11 additions and 10 deletions.
diff --git a/index.html b/index.html
@@ -1,12 +1,13 @@
 <!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/HorizonHub/cloudy.png"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#93c5fd"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/HorizonHub/cloudy.png"/><link rel="manifest" href="/HorizonHub/manifest.json"/><title>HorizonHub</title>
-   <script>
-        function updateThemeColor() {
-            const computedStyle = getComputedStyle(document.body);
-            const [, red, green, blue] = computedStyle.backgroundColor.match(/\d+/g);
-            const luminance = 0.299 * red + 0.587 * green + 0.114 * blue;
-            const newColor = luminance > 128 ? '#000000' : '#ffffff';
-            document.getElementById('theme-color').setAttribute('content', newColor);
-        }
-        updateThemeColor();
-    </script>
+ <script>
+    function updateThemeColor() {
+      const computedStyle = getComputedStyle(document.body);
+      const [, red, green, blue] = computedStyle.backgroundColor.match(/\d+/g);
+      const luminance = 0.299 * red + 0.587 * green + 0.114 * blue;
+      const newColor = luminance > 128 ? '#000000' : '#ffffff';
+      document.getElementById('theme-color').setAttribute('content', newColor);
+    }
+    window.addEventListener('scroll', updateThemeColor);
+    updateThemeColor();
+  </script>
   <script defer="defer" src="/HorizonHub/static/js/main.6b8cc8a2.js"></script><link href="/HorizonHub/static/css/main.50cff24b.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>