From 846db77c2b66b9921374195c52686c87643e0f3d Mon Sep 17 00:00:00 2001 From: Jason Varga Date: Thu, 21 Jul 2022 22:43:25 -0400 Subject: [PATCH] Theme (dark mode) toggle (#878) --- resources/js/app.js | 18 ++++++++++++++++ resources/views/layout.antlers.html | 12 +++-------- resources/views/partials/nav.antlers.html | 3 ++- resources/views/partials/theme.antlers.html | 23 +++++++++++++++++++++ 4 files changed, 46 insertions(+), 10 deletions(-) create mode 100644 resources/views/partials/theme.antlers.html diff --git a/resources/js/app.js b/resources/js/app.js index e002ae22f..00d582365 100644 --- a/resources/js/app.js +++ b/resources/js/app.js @@ -43,5 +43,23 @@ window.bodyData = function() { }; } +window.htmlData = function() { + return { + themePickerOpen: false, + themePreference: localStorage.getItem('theme') || 'system', + systemTheme: window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light', + setSystemTheme(theme) { + this.systemTheme = theme + }, + setThemePreference(scheme) { + this.themePreference = scheme + localStorage.setItem('theme', theme) + }, + get darkMode() { + return this.themePreference === 'dark' || (this.themePreference === 'system' && this.systemTheme === 'dark') + }, + } +} + Alpine.start(); window.Alpine = Alpine; diff --git a/resources/views/layout.antlers.html b/resources/views/layout.antlers.html index f395433a1..fcaf31fbe 100644 --- a/resources/views/layout.antlers.html +++ b/resources/views/layout.antlers.html @@ -1,4 +1,6 @@ - + @@ -26,14 +28,6 @@ diff --git a/resources/views/partials/nav.antlers.html b/resources/views/partials/nav.antlers.html index a076be0d6..f4c41619b 100644 --- a/resources/views/partials/nav.antlers.html +++ b/resources/views/partials/nav.antlers.html @@ -15,9 +15,10 @@ {{ /nav:collection:sections }}
- + {{ partial:theme }}
diff --git a/resources/views/partials/theme.antlers.html b/resources/views/partials/theme.antlers.html new file mode 100644 index 000000000..d6603eabf --- /dev/null +++ b/resources/views/partials/theme.antlers.html @@ -0,0 +1,23 @@ +
+
+ + + + + +
+ + +