How to build a theme-picker for Backpack admin panel.

As a developer who uses Backpack, choosing a different theme is easy. But you can also... let your users change the theme! In fact, we...

Karan Datwani

Published on 10 December 2023 in Tutorials

Share:

• 
• 

As a developer who uses Backpack, choosing a different theme is easy. But you can also... let your users change the theme! In fact, we do that in our online demo.

We've heard from people who want to setup a similar feature in their projects. It's pretty straightforward to create a simple theme picker!

How it works?

For a theme-picker, we will create:

• a dropdown to select the theme;

• a route to remember the theme in a session;

• a middleware that uses that session to change themes;

Setup a dropdown menu to select theme.

In this example, we will place a dropdown menu on the right side of the navbar via resources/views/vendor/backpack/{theme}/inc/topbar_right_content.blade.php blade file.

We need to create theme selection menu inside each theme directory, to display in every theme. For example:

theme-tabler path: resources/views/vendor/backpack/theme-tabler/inc/topbar_right_content.blade.php

theme-coreuiv4 path: resources/views/vendor/backpack/theme-coreuiv4/inc/topbar_right_content.blade.php

Dropdown menu:

<div class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" style="cursor: pointer">
        @switch(config('backpack.ui.view_namespace'))
            @case('backpack.theme-tabler::')
                Tabler
            @break
            @case('backpack.theme-coreuiv4::')
                Core UI v4
            @break
            @case('backpack.theme-coreuiv2::')
                Core UI v2
            @break
            @default
                Tabler
        @endswitch
    </a>
    <ul class="dropdown-menu dropdown-menu-end" style="right: 0">
        <li>
            <a class="dropdown-item" href="{{ route('tabler.switch.theme', ['theme' => 'tabler']) }}">Tabler</a>
        </li>
        <li>
            <a class="dropdown-item" href="{{ route('tabler.switch.theme', ['theme' => 'coreuiv4']) }}">Core UI v4</a>
        </li>
        <li>
            <a class="dropdown-item" href="{{ route('tabler.switch.theme', ['theme' => 'coreuiv2']) }}">Core UI v2</a>
        </li>
    </ul>
</div>

Remember to make the selection UI compatible with the theme's bootstrap version. The above dropdown code works for Bootstrap 5 themes.

Route for theme change request.

Now let's setup the route where we pass the theme and push it into session.

//routes\backpack\custom.php

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Redirect;
use Illuminate\Support\Facades\Session;

Route::post('switch-theme', function (Request $request) {
    $theme = 'backpack.theme-'.$request->get('theme', 'tabler').'::';
    Session::get('backpack.ui.view_namespace', $theme);

    return Redirect::back();

})->name('tabler.switch.theme');

Middleware to set/change themes.

Create a middleware app\Http\Middleware\Theme.php, which gets the current theme from the session & sets the current theme at runtime via config.

<?php

namespace App\Http\Middleware;

use Closure;
use Illuminate\Support\Facades\Config;
use Illuminate\Support\Facades\Session;

class Theme{

    public function handle($request, Closure $next): mixed{
        // Set theme if it exists
        if (Session::has('backpack.ui.view_namespace')) {
            Config::set('backpack.ui.view_namespace', Session::get('backpack.ui.view_namespace'));
        }

        return $next($request);
    }
}

Remember to add our middleware in app\Http\Kernel.php:

$middlewareGroups = [...
'web' => [...
        \App\Http\Middleware\Theme::class,
    ]
]

Done! We've let the user have the choice.

Thanks for reading this far! With this implementation, your admin panel can have a functional theme-picker. Feel free to expand on this foundation and customize it to suit your specific needs.

Happy Coding!