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 3andReact
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.
License
The MIT License (MIT). Please see License File for more information.
2.4k Jan 3, 2023
86 Dec 15, 2022
2 Dec 20, 2021
61 Nov 21, 2022
658 Jan 6, 2023
15 Oct 22, 2022
9 Dec 21, 2022
2.7k Jan 3, 2023
12 Jun 23, 2022
378 Jan 3, 2023
27 Oct 4, 2022
80 Oct 21, 2022
204 Dec 27, 2022
2 Feb 13, 2022
233 Jan 4, 2023
48 Dec 29, 2022