Laravel 10

How to create multiple themes in Laraval

1. Configure Themes Folder:

  • Create a folder for themes inside the public directory, for example, public/themes.

2. Set up Template Model:

  • Generate a Template model using Artisan:
php artisan make:model Template -m

Then, update the generated migration file (create_templates_table) to include the following fields:

public function up()
{
    Schema::create('templates', function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->string('folder'); // Theme folder name
        $table->string('screenshot')->nullable(); // Screenshot file name
        $table->boolean('is_active')->default(false); // Active theme status
        $table->timestamps();
    });
}

Run the php artisan migrate command to apply the changes to the database.

3. Update Template Model:

  • Update the Template model in app/Template.php:
<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Template extends Model
{
    protected $fillable = ['name', 'folder', 'screenshot', 'is_active'];

    public function getThemePathAttribute()
    {
        return asset('themes/' . $this->folder);
    }
}

4. Create Middleware for Setting Active Theme:

  • Create a middleware using the command:
php artisan make:middleware SetActiveTheme

Then, update the SetThemeMiddleware.php file in app/Http/Middleware to set the active theme. The file might look like this:

<?php

namespace App\Http\Middleware;

use Closure;
use Illuminate\Support\Facades\View;
use App\Template;

class SetActiveTheme
{
    public function handle($request, Closure $next)
    {
        $activeTheme = Template::where('is_active', true)->first();

        if ($activeTheme) {
            // Pass the folder name to the view
            View::share('activeTheme', $activeTheme->folder);
        }

        return $next($request);
    }
}

5. Register the Middleware:

  • Register the new middleware in app/Http/Kernel.php:
protected $routeMiddleware = [
    // ...
    'setactivetheme' => \App\Http\Middleware\SetActiveTheme::class,
];

6. Use Middleware in Web Middleware Group:

  • Update the web middleware group in app/Http/Kernel.php to include the middleware for setting the active theme:
protected $middlewareGroups = [
    'web' => [
        // ...
        \App\Http\Middleware\SetActiveTheme::class,
    ],
    // ...
];

7. Set up Routing (Routes) File:

  • Update the routing file routes/web.php to specify the default theme:
  • use App\Template;
    
    Route::get('/', function () {
        // Use the folder name to determine the active theme
        return view('welcome', ['activeTheme' => 'default']);
    });
    

     

8. Configure the View:

  • Update the view file (welcome.blade.php or any other view) to use the activeTheme variable:
  • <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>My Laravel App</title>
        <link rel="stylesheet" href="{{ asset('themes/' . $activeTheme . '/styles.css') }}">
    </head>
    <body>
        <!-- Your content here -->
    
        <script src="{{ asset('themes/' . $activeTheme . '/script.js') }}"></script>
    </body>
    </html>
    

    9. Update the Layout View:

    • Update the layout view file (resources/views/layouts/app.blade.php or any other layout) to use the activeTheme variable:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Laravel App</title>
    <link rel="stylesheet" href="{{ asset('themes/' . $activeTheme . '/styles.css') }}">
</head>
<body>
    @yield('content')

    <script src="{{ asset('themes/' . $activeTheme . '/script.js') }}"></script>
</body>
</html>

10. Use Themes in Admin Panel:

  • To use themes in the admin panel, update its view file to utilize the activeTheme variable:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin Panel</title>
    <link rel="stylesheet" href="{{ asset('themes/' . $activeTheme . '/admin-styles.css') }}">
</head>
<body>
    @yield('content')

    <script src="{{ asset('themes/' . $activeTheme . '/admin-script.js') }}"></script>
</body>
</html>

This approach allows you to set the active theme in middleware and use it in every view or layout as needed. It effectively separates frontend and admin panel themes.

dylanu

A programmer who cares about programming matters for the web application, mobile application, and servers and their protection

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button