Laravel Themer package: add multi-theme support for Laravel application

 This Laravel Themer package adds multi-theme support to your Laravel application. It also provides a simple authentication scaffolding and presets for Bootstrap, Tailwind, Vue, and React as a starting point for building a Laravel application.

In my opinion, this Laravel Themer package is a better alternative to the official laravel/ui & laravel/breeze packages because of the following 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 this package's auth scaffolding, instead, you want to use Laravel Fortify, no problem with that. You can use Laravel Themer with Fortify as well. Laravel Fortify is a frontend agnostic authentication backend for Laravel, and it does not provide views or frontend presets. So, use Fortify for backend authentication and Laravel Themer for your views, presets, and for multi-theme support.

Video Tutorial

Installation

Install via composer

1composer require qirolab/laravel-themer

Publish a configuration file:

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

Creating a theme

Use the following command to create a theme:

1php artisan make:theme

Middleware to set a theme

Register ThemeMiddleware in app\Http\Kernel.php:

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

Examples for middleware usage:

1Route::get('/dashboard', 'DashboardController@index')
2    ->middleware('theme:dashboard-theme');

Theme methods:

 1// Set active theme
 2Theme::set('theme-name');
 3 
 4// Get current active theme
 5Theme::active();
 6 
 7// Get current parent theme
 8Theme::parent();
 9 
10// Clear theme. So, no theme will be active
11Theme::clear();
12 
13// Get theme path
14Theme::path($path = 'views');
15// output:
16// /app-root-path/themes/active-theme/views
17 
18Theme::path($path = 'views', $themeName = 'admin');
19// output:
20// /app-root-path/themes/admin/views
21 
22Theme::getViewPaths();
23// Output:
24// [
25//     '/app-root-path/themes/admin/views',
26//     '/app-root-path/resources/views'
27// ]

webpack.mix.js Configuration

After creating a new theme, it creates a separate webpack.mix.js file for that theme. So, to compile the theme's webpack.mix.js file it should be included in the app's webpack.mix.js that is located in the root path.

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

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

1let theme = process.env.npm_config_theme;
2 
3if(theme) {
4   require(`${__dirname}/themes/${theme}/webpack.mix.js`);
5} else {
6    // default theme to compile if theme is not specified
7  require(`${__dirname}/themes/theme-name/webpack.mix.js`);
8}

Now, you can use the following command to compile assets for a particular theme:

1npm run dev --theme=theme-name