Multi theme support for Laravel application

This Laravel package adds multi-theme support to your application. It also provides a simple authentication scaffolding for a starting point for building a Laravel application. And it also has preset for Bootstrap, Tailwind, Vue, and React. So, I believe it is a good alternative to the laravel/ui & laravel/breeze package.

Features

• Any number of themes
• Fallback theme support (WordPress style); It allows creating a child theme to extend any theme
• Provides authentication scaffolding similar to laravel/ui & laravel/breeze
• Exports all auth controllers, tests, and other files similar to laravel/breeze
• Provides frontend presets for Bootstrap, Tailwind, Vue 2, Vue 3 and React

If you don't want to use auth scaffolding of this package, instead you want to use Laravel Fortify, no problem with that. You can use Laravel Themer with Fortify. Laravel Fortify only gives backend implementation authentication, it does not provide views or frontend presets. So, use Fortify for backend auth and Laravel Themer for views and presets.

Tutorial

Here is the video for Laravel Themer Tutorial.

Installation and setup

You can install this package via composer using:

composer require qirolab/laravel-themer

Publish a configuration file:

php artisan vendor:publish --provider="Qirolab\Theme\ThemeServiceProvider" --tag="config"

Creating a theme

Run the following command in the terminal:

php artisan make:theme

This command will ask you to enter theme name, CSS framework, js framework, and optional auth scaffolding.

Useful Theme methods:

// Set active theme
Theme::set('theme-name');

// Get current active theme
Theme::active();

// Get current parent theme
Theme::parent();

// Clear theme. So, no theme will be active
Theme::clear();

// Get theme path
Theme::path($path = 'views');
// output:
// /app-root-path/themes/active-theme/views

Theme::path($path = 'views', $themeName = 'admin');
// output:
// /app-root-path/themes/admin/views

Theme::getViewPaths();
// Output:
// [
//     '/app-root-path/themes/admin/views',
//     '/app-root-path/resources/views'
// ]

Middleware to set a theme

Register ThemeMiddleware in app\Http\Kernel.php:

protected $routeMiddleware = [
    // ...
    'theme' => \Qirolab\Theme\Middleware\ThemeMiddleware::class,
];

Examples for middleware usage:

// Example 1: set theme for a route
Route::get('/dashboard', 'DashboardController@index')
    ->middleware('theme:dashboard-theme');


// Example 2: set theme for a route-group
Route::group(['middleware'=>'theme:admin-theme'], function() {
    // "admin-theme" will be applied to all routes defined here
});


// Example 3: set child and parent theme
Route::get('/dashboard', 'DashboardController@index')
    ->middleware('theme:child-theme,parent-theme');

Asset compilation

To compile the theme assets, you need to add the theme's webpack.mix.js in the root webpack.mix.js.

// add this in the root `webpack.mix.js`
require(`${__dirname}/themes/theme-name/webpack.mix.js`);

Now you can run the npm install and npm run dev command to compile theme assets.

If you add multiple webpack.mix.js of different themes in the root webpack.mix.js, then webpack may not compile these correctly. So, you should modify the root webpack.mix.js with the following code:

let theme = process.env.npm_config_theme;

if(theme) {
   require(`${__dirname}/themes/${theme}/webpack.mix.js`);
} else {
    // default theme to compile if theme is not specified
  require(`${__dirname}/themes/theme-name/webpack.mix.js`);
}

Now, to compile a particular theme run the following command:

npm run dev --theme=theme-name

# or

npm run watch --theme=theme-name

# or

npm run production --theme=theme-name

Support us

We invest a lot of resources into video tutorials and creating open-source packages. If you like what I do or if you ever made use of something I built or from my videos, consider supporting us. This will allow us to focus even more time on the tutorials and open-source projects we're working on.

Thank you so much for helping us out! 🥰

Testing

composer test

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

Authentication scaffolding stubs and presets are taken from laravel/ui, laravel/breeze, and laravel-frontend-presets/tailwindcss.

• Harish Kumar
• All Contributors

License

The MIT License (MIT). Please see License File for more information.