Add DarkMode and Theme support cachethq#68 cachethq#78

steffjenl · Oct 13, 2024 · 6d451dd · 6d451dd
1 parent 7a87a21
commit 6d451dd
Show file tree

Hide file tree

Showing 6 changed files with 79 additions and 9 deletions.
diff --git a/database/migrations/2024_10_13_130000_add_theme_darkmode_setting.php b/database/migrations/2024_10_13_130000_add_theme_darkmode_setting.php
@@ -0,0 +1,18 @@
+<?php
+
+use Spatie\LaravelSettings\Migrations\SettingsMigration;
+
+return new class extends SettingsMigration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        rescue(fn () => $this->migrator->add('theme.dark_mode', 'system'));
+        rescue(fn () => $this->migrator->add('theme.light_background', '#F9FAFB'));
+        rescue(fn () => $this->migrator->add('theme.light_text', '#3F3F46'));
+        rescue(fn () => $this->migrator->add('theme.dark_background', '#18181B'));
+        rescue(fn () => $this->migrator->add('theme.dark_text', '#D4D4D8'));
+    }
+};
diff --git a/resources/views/components/cachet.blade.php b/resources/views/components/cachet.blade.php
@@ -1,6 +1,14 @@
 @use('Cachet\Cachet')
 <!DOCTYPE html>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="bg-background-light text-base-light dark:bg-background-dark dark:text-base-dark">
+<html
+    lang="{{ str_replace('_', '-', app()->getLocale()) }}"
+    class="bg-background-light text-base-light dark:bg-background-dark dark:text-base-dark"
+    x-data="{
+      darkMode: localStorage.getItem('darkMode')
+      || localStorage.setItem('darkMode', '{{ Cachet::darkMode() }}')}"
+    x-init="$watch('darkMode', val => localStorage.setItem('darkMode', val))"
+    x-bind:class="{'dark': darkMode === 'dark' || (darkMode === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)}"
+>
     <head>
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -51,5 +59,8 @@
 
         <!-- Custom Cachet Footer -->
         {!! $cachet_footer !!}
+    <script>
+        localStorage.setItem('darkMode', '{{ Cachet::darkMode() }}')
+    </script>
     </body>
 </html>
diff --git a/src/Cachet.php b/src/Cachet.php
@@ -3,6 +3,7 @@
 namespace Cachet;
 
 use Cachet\Http\Middleware\RedirectIfAuthenticated;
+use Cachet\Settings\ThemeSettings;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Route;
 
@@ -22,13 +23,28 @@ class Cachet
      */
     public static function cssVariables(): array
     {
+        $light_background = app(ThemeSettings::class)->light_background;
+        $light_text = app(ThemeSettings::class)->light_text;
+
+        $dark_background = app(ThemeSettings::class)->dark_background;
+        $dark_text = app(ThemeSettings::class)->dark_text;
         return [
             // Variable => [Light, Dark]
-            'background' => ['#F9FAFB', '#18181B'],
-            'text' => ['#3F3F46', '#D4D4D8'],
+            'background' => [$light_background, $dark_background],
+            'text' => [$light_text, $dark_text],
         ];
     }
 
+    /**
+     * Get the current theme mode.
+     *
+     * @return string ('system', 'dark', 'light')
+     */
+    public static function darkMode(): string
+    {
+        return app(ThemeSettings::class)->dark_mode;
+    }
+
     /**
      * Get the current user using `cachet.guard`.
      */

diff --git a/src/Filament/Pages/ManageTheme.php b/src/Filament/Pages/ManageTheme.php
@@ -24,13 +24,32 @@ public function form(Form $form): Form
                 ]),
 
                 Forms\Components\Section::make()->columns(2)->schema([
-                    Forms\Components\ColorPicker::make('primary')
-                        ->label(__('Primary'))
-                        ->rgba(),
+                    Forms\Components\Fieldset::make(__('Light'))->columns(2)->schema([
+                        Forms\Components\ColorPicker::make('light_background')
+                            ->label(__('Background')),
 
-                    Forms\Components\ColorPicker::make('secondary')
-                        ->label(__('Secondary'))
-                        ->rgba(),
+                        Forms\Components\ColorPicker::make('light_text')
+                            ->label(__('Text')),
+                    ]),
+
+                    Forms\Components\Fieldset::make(__('Dark'))->columns(2)->schema([
+                        Forms\Components\ColorPicker::make('dark_background')
+                            ->label(__('Background')),
+
+                        Forms\Components\ColorPicker::make('dark_text')
+                            ->label(__('Text')),
+                    ]),
+                ]),
+
+                Forms\Components\Section::make()->columns(2)->schema([
+                    Forms\Components\Select::make('dark_mode')
+                        ->label(__('Dark Mode'))
+                        ->options([
+                            'system' => __('System'),
+                            'dark' => __('Dark'),
+                            'light' => __('Light'),
+                        ])
+                        ->columnSpanFull(),
                 ]),
             ]);
     }

diff --git a/src/Settings/ThemeSettings.php b/src/Settings/ThemeSettings.php
@@ -7,6 +7,11 @@
 class ThemeSettings extends Settings
 {
     public ?string $app_banner;
+    public ?string $dark_mode;
+    public ?string $light_background;
+    public ?string $light_text;
+    public ?string $dark_background;
+    public ?string $dark_text;
 
     public static function group(): string
     {

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -2,6 +2,7 @@ const defaultTheme = require('tailwindcss/defaultTheme')
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+  darkMode: 'selector',
   content: [
     './resources/**/*.blade.php',
     './resources/**/*.js',