finally fixed theme colors

griffindavidson · Jan 9, 2025 · 8350b63 · 8350b63
1 parent 2bc921c
commit 8350b63
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 41 deletions.
diff --git a/blog.html b/blog.html
@@ -6,7 +6,8 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <meta name="robots" content="index, follow">
         <meta name="description" content="A blog where I ramble about tech and software.">
-        <meta id="theme-color" name="theme-color" content="#eeeeee">
+        <meta name="theme-color" content="#eeeeee" media="(prefers-color-scheme: light)">
+        <meta name="theme-color" content="#121212" media="(prefers-color-scheme: dark)">
         <link rel="apple-touch-icon" sizes="180x180" href="favicons/apple-touch-icon.png">
         <link rel="icon" type="image/png" sizes="32x32" href="favicons/favicon-32x32.png">
         <link rel="icon" type="image/png" sizes="16x16" href="favicons/favicon-16x16.png">

diff --git a/blog.js b/blog.js
@@ -40,23 +40,4 @@ window.addEventListener('popstate', () => {
     } else {
         document.getElementById('home').checked = true;
     }
-});
-
-function updateThemeColor() {
-    const metaThemeColor = document.getElementById('theme-color');
-    const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
-
-    if (isDarkMode) {
-      // Set theme color for dark mode
-      metaThemeColor.setAttribute('content', '#121212');  // Dark mode theme color (black)
-    } else {
-      // Set theme color for light mode
-      metaThemeColor.setAttribute('content', '#eeeeee');  // Light mode theme color (white)
-    }
-  }
-
-  // Call the function to set theme color on page load
-  updateThemeColor();
-
-  // Listen for changes in the system's color scheme (e.g., if the user switches themes)
-  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateThemeColor);
+});
diff --git a/blog/mac-displays.html b/blog/mac-displays.html
@@ -11,7 +11,8 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <meta name="robots" content="index, follow">
         <meta name="description" content="Discussing how macOS addresses external displays.">
-        <meta id="theme-color" name="theme-color" content="#eeeeee">
+        <meta name="theme-color" content="#eeeeee" media="(prefers-color-scheme: light)">
+        <meta name="theme-color" content="#121212" media="(prefers-color-scheme: dark)">
         <link rel="apple-touch-icon" sizes="180x180" href="../favicons/apple-touch-icon.png">
         <link rel="icon" type="image/png" sizes="32x32" href="../favicons/favicon-32x32.png">
         <link rel="icon" type="image/png" sizes="16x16" href="../favicons/favicon-16x16.png">

diff --git a/blog/mac-displays.js b/blog/mac-displays.js
@@ -1,18 +0,0 @@
-function updateThemeColor() {
-    const metaThemeColor = document.getElementById('theme-color');
-    const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
-
-    if (isDarkMode) {
-      // Set theme color for dark mode
-      metaThemeColor.setAttribute('content', '#121212');  // Dark mode theme color (black)
-    } else {
-      // Set theme color for light mode
-      metaThemeColor.setAttribute('content', '#eeeeee');  // Light mode theme color (white)
-    }
-  }
-
-  // Call the function to set theme color on page load
-  updateThemeColor();
-
-  // Listen for changes in the system's color scheme (e.g., if the user switches themes)
-  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateThemeColor);

diff --git a/index.html b/index.html
@@ -6,11 +6,12 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <meta name="robots" content="index, follow">
         <meta name="description" content="Personal Portfolio webpage for Griffin Davidson.">
+        <meta name="color-scheme" content="dark">
+        <meta name="theme-color" content="#000000">
         <link rel="apple-touch-icon" sizes="180x180" href="favicons/apple-touch-icon.png">
         <link rel="icon" type="image/png" sizes="32x32" href="favicons/favicon-32x32.png">
         <link rel="icon" type="image/png" sizes="16x16" href="favicons/favicon-16x16.png">
         <link rel="manifest" href="favicons/site.webmanifest">
-        <meta name="theme-color" content="#000000">
         <link rel="stylesheet" type="text/css" href="globals.css"/>
         <link rel="stylesheet" type="text/css" href="index.css"/>
         <script src="index.js" type="text/javascript" defer></script>