React to a property rather than adding styling.

statamic · Jul 22, 2024 · 6c7d17e · 6c7d17e
1 parent d958140
commit 6c7d17e
Show file tree

Hide file tree

Showing 7 changed files with 11 additions and 40 deletions.
diff --git a/resources/css/components/fieldtypes/datetime.css b/resources/css/components/fieldtypes/datetime.css
@@ -2,40 +2,6 @@
    DATE & TIME FIELDTYPES
    ========================================================================== */
 
-.vc-container.vc-is-dark,
-.vc-container {
-    @apply dark:text-dark-150 dark:bg-dark-600 dark:border-dark-300;
-
-    .vc-title {
-        @apply dark:text-dark-150;
-    }
-
-    .vc-arrow {
-        @apply dark:hover:bg-dark-900;
-    }
-
-    .vc-weekday {
-        @apply dark:text-blue-300;
-    }
-
-    .vc-nav-popover-container {
-        @apply dark:bg-dark-700 dark:border-dark-650 dark:text-dark-150;
-
-        .vc-nav-title,
-        .vc-nav-item,
-        .vc-nav-arrow {
-            @apply dark:text-dark-150 dark:hover:bg-dark-900 dark:hover:text-dark-100;
-        }
-
-        .vc-nav-item.is-active {
-            @apply dark:text-dark-100 dark:bg-dark-800;
-        }
-        .vc-nav-item.is-current {
-            @apply dark:border-dark-200;
-        }
-    }
-}
-
 .daterange {
 	outline: none;
 	width: 100%;

diff --git a/resources/js/components/DarkModeToggle.vue b/resources/js/components/DarkModeToggle.vue
@@ -54,8 +54,12 @@ export default {
                     : 'light';
             }
         },
-        theme(theme) {
-            document.documentElement.classList.toggle('dark', theme === 'dark');
+        theme: {
+            immediate: true,
+            handler(theme) {
+                document.documentElement.classList.toggle('dark', theme === 'dark');
+                Statamic.darkMode = theme === 'dark';
+            }
         }
     },
     created() {

diff --git a/resources/js/components/Statamic.js b/resources/js/components/Statamic.js
@@ -23,6 +23,7 @@ export default new Vue({
         return {
             bootingCallbacks: [],
             bootedCallbacks: [],
+            darkMode: null,
         }
     },
 

diff --git a/resources/js/components/fieldtypes/date/RangeInline.vue b/resources/js/components/fieldtypes/date/RangeInline.vue
@@ -21,7 +21,7 @@ export default {
     computed: {
 
         darkMode() {
-            return this.$preferences.get('theme') === 'dark'
+            return Statamic.darkMode;
         },
 
         pickerBindings() {

diff --git a/resources/js/components/fieldtypes/date/RangePopover.vue b/resources/js/components/fieldtypes/date/RangePopover.vue
@@ -108,7 +108,7 @@ export default {
     computed: {
 
         darkMode() {
-            return this.$preferences.get('theme') === 'dark'
+            return Statamic.darkMode;
         },
 
         pickerBindings() {

diff --git a/resources/js/components/fieldtypes/date/SingleInline.vue b/resources/js/components/fieldtypes/date/SingleInline.vue
@@ -21,7 +21,7 @@ export default {
     computed: {
 
         darkMode() {
-            return this.$preferences.get('theme') === 'dark'
+            return Statamic.darkMode;
         },
 
         pickerBindings() {

diff --git a/resources/js/components/fieldtypes/date/SinglePopover.vue b/resources/js/components/fieldtypes/date/SinglePopover.vue
@@ -65,7 +65,7 @@ export default {
     computed: {
 
         darkMode() {
-            return this.$preferences.get('theme') === 'dark'
+            return Statamic.darkMode;
         },
 
         inputEvents() {