New in v6: How to change themes in Backpack v6

Hey there! In Backpack v6, we introduced themes so that you can add a bit of personality to your admin panels! Changing themes is a bre...

Karan Datwani
Karan Datwani
Share:

Hey there! In Backpack v6, we introduced themes so that you can add a bit of personality to your admin panels! Changing themes is a breeze ‚Äď you can do it within a couple of minutes, and we've got three fantastic new themes to choose from.

How to use themes:

Each theme is a separate Composer package containing blade files that Backpack uses to display the interface to its admins. At this moment, we have three ready-to-use themes for you to pick from:

  • Tabler - based on Boostrap v5 and has dark mode support
  • CoreUIv4 - also based on Bootstrap v5 & CoreUIv4
  • CoreUIv2 - the legacy one based on Bootrap v4 (still has IE support)

Install & use

To switch to a different theme, first you'll need to install it like below:

composer require backpack/theme-tabler

Then you'll need to tell Backpack to use the new theme. Backpack checks the configuration in config/backpack/ui.php. In this file, get to the section with view_namespace and make sure you override it with this:

    'view_namespace'          => 'backpack.theme-tabler::',
    'view_namespace_fallback' => 'backpack.theme-tabler::',

Here's the deal:

  • To specify a new theme, change the view_namespace setting. You can even point to a local view directory if you wish.
  • The view_namespace_fallback setting serves as a fallback mechanism. If a view isn't found in the first namespace, Backpack looks in this fallback namespace.

That's it! Reload your browser and you should have the new theme working.

Theme Configs:

Each theme can also provide its own config file, so you may:

  • publish theme config php artisan vendor:publish --tag="theme-tabler-config"
  • modify config/backpack/{theme-config}.php to set layouts, classes, etc

Through its own config files, themes allow you to make it the best fit for your project.

Creating a New Theme:

Creating a new theme for your Backpack project is much easier. Follow this link for details: https://backpackforlaravel.com/docs/6.x/add-ons-tutorial-how-to-create-a-theme.

That's it for themes in Backpack v6! Choose the one that suits your project's needs, and enjoy the flexibility and power of the new theming system.

Happy theming! ūüé®

Want to receive more articles like this?

Subscribe to our "Article Digest". We'll send you a list of the new articles, every week, month or quarter - your choice.

Reactions & Comments

What do you think about this?

Latest Articles

Wondering what our community has been up to?