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
new file mode 100644
index 00000000..e13a2b3d
--- /dev/null
+++ b/database/migrations/2024_10_13_130000_add_theme_darkmode_setting.php
@@ -0,0 +1,18 @@
+ $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
index ef07d9ad..5cd6e546 100644
--- a/resources/views/components/cachet.blade.php
+++ b/resources/views/components/cachet.blade.php
@@ -1,6 +1,14 @@
@use('Cachet\Cachet')
-
+
@@ -51,5 +59,8 @@
{!! $cachet_footer !!}
+
diff --git a/src/Cachet.php b/src/Cachet.php
index fe5bc232..4b8806b5 100644
--- 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
index d76ba1cd..9557b369 100644
--- 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
index a7dad7fc..bcb9ece1 100644
--- 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
index c9f0ecc3..82384d7c 100644
--- 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',