New in v6: How to create your own custom theme to Backpack v6

Hey devs, are you ready to create your own custom theme to Backpack v6? It's easier than you might think! Let's walk through the steps...

Hey devs, are you ready to create your own custom theme to Backpack v6? It's easier than you might think! Let's walk through the steps of building a Backpack theme using a template you got from GetBootstrap, WrapBootstrap, or ThemeForest.

Step 1: Create a View Folder

First, create a view folder anywhere in your resources/views directory. This folder will hold all the files for your new theme. For example:

mkdir resources/views/my-cool-theme

Step 2: Configure the Theme Namespace

In your config/backpack/ui.php, add the new view folder as the primary view namespace. Make sure to add a period (.) at the end of the namespace, and it should match the name of the folder created in the previous step:

'view_namespace' => 'my-cool-theme.',

Step 3: Choose and Use a Fallback Theme

To handle cases where a view doesn't exist in your custom theme, you can set up a fallback theme. This way, you only need to create views for the parts you want to customize. Edit your config/backpack/ui.php like this:

'view_namespace_fallback' => 'backpack.theme-coreuiv4::',

For beginners creating a Backpack theme for the first time, we recommend starting with our CoreUIv4 theme and using it as the fallback. If you don't have it installed, you can do composer require backpack/theme-coreuiv4.

Step 4: Create Main Blade Files

Now you're ready to create the main blade files for your theme. These files will provide your theme with its unique style and layout. Here's an example of the file structure:

- my-cool-theme/
  - layouts/
    - app.blade.php
  - widgets/
    ... (override widgets with your own)
  - components/
    ... (override components with your own)
  - assets/
    - css/
      ... (place all CSS files from your theme)
    - js/
      ... (place all JS files from your theme)
  - inc/
    styles.blade.php
    scripts.blade.php
    header.blade.php
    menu.blade.php
    footer.blade.php

Step 5: Customize Theme Files

Let's dive into the files that make your theme unique. Copy and paste content from the fallback theme as needed, and make your customizations.

my-cool-theme/inc/theme_styles.blade.php: Add all the custom CSS that your theme needs. You can load files from CDNs or from any place in your application directories.

my-cool-theme/inc/theme_scripts.blade.php: Add all the custom JS that your theme needs. You can load files from CDNs or from any place in your application directories.

my-cool-theme/layouts/default.blade.php: This will be the primary layout for your theme. It should contain the full HTML page, including the doctype declaration, head, body components, etc. Customize this layout to match your theme's look and feel.

my-cool-theme/inc/head.blade.php: There should be no need to customize this file.

my-cool-theme/inc/sidebar.blade.php: Customize the sidebar here. You can copy the main_header.blade.php from your fallback theme and paste the HTML content you want to use.

my-cool-theme/inc/main_header.blade.php: Customize the main header here. You can copy the main_header.blade.php from your fallback theme and paste the HTML content you want to use.

my-cool-theme/inc/breadcrumbs.blade.php: Most often, this won't need customization, but if needed, customize it as required.

my-cool-theme/inc/footer.blade.php: Most often, this won't need customization, but if needed, customize it as required.

my-cool-theme/inc/bottom.blade.php: There should be no need to customize this file.

And that's it! You've successfully added your own custom theme to Backpack v6. Now you can enjoy the freedom of having your own unique style in your Backpack-powered applications.

For more information and updates, check out the Docs. You can checkout the themes we already have to get a better understanding:

• 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)

Happy theming! 🎉