From 7d15f5186b2ceca6ba57ee26154cca759a930390 Mon Sep 17 00:00:00 2001 From: Julian Freeman Date: Mon, 23 Mar 2026 10:01:03 -0400 Subject: [PATCH] support dark mode --- src/App.vue | 237 +++++++++++++++++++++++++------------------- src/assets/main.css | 38 +++++-- 2 files changed, 164 insertions(+), 111 deletions(-) diff --git a/src/App.vue b/src/App.vue index 58a8ae5..293e940 100644 --- a/src/App.vue +++ b/src/App.vue @@ -44,6 +44,25 @@ const showToast = (message: string, type = "success") => { const retainDays = ref(30); const captureInterval = ref(60); const timelineZoom = ref(1.5); +const theme = ref("system"); + +const applyTheme = (val: string) => { + if (val === 'dark') { + document.documentElement.classList.add('dark'); + } else if (val === 'light') { + document.documentElement.classList.remove('dark'); + } else { + if (window.matchMedia('(prefers-color-scheme: dark)').matches) { + document.documentElement.classList.add('dark'); + } else { + document.documentElement.classList.remove('dark'); + } + } +}; + +watch(theme, (newVal) => { + applyTheme(newVal); +}); const tags = ref([]); const dayEvents = ref([]); @@ -200,6 +219,8 @@ onMounted(async () => { retainDays.value = (await store.get("retainDays")) as number || 30; captureInterval.value = Math.max((await store.get("captureInterval")) as number || 60, 60); timelineZoom.value = (await store.get("timelineZoom")) as number || 1.5; + theme.value = (await store.get("theme")) as string || "system"; + applyTheme(theme.value); await invoke("update_interval", { seconds: captureInterval.value }); isPaused.value = await invoke("get_pause_state"); await loadTimeline(true); await loadTags(); await loadEvents(); @@ -393,6 +414,7 @@ const updateSettings = async () => { await store.set("retainDays", retainDays.value); await store.set("captureInterval", captureInterval.value); await store.set("timelineZoom", timelineZoom.value); + await store.set("theme", theme.value); await store.save(); await invoke("update_db_path", { path: dbPath.value }); await invoke("update_interval", { seconds: captureInterval.value }); @@ -529,27 +551,27 @@ const handleExport = async () => {