Sneat 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.
theme-raspberry.scss
and theme-raspberry-dark.scss
inside src/scss/
and src/scss/rtl
folder.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.
<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.
// 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'
}
];
TEMPLATE_CONFIG = {
...
"theme": "theme-raspberry",
...
}
Now, How to add variables, styles & mixins to theme scss file.
$primary-color
variable with basic includes like below// 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);
@include template-navbar-style('.bg-navbar-theme', BACKGROUND_COLOR, $color: TEXT_COLOR, $active-color: ACTIVE_TEXT_COLOR, $border: BORDER_COLOR);
@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);
@include template-footer-style('.bg-footer-theme', BACKGROUND_COLOR, $color: TEXT_COLOR, $active-color: ACTIVE_TEXT_COLOR, $border: BORDER_COLOR);
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
Follow bellow step to update Django version in your current project.
requirements.txt
.Django==4.2.5 ==> Django==5.0
FROM python:3.9 ==> FROM python:3.12
settings.py
in line with Django5, you can create a new project and compare its settings.py
with your existing project's configuration.