diff --git a/client/src/App.vue b/client/src/App.vue index 0221508c..c8414230 100644 --- a/client/src/App.vue +++ b/client/src/App.vue @@ -25,94 +25,99 @@ diff --git a/client/src/composables/useDarkMode.js b/client/src/composables/useDarkMode.js new file mode 100644 index 00000000..51aa70b3 --- /dev/null +++ b/client/src/composables/useDarkMode.js @@ -0,0 +1,21 @@ +import { ref, watch } from "vue"; + +const STORAGE_KEY = "dark-mode"; +const isDark = ref(localStorage.getItem(STORAGE_KEY) === "true"); + +// Apply class to on module load so dark mode is instant (no flash) +if (isDark.value) { + document.documentElement.classList.add("dark"); +} + +watch(isDark, (val) => { + localStorage.setItem(STORAGE_KEY, String(val)); + document.documentElement.classList.toggle("dark", val); +}); + +export function useDarkMode() { + const toggle = () => { + isDark.value = !isDark.value; + }; + return { isDark, toggle }; +}