Materio admin template comes with unique feature to create custom theme. So user can easily integrate template with their own choice & requirements.

To create custom theme, you need to create scss files that contains variables, custom scss and primary color variable of the theme. It's required to set $primary-color variable to use base primary color for custom theme.

Let's say, if you want to create your own custom theme named as raspberry, follow steps below.

1. First of all, create custom theme scss files, like theme-raspberry.scss and theme-raspberry-dark.scss inside src/scss/ and src/scss/rtl folder.
Important: Make sure to clear browser cache and local storage.
2. You have to add your new theme css and name in scripts_includes.html and template-customizer.js to add theme option in Template Customizer.

You can find scripts_includes.html file in templates/layout/partials/ folder.

Copy

<script>
if (typeof TemplateCustomizer !== 'undefined') {
  window.templateCustomizer = new TemplateCustomizer({
    cssPath: '',
    themesPath: '',
    defaultStyle: "{{style}}", // Required as system style can't decided without JS
    defaultShowDropdownOnHover : {{show_dropdown_onhover_value}},
    lang: '{{LANGUAGE_CODE}}',
    pathResolver: function(path) {
      var resolvedPaths = {
        // Core stylesheets
        'core.css': "{% static 'vendor/css' %}{{rtl_support|yesno:'/rtl,'}}/core.css",
        'core-dark.css': "{% static 'vendor/css' %}{{rtl_support|yesno:'/rtl,'}}/core-dark.css",

        'theme-default.css': "{% static 'vendor/css' %}{{rtl_support|yesno:'/rtl,'}}/theme-default.css",
        'theme-default-dark.css': "{% static 'vendor/css' %}{{rtl_support|yesno:'/rtl,'}}/theme-default-dark.css",

        'theme-bordered.css': "{% static 'vendor/css' %}{{rtl_support|yesno:'/rtl,'}}/theme-bordered.css",
        'theme-bordered-dark.css': "{% static 'vendor/css' %}{{rtl_support|yesno:'/rtl,'}}/theme-bordered-dark.css",

        'theme-semi-dark.css': "{% static 'vendor/css' %}{{rtl_support|yesno:'/rtl,'}}/theme-semi-dark.css",
        'theme-semi-dark-dark.css': "{% static 'vendor/css' %}{{rtl_support|yesno:'/rtl,'}}/theme-semi-dark-dark.css",

        'theme-raspberry.css': "{% static 'vendor/css' %}{{rtl_support|yesno:'/rtl,'}}/theme-raspberry.css",
        'theme-raspberry-dark.css': "{% static 'vendor/css' %}{{rtl_support|yesno:'/rtl,'}}/theme-raspberry-dark.css"

      }
      return resolvedPaths[path] || path;
    },
    controls: {{ customizer_controls | safe }},
  });
}
</script>

You can find template-customizer.js file in src/js/ folder.

Copy

// Themes
TemplateCustomizer.THEMES = [
  {
    name: 'theme-default',
    title: 'Default'
  },
  {
    name: 'theme-semi-dark',
    title: 'Semi Dark'
  },
  {
    name: 'theme-bordered',
    title: 'Bordered'
  },
  {
    name: 'theme-raspberry',
    title: 'Raspberry'
  }
];

3. Now, you can set your newly created theme to config/templates.py.
Copy

TEMPLATE_CONFIG = {
  ...
  "theme": "theme-raspberry",
  ...
}

Now, How to add variables, styles & mixins to theme scss file.

• To use declared variables & mixins, Theme requires to include library, pages, variable files.
• Theme requires primary color variable to update color as require. So need to add $primary-color variable with basic includes like below
Copy

// Component variables include
@import './_components/include';
@import './_theme/common';
@import './_theme/libs';
@import './_theme/pages';

$primary-color: #e30b5c;

// To update color to custom theme's primary color
@include template-common-theme($primary-color);
@include template-libs-theme($primary-color);
@include template-pages-theme($primary-color);

• After applying primary color for each library, components & pages, To update navbar, You can add custom style after including mixin as below :
Copy

@include template-navbar-style('.bg-navbar-theme', BACKGROUND_COLOR, $color: TEXT_COLOR, $active-color: ACTIVE_TEXT_COLOR, $border: BORDER_COLOR);

• To update menu, You can add custom style after including mixin as below :
Copy

@include template-menu-style('.bg-menu-theme',BACKGROUND_COLOR, $color: TEXT_COLOR, $active-color: ACTIVE_TEXT_COLOR, $border: BORDER_COLOR, $active-bg: ACTIVE_BACKGROUND_COLOR);

• To update footer, You can add custom style after including mixin as below :
Copy

@include template-footer-style('.bg-footer-theme', BACKGROUND_COLOR, $color: TEXT_COLOR, $active-color: ACTIVE_TEXT_COLOR, $border: BORDER_COLOR);

• You can also add style that should work for custom theme only.
• That's All!!

It's only recommended to use template without customizer, if you wish to configure themes, layouts and other customizations by changing custom options from config/templates.py file.

We have provided template with customizer, So user can check all the layout options and it's classes and can get idea about all the possibilities.

But before deployment, you might not required this customizer. Then you can check below options :

Option 1: If you want to remove customizer and also not required LocalStorage, then you can use has_customizer option in config/templates.py file

If you set this option to false, it will remove customizer, template customizer js and initialization script as well.

TEMPLATE_CONFIG = {
  ...
  'has_customizer' => false,
  ...
}

Option 2: If you want to hide customizer and you need LocalStorage to store data like menuCollapse, light/dark layout, etc.., then you can use display_customizer option from config/templates.py file

If you set this option to false, it will hide customizer and won't remove/hide template customizer js.

TEMPLATE_CONFIG = {
  ...
  "display_customizer": False,
  ...
}

If you have multiple migration file such has below.

apps
└── 📂 test
    └── 📂 migrations
        ├── 📄 0001_initial.py
        ├── 📄 0002_auto_20210901_0000.py
        └── 📄 0003_auto_20210901_0001.py
      

You can delete migrations folder/files and run following command in the terminal. This will remove other instance and create only one file.

python manage.py makemigrations app_name
python manage.py migrate