Add dracula theme

README.md

@@ -218,21 +218,25 @@ Next add a new item to the `input` array of `vite.config.js`: `resources/css/awe
 
 ## Available Themes
 
+Dracula (dark)
+
+![dracula-dark](https://raw.githubusercontent.com/Hasnayeen/themes/3.x/assets/dracula-dark.png)
+
 Nord (light)
 
-![nord-light](https://raw.githubusercontent.com/Hasnayeen/themes/3.x/resources/dist/images/nord-light.png)
+![nord-light](https://raw.githubusercontent.com/Hasnayeen/themes/3.x/assets/nord-light.png)
 
 Nord (dark)
 
-![nord-dark](https://raw.githubusercontent.com/Hasnayeen/themes/3.x/resources/dist/images/nord-dark.png)
+![nord-dark](https://raw.githubusercontent.com/Hasnayeen/themes/3.x/assets/nord-dark.png)
 
 Sunset (light)
 
-![sunset-light](https://raw.githubusercontent.com/Hasnayeen/themes/3.x/resources/dist/images/sunset-light.png)
+![sunset-light](https://raw.githubusercontent.com/Hasnayeen/themes/3.x/assets/sunset-light.png)
 
 Sunset (dark)
 
-![sunset-dark](https://raw.githubusercontent.com/Hasnayeen/themes/3.x/resources/dist/images/sunset-dark.png)
+![sunset-dark](https://raw.githubusercontent.com/Hasnayeen/themes/3.x/assets/sunset-dark.png)
 
 ## Upgrading
 

resources/css/dracula.css

@@ -0,0 +1,51 @@
+@import '../../vendor/filament/filament/resources/css/theme.css';
+
+@config './tailwind.nord.config.js';
+
+body {
+ @apply !bg-gray-950 !text-white;
+}
+
+.fi-main-ctn {
+ @apply bg-gray-950;
+}
+
+.fi-sidebar, .fi-sidebar header {
+ @apply !bg-primary-950;
+}
+
+.fi-sidebar-header {
+ @apply bg-transparent !ring-0 !shadow-none;
+}
+
+.fi-logo {
+ @apply !text-secondary-500;
+}
+
+.fi-topbar nav {
+ @apply !bg-gray-950 !ring-0 !shadow-none;
+}
+
+.fi-sidebar-item a, .fi-sidebar-item svg {
+ @apply !text-success-200;
+}
+
+.fi-sidebar-item-active a {
+ @apply !bg-gray-950 dark:!text-secondary-500;
+}
+
+.fi-sidebar-item-active svg {
+ @apply !text-secondary-500;
+}
+
+.fi-header-heading {
+ @apply !text-secondary-500;
+}
+
+.fi-section-header-heading, .fi-ta-header-heading {
+ @apply !text-secondary-500;
+}
+
+.fi-breadcrumbs li a {
+ @apply !text-success-500;
+}

resources/css/nord.css

@@ -43,11 +43,3 @@
 .fi-tenant-menu {
  @apply rounded-lg mt-4;
 }
-
-.fi-btn {
- @apply dark:!bg-custom-400 dark:text-black;
-}
-
-.fi-btn-label {
- @apply text-primary-950 dark:text-black;
-}

resources/lang/ar/themes.php

@@ -14,4 +14,6 @@
  'primary_color_set' => 'تم تعيين اللون الأساسي إلى',
  'theme_set_to' => 'تم تعيين الثيم إلى',
  'appearance' => 'المظهر',
+ 'no_light_mode' => 'هذا الموضوع لا يدعم الوضع الخفيف',
+ 'no_dark_mode' => 'هذا الموضوع لا يدعم الوضع المظلم',
 ];

resources/lang/en/themes.php

@@ -14,4 +14,6 @@
  'primary_color_set' => 'Theme primary color set to',
  'theme_set_to' => 'Theme set to',
  'appearance' => 'Appearance',
+ 'no_light_mode' => 'This theme does not support light mode.',
+ 'no_dark_mode' => 'This theme does not support dark mode.',
 ];

resources/views/filament/pages/themes-footer.blade.php

@@ -0,0 +1,3 @@
+<p class="pt-4 text-sm font-semibold text-gray-600 dark:text-gray-400 border-t">
+ Hasnayeen/Themes: {{ \Composer\InstalledVersions::getPrettyVersion('hasnayeen/themes') }}
+</p>

resources/views/filament/pages/themes.blade.php

@@ -24,7 +24,7 @@
  <label for="custom">{{ __('themes::themes.custom') }}</label>
  </div>
  @else
- <p class="text-gray-700">{{ __('themes::themes.no_changing_primary_color') }}</p>
+ <p class="text-gray-700 dark:text-gray-400">{{ __('themes::themes.no_changing_primary_color') }}</p>
  @endif
  </div>
  </section>
@@ -33,7 +33,7 @@
  <header class="flex items-center gap-x-3 overflow-hidden py-4">
  <div class="grid flex-1 gap-y-1">
  <h3 class="fi-section-header-heading text-base font-semibold leading-6 text-gray-950 dark:text-white">
- {{ $this->getTitle() }}
+ {{ __('themes::themes.themes') }}
  </h3>
 
  <p class="fi-section-header-description text-sm text-gray-500 dark:text-gray-400">
@@ -58,15 +58,27 @@
  </x-filament::button>
  </x-slot>
 
+ @php
+ $noLightMode = in_array(\Hasnayeen\Themes\Contracts\HasOnlyDarkMode::class, class_implements($theme));
+ $noDarkMode = in_array(\Hasnayeen\Themes\Contracts\HasOnlyLightMode::class, class_implements($theme));
+ @endphp
  <div class="grid grid-cols-2 gap-4">
  <div>
- <h3 class="text-sm font-semibold text-gray-600 pb-4">{{ __('themes::themes.light') }}</h3>
- <img src="{{ asset('vendor/themes/images/'.$name.'-light.png') }}" alt="{{ $name }} theme preview (light version)" class="border dark:border-gray-700 rounded-lg">
+ @if ($noLightMode)
+ <h3 class="text-sm font-semibold text-gray-600 pb-4">{{ __('themes::themes.no_light_mode') }}</h3>
+ @else
+ <h3 class="text-sm font-semibold text-gray-600 pb-4">{{ __('themes::themes.light') }}</h3>
+ <img src="{{ url('https://raw.githubusercontent.com/Hasnayeen/themes/3.x/assets/'.$name.'-light.png') }}" alt="{{ $name }} theme preview (light version)" class="border dark:border-gray-700 rounded-lg">
+ @endif
  </div>
 
  <div>
- <h3 class="text-sm font-semibold text-gray-600 pb-4">{{ __('themes::themes.dark') }}</h3>
- <img src="{{ asset('vendor/themes/images/'.$name.'-dark.png') }}" alt="{{ $name }} theme preview (dark version)" class="border dark:border-gray-700 rounded-lg">
+ @if ($noDarkMode)
+ <h3 class="text-sm font-semibold text-gray-600 pb-4">{{ __('themes::themes.no_dark_mode') }}</h3>
+ @else
+ <h3 class="text-sm font-semibold text-gray-600 pb-4">{{ __('themes::themes.dark') }}</h3>
+ <img src="{{ url('https://raw.githubusercontent.com/Hasnayeen/themes/3.x/assets/'.$name.'-dark.png') }}" alt="{{ $name }} theme preview (dark version)" class="border dark:border-gray-700 rounded-lg">
+ @endif
  </div>
  </div>
  </x-filament::section>

src/Contracts/HasOnlyDarkMode.php

@@ -0,0 +1,8 @@
+<?php
+
+namespace Hasnayeen\Themes\Contracts;
+
+interface HasOnlyDarkMode
+{
+
+}

src/Contracts/HasOnlyLightMode.php

@@ -0,0 +1,8 @@
+<?php
+
+namespace Hasnayeen\Themes\Contracts;
+
+interface HasOnlyLightMode
+{
+
+}

src/Filament/Pages/Themes.php

@@ -7,6 +7,7 @@
 use Filament\Pages\Page;
 use Filament\Support\Colors\Color;
 use Hasnayeen\Themes\ThemesPlugin;
+use Illuminate\Contracts\View\View;
 use Illuminate\Contracts\Support\Htmlable;
 use Illuminate\Support\Arr;
 
@@ -83,4 +84,9 @@ public static function shouldRegisterNavigation(): bool
  {
  return false;
  }
+
+ public function getFooter(): ?View
+ {
+ return view('themes::filament.pages.themes-footer');
+ }
 }

src/Http/Middleware/SetTheme.php

@@ -9,9 +9,12 @@
 use Filament\Support\Facades\FilamentAsset;
 use Filament\Support\Facades\FilamentColor;
 use Hasnayeen\Themes\Contracts\CanModifyPanelConfig;
+use Hasnayeen\Themes\Contracts\HasOnlyDarkMode;
+use Hasnayeen\Themes\Contracts\HasOnlyLightMode;
 use Hasnayeen\Themes\Filament\Pages\Themes as ThemesPage;
 use Hasnayeen\Themes\Themes;
 use Hasnayeen\Themes\Themes\DefaultTheme;
+use Hasnayeen\Themes\Themes\Dracula;
 use Hasnayeen\Themes\Themes\Nord;
 use Hasnayeen\Themes\Themes\Sunset;
 use Hasnayeen\Themes\ThemesPlugin;
@@ -38,16 +41,23 @@ public function handle(Request $request, Closure $next): Response
  ->url(ThemesPage::getUrl()),
  ] : []
  );
+
  FilamentColor::register($themes->getCurrentThemeColor());
+
+ $currentTheme = $themes->getCurrentTheme();
  FilamentAsset::register([
- match (get_class($themes->getCurrentTheme())) {
+ match (get_class($currentTheme)) {
+ Dracula::class => Css::make(Dracula::getName(), Dracula::getPath()),
  Nord::class => Css::make(Nord::getName(), Nord::getPath()),
  Sunset::class => Css::make(Sunset::getName(), Sunset::getPath()),
  default => Css::make(DefaultTheme::getName(), DefaultTheme::getPath()),
  },
  ], 'hasnayeen/themes');
- if ($themes->getCurrentTheme() instanceof CanModifyPanelConfig) {
- $themes->getCurrentTheme()->modifyPanelConfig($panel);
+
+ $panel->darkMode(! $currentTheme instanceof HasOnlyLightMode, $currentTheme instanceof HasOnlyDarkMode);
+
+ if ($currentTheme instanceof CanModifyPanelConfig) {
+ $currentTheme->modifyPanelConfig($panel);
  }
 
  return $next($request);

src/Themes.php

@@ -6,6 +6,7 @@
 use Hasnayeen\Themes\Contracts\HasChangeableColor;
 use Hasnayeen\Themes\Contracts\Theme;
 use Hasnayeen\Themes\Themes\DefaultTheme;
+use Hasnayeen\Themes\Themes\Dracula;
 use Hasnayeen\Themes\Themes\Nord;
 use Hasnayeen\Themes\Themes\Sunset;
 use Illuminate\Support\Arr;
@@ -19,6 +20,7 @@ public function __construct()
  {
  $this->collection = collect([
  DefaultTheme::getName() => DefaultTheme::class,
+ Dracula::getName() => Dracula::class,
  Nord::getName() => Nord::class,
  Sunset::getName() => Sunset::class,
  ]);

src/Themes/Dracula.php

@@ -0,0 +1,32 @@
+<?php
+
+namespace Hasnayeen\Themes\Themes;
+
+use Hasnayeen\Themes\Contracts\HasOnlyDarkMode;
+use Hasnayeen\Themes\Contracts\Theme;
+
+class Dracula implements Theme, HasOnlyDarkMode
+{
+ public static function getName(): string
+ {
+ return 'dracula';
+ }
+
+ public static function getPath(): string
+ {
+ return __DIR__ . '/../../resources/dist/dracula.css';
+ }
+
+ public function getThemeColor(): array
+ {
+ return [
+ 'primary' => '#9580ff',
+ 'custom' => '#6932f5',
+ 'secondary' => '#ff80bf',
+ 'info' => '#80ffea',
+ 'success' => '#8aff80',
+ 'warning' => '#f9f06b',
+ 'danger' => '#ff9580',
+ ];
+ }
+}