From bbb5595edecf7bec7d42bef6ff3bcb3e751b8023 Mon Sep 17 00:00:00 2001
From: Jona <8698248+jonamil@users.noreply.github.com>
Date: Sat, 22 Jun 2024 18:04:41 +0200
Subject: [PATCH] Add meta theme-color changes to color scheme switching
#10
---
index.html | 29 +++++++++++++++++++++++------
src/App.vue | 1 -
src/assets/styles.css | 3 +--
src/stores/ViewStore.ts | 19 ++++++++++++++++++-
4 files changed, 42 insertions(+), 10 deletions(-)
diff --git a/index.html b/index.html
index 392baa7..bf06a95 100644
--- a/index.html
+++ b/index.html
@@ -1,14 +1,31 @@
-
+
-
-
-
-
+
+
+
+
+
Hacker News
-
+
diff --git a/src/App.vue b/src/App.vue
index 3cba2a1..3be460f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,5 @@
diff --git a/src/assets/styles.css b/src/assets/styles.css
index 9449960..0005c8c 100644
--- 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
index 2e9d70b..a3ae5d4 100644
--- 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');