[5.x] Save dark mode theme preference to local storage (#10140)

statamic · May 21, 2024 · f9bad98 · f9bad98
1 parent 730f05d
commit f9bad98
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/resources/js/components/DarkModeToggle.vue b/resources/js/components/DarkModeToggle.vue
@@ -66,7 +66,16 @@ export default {
  methods: {
  prefer(mode) {
  this.preference = mode;
- this.$preferences.set('theme', mode === 'auto' ? null : mode);
+
+ // Saving to user preference allows it to persist across browsers, whereas saving to local
+ // storage allows it to work before the user is authenticated, e.g. on the login screen.
+ if (mode === 'auto') {
+ this.$preferences.remove('theme');
+ localStorage.removeItem('statamic.theme');
+ } else {
+ this.$preferences.set('theme', mode);
+ localStorage.setItem('statamic.theme', mode);
+ }
  }
  }
 }

diff --git a/resources/views/partials/head.blade.php b/resources/views/partials/head.blade.php
@@ -17,7 +17,8 @@
 
 <script>
  (function () {
- let theme = '{{ $user?->preferredTheme() ?? "auto" }}';
+ let theme = {!! ($userTheme = $user?->preferredTheme()) ? "'".$userTheme."'" : "null" !!};
+ if (! theme) theme = localStorage.getItem('statamic.theme') ?? 'auto';
  if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) theme = 'dark';
  if (theme === 'dark') document.documentElement.classList.add('dark');
  })();