Allow dark and light theme customization (#387)

robsontenorio · Apr 19, 2024 · dc631f0 · dc631f0
1 parent 3594e39
commit dc631f0
Showing 1 changed file with 5 additions and 3 deletions.
diff --git a/src/View/Components/ThemeToggle.php b/src/View/Components/ThemeToggle.php
@@ -14,6 +14,8 @@ public function __construct(
         public ?string $value = null,
         public ?string $light = "Light",
         public ?string $dark = "Dark",
+        public ?string $lightTheme = "light",
+        public ?string $darkTheme = "dark",
         public ?bool $withLabel = false,
 
     ) {
@@ -26,9 +28,9 @@ public function render(): View|Closure|string
                 <div>
                     <label
                         x-data="{
-                            theme: $persist(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light').as('mary-theme'),
+                            theme: $persist(window.matchMedia('(prefers-color-scheme: dark)').matches ? '{{ $darkTheme }}' : '{{ $lightTheme }}').as('mary-theme'),
                             init() {
-                                if (this.theme == 'dark') {
+                                if (this.theme == '{{ $darkTheme }}') {
                                     this.$refs.sun.classList.add('swap-off');
                                     this.$refs.sun.classList.remove('swap-on');
                                     this.$refs.moon.classList.add('swap-on');
@@ -42,7 +44,7 @@ public function render(): View|Closure|string
                                 this.$dispatch('theme-changed', this.theme)
                             },
                             toggle() {
-                                this.theme = this.theme == 'light' ? 'dark' : 'light'
+                                this.theme = this.theme == '{{ $lightTheme }}' ? '{{ $darkTheme }}' : '{{ $lightTheme }}'
                                 this.setToggle()
                             }
                         }"