From dc631f01b875a7c6cd57be5a05120a42def4c33f Mon Sep 17 00:00:00 2001
From: Antonio Frignani <antoniofrignani@gmail.com>
Date: Sat, 20 Apr 2024 01:55:46 +0200
Subject: [PATCH] Allow dark and light theme customization (#387)

---
 src/View/Components/ThemeToggle.php | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/View/Components/ThemeToggle.php b/src/View/Components/ThemeToggle.php
index 9f00f83c..4f698a34 100644
--- 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()
                             }
                         }"