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...
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!
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;
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.
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');
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,
]
]
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!
Subscribe to our "Article Digest". We'll send you a list of the new articles, every week, month or quarter - your choice.
What do you think about this?
Wondering what our community has been up to?