From 820b3a9b8923a19681044f72a074becf317af6ab Mon Sep 17 00:00:00 2001 From: Ed Heltzel <402910+edheltzel@users.noreply.github.com> Date: Tue, 6 Aug 2024 14:31:25 -0400 Subject: [PATCH] feature: improves theme toggle updated theme toggle to include auto mode if users prefer dark mode. --- src/_includes/layouts/base.njk | 2 +- src/assets/js/components/toggle-theme.js | 25 ++++++++++++++++-------- 2 files changed, 18 insertions(+), 9 deletions(-) diff --git a/src/_includes/layouts/base.njk b/src/_includes/layouts/base.njk index 9a4678e..959641d 100644 --- a/src/_includes/layouts/base.njk +++ b/src/_includes/layouts/base.njk @@ -1,7 +1,7 @@ {%- include "partials/meta.njk" -%} diff --git a/src/assets/js/components/toggle-theme.js b/src/assets/js/components/toggle-theme.js index f98965f..cca8d57 100644 --- a/src/assets/js/components/toggle-theme.js +++ b/src/assets/js/components/toggle-theme.js @@ -6,15 +6,24 @@ */ export default function toggleTheme() { return { - /** @type {boolean} */ - darkMode: localStorage.getItem("darkMode") === "true", + darkMode: localStorage.getItem("themeMode") || "auto", - /** - * Toggle dark mode - */ - toggleDarkMode() { - this.darkMode = !this.darkMode; - localStorage.setItem("darkMode", String(this.darkMode)); + get isDarkMode() { + if (this.darkMode === "auto") { + return window.matchMedia("(prefers-color-scheme: dark)").matches; + } + return this.darkMode === "dark"; }, + + toggleDarkMode() { + // If it's auto, set it based on current system preference + if (this.darkMode === "auto") { + this.darkMode = this.isDarkMode ? "light" : "dark"; + } else { + // Simply toggle between dark and light + this.darkMode = this.darkMode === "dark" ? "light" : "dark"; + } + localStorage.setItem("themeMode", this.darkMode); + } }; }