Set up custom theme

Author: designatedcoder

Diff for: app/Providers/FilamentServiceProvider.php

@@ -3,6 +3,7 @@
 namespace App\Providers;
 
 use Filament\Facades\Filament;
+use Illuminate\Foundation\Vite;
 use Filament\Navigation\UserMenuItem;
 use Illuminate\Support\ServiceProvider;
 use App\Filament\Resources\RoleResource;
@@ -28,6 +29,9 @@ public function register()
      */
     public function boot() {
         Filament::serving(function() {
+            Filament::registerTheme(
+                app(Vite::class)('resources/css/filament.css'),
+            );
             if (auth()->user()) {
                 if (auth()->user()->is_admin === 1 && auth()->user()->hasAnyRole(['super-admin', 'admin', 'moderator'])) {
                     Filament::registerUserMenuItems([

Diff for: package-lock.json

@@ -14,6 +14,7 @@
         "lodash": "^4.17.19",
         "postcss": "^8.4.14",
         "tailwindcss": "^3.1.0",
+        "tippy.js": "^6.3.7",
         "vite": "^3.0.0"
     }
 }

Diff for: package.json

@@ -0,0 +1 @@
+@import '../../vendor/filament/filament/resources/css/app.css';

Diff for: resources/css/filament.css

@@ -1,4 +1,5 @@
 const defaultTheme = require('tailwindcss/defaultTheme');
+const colors = require('tailwindcss/colors');
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
@@ -8,12 +9,18 @@ module.exports = {
         './storage/framework/views/*.php',
         './resources/views/**/*.blade.php',
     ],
-
+    darkMode: 'class',
     theme: {
         extend: {
             fontFamily: {
                 sans: ['Nunito', ...defaultTheme.fontFamily.sans],
             },
+            colors: {
+                danger: colors.rose,
+                primary: colors.green,
+                success: colors.blue,
+                warning: colors.purple,
+            },
         },
     },
 

Diff for: tailwind.config.js

@@ -7,6 +7,7 @@ export default defineConfig({
             input: [
                 'resources/css/app.css',
                 'resources/js/app.js',
+                'resources/css/filament.css',
             ],
             refresh: [
                 ...refreshPaths,