Add meta theme-color changes to color scheme switching

#10
savageserif · Jun 22, 2024 · bbb5595 · bbb5595 · github-actions · Jun 22, 2024
1 parent 633f34b
commit bbb5595
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 10 deletions.
diff --git a/index.html b/index.html
@@ -1,14 +1,31 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <link rel="icon" type="image/png" sizes="32x32" href="favicon-32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="favicon-16.png">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="favicon-32.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="favicon-16.png"
+    />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0"
+    />
+    <meta name="theme-color" />
     <title>Hacker News</title>
   </head>
   <body>
     <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
+    <script
+      type="module"
+      src="/src/main.ts"
+    ></script>
   </body>
 </html>
diff --git a/src/App.vue b/src/App.vue
@@ -1,6 +1,5 @@
 <template>
   <main
-    :class="[view.darkColorSchemeIsActive ? 'dark' : '']"
     class="flex h-dvh select-none gap-px bg-separator-color font-sans text-base text-primary-color antialiased selection:bg-selection-color selection:text-primary-selected-color"
   >
     <ThePostsColumn :class="[view.availableColumns < 2 ? 'flex-1' : 'flex-none basis-90']" />

diff --git a/src/assets/styles.css b/src/assets/styles.css
@@ -62,8 +62,7 @@
   --focus-500: 213 100% 55%; /* #1a83ff */
 }
 
-:root,
-.dark {
+:root {
   --color-bg-blank: var(--base-0);
   --color-bg-hover: var(--base-50);
   --color-bg-controls: var(--base-100);

diff --git a/src/stores/ViewStore.ts b/src/stores/ViewStore.ts
@@ -1,4 +1,4 @@
-import { computed } from 'vue';
+import { computed, watchEffect, nextTick } from 'vue';
 import type { ComputedRef } from 'vue';
 import { defineStore } from 'pinia';
 import {
@@ -17,6 +17,23 @@ export const useViewStore = defineStore('view', () => {
       colorScheme.value === 'dark' || (colorScheme.value === 'system' && usePreferredDark().value)
   );
 
+  watchEffect(async () => {
+    if (darkColorSchemeIsActive.value) {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+
+    await nextTick();
+
+    document.head
+      .querySelector('meta[name="theme-color"]')
+      ?.setAttribute(
+        'content',
+        `hsl(${getComputedStyle(document.documentElement).getPropertyValue('--color-bg-controls')})`
+      );
+  });
+
   const isTouchDevice = useMediaQuery('(pointer: coarse)');
 
   const prioritizedView = useStorage<'link' | 'comments'>('prioritizedView', 'link');