Creating Theme

We'll use hexadog/laravel-theme-manager command to create theme skeleton by using command :

php artisan theme:make

After run that command you'll need to fill some information about the theme like screenshot below

Then they will put your theme on directory theme/vendorname/slugify-theme-name.

Preparing Theme

And this is my favorite section, on this section we'll preparing our theme with Filament Admin styles, they actually made how to create custom theme here, but let's do it step by step.

• Open your root theme directory
• Create file package.json

  {
      "private": true,
      "scripts": {
          "dev": "npm run development",
          "development": "mix",
          "watch": "mix watch",
          "watch-poll": "mix watch -- --watch-options-poll=1000",
          "hot": "mix watch --hot",
          "prod": "npm run production",
          "production": "mix --production"
      },
      "devDependencies": {
          "@tailwindcss/forms": "^0.4.1",
          "@tailwindcss/typography": "^0.5.2",
          "alpinejs": "^3.8",
          "laravel-mix": "^6.0.6",
          "laravel-mix-tailwind": "^0.1",
          "postcss": "^8.1.14",
          "resolve-url-loader": "^3.1",
          "sass": "^1.3",
          "sass-loader": "^8.0",
          "tailwind-scrollbar": "^1.3.1",
          "tailwindcss": "^3.0.24",
          "tippy.js": "^6.3.7"
      }
  }
  

• Create webpack.mix.js 

  const mix = require('laravel-mix')
  
  mix
  .setPublicPath('./')
  .js('resources/js/app.js', 'public/js')
      .postCss('resources/css/app.css', 'public/css', [
          require('tailwindcss'),
      ])
      .version()
  

• Create app.js on root-theme-directory/resources/js

  import Alpine from 'alpinejs'
  import FormsAlpinePlugin from '../../../../../vendor/filament/forms/dist/module.esm'
  
  Alpine.plugin(FormsAlpinePlugin)
  
  window.Alpine = Alpine
  
  Alpine.start()
  

• Create app.css on root-theme-directory/resources/css

  @import '../../../../../vendor/filament/forms/dist/module.esm.css';
  
  @tailwind base;
  @tailwind components;
  @tailwind utilities;
  

   

• Create tailwind.config.js on root theme directory
  

  const colors = require('tailwindcss/colors')
  
  module.exports = {
      darkMode: 'class',
      content: [
          './resources/**/*.blade.php',
          '../../../resources/**/*.blade.php',
          '../../../vendor/filament/**/*.blade.php',
      ],
      theme: {
          extend: {
              colors: {
                  danger: colors.rose,
                  primary: {
                      DEFAULT : "#5a49e3",
                      ... colors.violet,
                      "500" : "#5a49e3"
                  },
                  warning: colors.amber,
                  success: colors.emerald
  
              },
          },
      },
      plugins: [
          require('@tailwindcss/forms'),
          require('@tailwindcss/typography'),
          require('tailwind-scrollbar')
      ],
  }
  

  On this part you can also custom your tailwind config.

• Install & Compile Css and Js
  

  npm install && npm run dev

Now on your theme directory should be look like this.

Deploy Theme To Repository

• Create repository for theme
  
• Upload it to your repository
• Make sure server has whitelist SSH to your git account before deploying theme
• Go to your website admin panel, and create themes
  When creating theme make sure vendor and directory is compatible with theme config on root-theme/composer.json, for example :
  
  Vendor
  
  Directory
  

And theme is ready to use!