Create And Deploy Custom Laravel Theme

Create And Deploy Custom Laravel Theme

Create Laravel custom theme using Hexadog Laravel Theme Manager and deploy it using Filament Theme Manager.

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!

08/06/2022 20:00

Dirgahayu Republik Indonesia

Ke-77

Diki Akbar Asyidiq

Tech Enthusiast, Fullstack Web Developer, Software Engineer.

Subscribe

(optional)

Select categories you want to subscribe, leave blank if you want to subscribe to all categories.

Cancel

Tags

Filament

PHP

Filament Plugin

Filament Admin

Tailwind

Theme Manager

Plugin

Custom Theme

Laravel Custom Theme

Updates

Filament Theme Manager

Daily Blog

100DaysOfCode

Fullstack Web Developer

Ruby

Ruby on Rails

Ruby Programming

OOP

Open Source

Web Application

Laravel

CMS

Code With Diki

Tips

Spatie

Beginner Review

Filament Form

Journey

Coding Journey

Programming Journey

References

Front-end

UI/UX

Free

Free Website Design

Website Design References

Moota

Integrasi Metode Pembayaran

Payment Gateway

Share

http://codewithdiki.com/tutorial/create-and-deploy-custom-theme
Link Copied.
Facebook share
Twitter Share
Reddit Share