Dashtic - Django Bootstrap 5 Admin & Dashboard Template

Note:-

Please refer Faq's page in documentation itself for queries and customization like Colors, RTL, Dark style..etc.

Dashboard
Welcome to Dashtic – Django Bootstrap 5 Admin & Dashboard Template
  • Created Date: 02/06/2022
  • Author: Spruko
  • Company: Spruko Technologies Private Limited
  • Support: support@spruko.com

Thank you for purchasing our admin template. Feel free to contact us any time. We have a dedicated team to provide you best support. If you have any queries please reach us through live chat or email : sprukotechnologies@gmail.com

If You Love Our Template Design please don't forget to rate it, Thank you.

Introduction

Dashtic - Django Bootstrap 5 Admin & Dashboard Template, with Dashtic template format, it's very easy to create a presence and grab someone's attention around the web page Because the template is built using HTML5, CSS3, Bootstrap 5 framework and with Sass. So please before you start working with the template take a quick look on the documentation so that you can easily built your website.

Template Description

Dashtic is a Django Bootstrap Admin & Dashboard Template comes with modern and minimal design. It is fully responsive, flexible, and user-friendly. Dashtic Django admin template is powered with HTML 5, SASS, & Bootstrap 5 which looks great on Desktops, Tablets, and Mobile Devices. This Template Includes 150+ HTML Pages, 50+ Plugins and more UI elements. User no need to do hard work for this template customization. We already designed it and you can easily design your website just how you like it. Advanced Form-Elements like Date pickers, form elements are included. Dashtic Django admin template comes with 100% premium quality design. Dashtic template designed by using HTML5, CSS3, Jquery, After Purchasing Dashtic template you will get HTML, CSS, Scss and JS files.

Dashtic has very clean flat user interface admin Backend design, easy customizable components and widgets.The Template comes with an awesome unique design also we ensure you can easily design admin template.

Dashtic comes with fully responsive layouts for all type of devices. Works on all major web browsers, Desktop, iPhone, iPad, Tablet and all other smart phone devices

Once you Purchase Dashtic, you will be able to get all the future updates for free.

Template Features
Vertical-menu Horizontal click menu Horizontal hover menu RTL ready
150 Plus HTML Pages Bootstrap 5 Responsive Framework Well Commented Code 24 * 7 Professional Company Support
Regular Updates 50+ Plugins 7 types of Charts Select2
About us Blog File Manager Gallery
Image-Comparision Ecommerce Pages Settings Page Blog Details
Calendar Mail Inbox 12 Types of Icon sets File upload
Message Chat Form Elements Month & Date & Year Range Pickers FormAdvanced Elements
Data Tables Lockscreen Page Error Page User Profile
Invoice Page Advanced Pricing Tables Easy to customize More Widgets
Very Easy to Create your Own Site Neat, clean and simple design W3C Validated
Minimum Requirements

  • asgiref==3.5.2
  • beautifulsoup4==4.11.1
  • Django==4.0.5
  • pip==22.0.4
  • django-htmlmin==0.11.0
  • html5lib==1.1
Installation Process of Python

In order to run Django you need to install Python by the following steps
This steps are based on Windows OS

Step1: Please visite the Official Web Site of the Python python.org

Step2: Click on the Download Python button

Step3: Now your Python setup file has downloaded

Step4: Now Right click on the Python setup file and select Run as administrator click on Yes

Step5: Please click on the Check Box Add Python to PATH. And select Customize installation option

Step6: Click on Install for all users. And click on the Install button to install python on your system

Step7: To check whether Python is installed or not type python --version in your terminal or console

Step8: The pip package is automatically installed with your python installation

Step9: To check whether pip package is installed or not type pip --version in your terminal or console

NOTE: Please follow the official web site python.org to install on Linux/UNIX OS.

SET-UP DJANGO PROJECT

  • Assuming that you have already installed python in your computer.
  • First, you need to create an environment at your project location. where, you want to create your project in your computer globally or locally by setting your project path in the terminal.
  • To create Virtualenv type python -m venv env in your terminal or console
  • Now you need to activate your Virtualenv by typing env\scripts\activate
  • You must activate your Virtualenv to download any new dependencies "locally", otherwise those dependencies will install "globally"
INSTALLATION PROCESS OF Django

Here we are using "Python Manager" to download "Django"

If you know how to create Django project you can skip this step.

  • First open command prompt in my case Example:C:\Users\ADMIN01> and type pip install django to install Django globally.
  • To check whether Django is installed or not type python -m django --version in your terminal or console
  • Now open a new command prompt and navigate to the folder where you want to create the Django project.
  • In my case Example:C:\Users\ADMIN01\Desktop\django>.
  • Now type the following command line django-admin startproject projectname and hit enter to create Django project. Here projectname is nothing but your django project folder name that you want to keep as your project name
  • Now you are sucessfully created Django project.
  • To create App or Application navigate to your django project folder Example:C:\Users\ADMIN01\Desktop\django\projectname> in your command prompt and type python manage.py startapp appname
  • Now you are sucessfully created App in your django project.
  • The project that you received will have a file called the requirements.txt file. Now go to that file location and then in your terminal type pip install -r requirements.txt
  • The above command will download all the required packages by using the requirements.txt file.
  • We have an improtant dependency or module called django-htmlmin it is used to minify the html content. You have already installed HTML_MINIFY with the help of requirements.txt file
  • By default we are disabling HTML_MINIFY module i.e., HTML_MINIFY= False if you want to enable HTML_MINIFY module please follow the root path Dashtic/settings.py in that file you will find HTML_MINIFY= False then change it into HTML_MINIFY= True
  • NOTE: If you have any further queries in installation please refer to the official website HERE

After installation run following command to get Django development server
python manage.py runserver
The Basic Structure Of Django Project

										
											├── app/
											|   ├── __pycache__/
											|   ├── migrations/
											|   ├── templates/
											|   |   ├── components/
											|   |   |   ├── layouts/	
											|   |   |   ├── base.html	
											|   |   |   ├── custom-base.html
											|   |   |   └── switcher-base.html
											|   |   └── 150+ HTML files																							
											├── Dashtic/
											├── static/
											|   └── assets/
											├── db.sqlite3
											├── gulpfile.js
											├── manage.py
											├── package-lock.json
											├── package.json
										 
									
  • First, unzip the project folder that you received from us.
  • Navigate as shown Example: F:\project folder\app\templates in that template folder will have 150+ html pages
  • Navigate as shown Example: F:\project folder\app\templates\ Open components folder there you will find base.html, custom-base.html and switcher-base.html files
  • Here base.html file is the base file for all the html pages
  • Here custom-base.html file is the base file for all custom pages ex: login.html, register.html, etc..,
  • And switcher-base.html file is the base file for switcherpage.html page
  • NOTE : By default switcher is enabled in your template, so the custom styles will not work i.e., RTL, horizontal, hover and etc..,. So if you want to enable those styles, first you need to remove or disable switcher in your template as shown in switcher section in documentation.
  • Please refer FAQ'S to activate other versions and styles like RTL, horizontal, horizontal-hover, Dark-mode, Boxed-Layout, Sidemenu-Icon. etc..,
SCSS & CSS
  • Gulp

    Gulp is a JavaScipt streaming task runner. It automate many development tasks. Using gulp you can perform tasks like running a local server, minifying code, compilation, Browser sync, optimizing images, etc... We are using gulp which allows to easily compilation of scss to css. You can read it more about it here.

Prerequisites

Please follow below steps to install and setup all prerequisites:

  • Nodejs

    Make sure to have the Node.js installed & running in your computer. If you have already installed nodejs on your computer, you can skip this step, otherwise install nodejs on your computer,

  • Gulp

    Make sure to have the Gulp installed & running in your computer. If you have already installed gulp on your computer, you can skip this step. In order to install, just run command npm install -g gulp from your terminal.

  • Gulp Variables

    After Completion of gulp Install. open gulpfile.js And install the "Declaration of gulp variables" in your command promt. In order to install, just run command
    npm install gulp,
    const sass = require('gulp-sass')(require('sass'));,
    npm install gulp-postcss,
    npm install autoprefixer,
    npm install gulp-sourcemaps,
    npm install browser-sync from your terminal.

    Make sure to have all above prerequisites installed & running in your computer. If you want to install more variables for your template, just declare the variables in gulpfile.js after that run in command promt

Installation

To setup, follow below mentioned steps:

  • Install Prerequisites

    Make sure to have all above prerequisites installed & running in your computer

  • Install Dependencies

    Open your terminal, go to your folder and enter the command npm install. This would install all required dependencies in node_modules folder.

After you finished with above steps, you can run the command to compile scss files into css: gulp

SCSS & CSS

Here we provided package.json and gulpfile.js files in your project, you just need to run npm install in your terminal in your project root path.

After compilation of download, you can compile your SCSS files into CSS files by following below procedure.

Command Description
gulp Runs the project locally, starts the development server and watches for any changes in your sass files and folders etc. The development server is accessible at http://localhost:8000.
Software Versions Used:
  • python : 3.10.2
  • Django : 4.0.5
  • pip : 22.0.4
  • asgiref : 3.5.2
  • beautifulsoup4 : 4.11.1
  • django-htmlmin : 0.11.0
  • html5lib : 1.1
  • six : 1.16.0
  • soupsieve : 2.3.2.post1
  • sqlparse : 0.4.2
  • tzdata : 2022.1
  • webencodings : 0.5.1
Over All Folder Structure

									├── app/
									|   ├── __pycache__/
									|   ├── migrations/
									|   ├── templates/
									|   |   ├── components/
									|   |   |   ├── layouts/
									|   |   |   |   ├── app-header.html	
									|   |   |   |   ├── app-header1.html	
									|   |   |   |   ├── custom-scripts.html	
									|   |   |   |   ├── custom-styles.html	
									|   |   |   |   ├── custom-switcher.html	
									|   |   |   |   ├── footer.html	
									|   |   |   |   ├── main-sidebar.html	
									|   |   |   |   ├── scripts.html	
									|   |   |   |   ├── styles.html		
									|   |   |   |   └── switcher.html	
									|   |   |   ├── base.html	
									|   |   |   ├── custom-base.html	
									|   |   |   └── switcher-base.html	
									|   |   └── 150+ HTML files
									|   ├── __init__.py
									|   ├── admin.py
									|   ├── apps.py
									|   ├── models.py
									|   ├── tests.py
									|   ├── urls.py
									|   └── views.py
									├── Dashtic/
									|   ├── __pycache__
									|   ├── __init__.py
									|   ├── asgi.py
									|   ├── settings.py
									|   ├── urls.py
									|   └── wsgi.py
									├── static
									|   └── assets
									|       ├── css
									|       ├── images
									|       ├── js
									|       ├── plugins
									|       ├── scss
									|       └── switcher
									├── db.sqlite3
									├── gulpfile
									├── manage.py
									├── package-lock.json
									└── package.json
									
SWITCHER?

If you want to add switcher to your template follow the below process.

NOTE:The switcher is different for custom pages, if you want to add switcher to the custom pages then follow the process.(Skip this process if this is not your requirement).

Chart color

NOTE: If you want to change your chart colors according to the theme colors, then follow the process.(Skip this process if this is not your requirement).

How to replace your own chart with existing chart and change colors of that particular chart in Dashboard Page ?

Note: This process is only for replace your own chart in index.html page

Step1:

Go to root path: static/assets/js/index1.js in that js file you will find a function named as index " function index1() ; " inside of that function replace the old chart js data with your new chart js data, in order to change your chart color according to your themecolor then add " myVarVal" (Ex:- myVarVal to that particular color field based on your requirement.

Step2:

Navigate to root path: static/assets/js/ and open themeColors.js in that js file you will find a function called "(function names() )" In that function you will find

// index charts if(document.querySelector('#leads') !== null){ index1(); }

Then change it's id name based on the id that you've used for your particular chart.

Ex: How do I modify the Id in the "themeColors.js" file?

    Before : " if(document.querySelector('#sales-status') !== null){ index1() ; }"

    After : " if(document.querySelector('# your chart id') !== null){ index1() ; }"

How to add your new chart and change colors of that new chart according to your themecolor in Other Pages ?

Note : This process is only for adding your new chart to other pages.(Skip this process if this is not your requirement)

If you want to change the color of your chart with respect to the themecolor you have to follow the below steps.

Step 1:

If you want to add any chart to any other page then follow the below process.

Open js file of the particular chart that you wanted to add, in that js file (for example in my case: mychart.js), and inside of that js file create a new function with " unique " name (for example in my case: myFunction() ), and then place the chart js content inside of that function.

Note: If there is more than one chart then you need to create different functions for different charts respectively.

Ex-1: myFunction1() { chart js1 content }

Ex-2:myFunction2() { chart js2 content }
Step 2:

Navigate to root path: static/assets/js/themeColors.js in that js file you will find a function called "(function names() )" In that function you will find

"if(document.querySelector('#sales-status') !== null){ index1() ; }"

Below this condition add a new condition with the "id name and function name" that you've used in your chart js (Ex: mychart.js)

Ex: " if(document.querySelector('# your chart id') !== null){ myFunction(); =>created function for the above id }"
Step 3:

If you want to change your chart (Ex: mychart.js) color according to your themecolor then follow the below process

Ex : Go to root path: static/assets/js/mychart.js in that js file you've already created a function (Ex: myFunction() ) inside of that function there are different color values based on the chart. so, if you want to change the color then add " myVarVal " value (Ex:- myVarVal )to that particular color field based on your requirement.

FAQ'S
General Style

How to Change Font Style ?

Step 1:

Go To style.scss (static/assets/scss/style.scss )

if you want to change another font-family Go to the site Google Fonts And Select One font Family and import In to style.css file

How to Select font Family

Example:

Step 2:

And paste Your Selected font-family in Style.scss i.e (root:-static/assets/scss/style.scss)

Example:

@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900");

Step 3:

And add the Your Selected font-family in _custom.scss(static/assets/scss/custom/_custom.scss)

Example:


		
															body {
																margin: 0;
																font-family: 'Roboto', sans-serif;
																font-size: 14px;
																font-weight: 400;
																line-height: 1.5;
																color: $color;
																text-align: left;
																background: #f2f6f9;
															}
			
		

NOTE : After changnig or modifying the content in SCSS files, you need to perform related GULP command. Otherwise the changes will not be applied to your template, for more understanding please refer GULP section in Documentation.

How to Change Logo ?

Go To "static/assets/images/brand" folder and replace your logo with Previous Logos within in image size. note: Please don't increase logo sizes. Replace your logo within given image size. otherwise the logo will not fit in particular place it disturbs the template design.

RTL Version & LTR Version

How to Enable RTL version?

open switcher-styles.js path:(static/assets/js/switcher-styles.js)file . and remove comments for $('body').addClass('rtl') to enable RTL version as shown in below


			/***************** RTL *********************/
			// $('body').addClass('rtl');
			/***************** RTL *********************/
			
Remove the comments to enable $('body').addClass('rtl') as shown below

			/***************** RTL *********************/
			$('body').addClass('rtl');
			/***************** RTL *********************/
			

How to Enable LTR version?

open switcher-styles.js path:(static/assets/js/switcher-styles.js)file . and remove comments for $('body').addClass('ltr') to enable LTR version as shown in below


			/***************** LTR *********************/
			// $('body').addClass('ltr');
			/***************** LTR *********************/
			
Remove the comments to enable $('body').addClass('ltr') as shown below

			/***************** LTR *********************/
			$('body').addClass('ltr');
			/***************** LTR *********************/
			
Light Theme & Dark Theme

How to Enable Darkmode?

open switcher-styles.js path:(static/assets/js/switcher-styles.js) file and remove comments for dark-mode to enable dark-theme style as shown in below



		/***************** DARK THEME *********************/
		// $('body').addClass('dark-mode');
		/***************** Dark THEME *********************/
		
		
Remove the comments to enable dark-mode as shown below

		
		/***************** DARK THEME *********************/
			$('body').addClass('dark-mode');
		/***************** Dark THEME *********************/
		
		

How to Enable Light theme?

open switcher-styles.js path:(static/assets/js/switcher-styles.js) file and remove comments for light-theme to enable light-theme style as shown in below


			
		/***************** Light THEME *********************/
		// $('body').addClass('light-theme');
		/***************** Light THEME *********************/
		
		
Remove the comments to enable light-theme as shown below

		/***************** Light THEME *********************/
		$('body').addClass('light-theme');
		/***************** Light THEME *********************/
		
		
Header Styles

How to Enable Color-header?

open switcher-styles.js path:(static/assets/js/switcher-styles.js) file and remove comments for color-header to enable color-header style as shown in below


		
		/**Color-Header**/
		// $('body').addClass('color-header');
		/**Color-Header**/
		
		
Remove the comments to enable color-header as shown below

		
		/**Color-Header**/
			$('body').addClass('color-header');
		/**Color-Header**/
		

How to Enable Dark-header?

open switcher-styles.js path:(static/assets/js/switcher-styles.js) file and remove comments for dark-header to enable dark-header style as shown in below


		/**Dark-Header**/
		// $('body').addClass('dark-header');
		/**Dark-Header**/
		
Remove the comments to enable dark-header as shown below

		/**Dark-Header**/
			$('body').addClass('dark-header');
		/**Dark-Header**/
		

How to Enable Light-header?

open switcher-styles.js path:(static/assets/js/switcher-styles.js) file and remove comments for light-header to enable light-header style as shown in below


		/**Light-Header**/
		// $('body').addClass('light-header');
		/**Light-Header**/
		
Remove the comments to enable light-header as shown below

		/**Light-Header**/
			$('body').addClass('light-header');
		/**Light-Header**/
		
Menu Styles

How to Enable Light Menu?

open switcher-styles.js path:(static/assets/js/switcher-styles.js) file and remove comments for light-menu to enable light-menu style as shown in below


		/**Light-menu**/
		// $('body').addClass('light-menu');
		/**Light-menu**/
		
Remove the comments to enable light-menu as shown below

		/**Light-menu**/
			$('body').addClass('light-menu');
		/**Light-menu**/
		

How to Enable Color Menu?

open switcher-styles.js path:(static/assets/js/switcher-styles.js) file and remove comments for color-menu to enable color-menu style as shown in below


		/**Color-menu**/
		// $('body').addClass('color-menu');
		/**Color-menu**/
		
Remove the comments to enable color-menu as shown below

		/**Color-menu**/
			$('body').addClass('color-menu');
		/**Color-menu**/
		

How to Enable Dark Menu?

open switcher-styles.js path:(static/assets/js/switcher-styles.js)file and remove comments for dark-menu to enable dark-menu style as shown in below


		/**Dark-menu**/
		// $('body').addClass('dark-menu');
		/**Dark-menu**/
		
Remove the comments to enable dark-menu as shown below

		/**Dark-menu**/
		 $('body').addClass('dark-menu');
		/**Dark-menu**/
		
Switcher Styles

How to Enable Boxed-Layout?

open switcher-styles.js path:(static/assets/js/switcher-styles.js)file and remove comments for layout-boxed to enable layout-boxed style as shown in below


			//Boxed Layout Style
			if (!localStorage.getItem('dashticfullwidth') && !localStorage.getItem('dashticboxedwidth')) {
			// $('body').addClass('layout-boxed');
			}
			
Remove the comments to enable layout-boxed as shown below

			//Boxed Layout Style
			if (!localStorage.getItem('dashticfullwidth') && !localStorage.getItem('dashticboxedwidth')) {
			$('body').addClass('layout-boxed');
			}
			

How to Enable Scrollable-Layout?

open switcher-styles.js path:(static/assets/js/switcher-styles.js) file and remove comments for scrollable-layout to enable scrollable-layout style as shown in below


			//Scrollable-Layout Style
			if (!localStorage.getItem('dashticfixed') && !localStorage.getItem('dashticscrollable')) {
			// $('body').addClass('scrollable-layout');
			}
			
Remove the comments to enable scrollable-layout as shown below

			//Scrollable-Layout Style
			if (!localStorage.getItem('dashticfixed') && !localStorage.getItem('dashticscrollable')) {
			$('body').addClass('scrollable-layout');
			}
			

How to Enable Body Style?

open switcher-styles.js path:(static/assets/js/switcher-styles.js) file and remove comments for body-style1 to enable body-style style as shown in below


			//Body Style
			if (!localStorage.getItem('dashticdefaultbody') && !localStorage.getItem('dashticbodystyle')) {
			// $('body').addClass('body-style1');
			}
			
Remove the comments to enable body-style1 as shown below

			//Body Style
			if (!localStorage.getItem('dashticdefaultbody') && !localStorage.getItem('dashticbodystyle')) {
				$('body').addClass('body-style1');
			}
			
Vertical Menu Styles

How to Enable Sidemenu-Icon-with Text?

open switcher-styles.js path:(static/assets/js/switcher-styles.js) file and remove comments for icontext-menu to enable icontext-menu style as shown in below


															
			/**Icon-Text-Menu**/
			// $('body').addClass('icontext-menu');
			/**Icon-Text-Menu**/
		
			
Remove the comments to enable icontext-menu as shown below

															
			/**Icon-Text-Menu**/
			$('body').addClass('icontext-menu');
			/**Icon-Text-Menu**/
		
			

How to Enable Closed-Menu?

open switcher-styles.js path:(static/assets/js/switcher-styles.js) file and remove comments for closed-menu to enable closed menu style as shown in below


			/**closed-Menu**/
			// $('body').addClass('closed-menu');
			/**closed-Menu**/
			
Remove the comments to enable closed-menu as shown below

			/**closed-Menu**/
			$('body').addClass('closed-menu');
			/**closed-Menu**/
			

How to Enable Icon Overlay

open switcher-styles.js path:(static/assets/js/switcher-styles.js) file and remove comments for sideicon-menu to enable Icon Overlay style as shown in below


			/**Icon-Overlay-Menu**/
			// $('body').addClass('sideicon-menu');
			/**Icon-Overlay-Menu**/
			
Remove the comments to enable sideicon-menu as shown below

			/**Icon-Overlay-Menu**/
			$('body').addClass('sideicon-menu');
			/**Icon-Overlay-Menu**/
			

How to Enable Hover Submenu

open switcher-styles.js path:(static/assets/js/switcher-styles.js) file and remove comments for Hover Submenu to enable Hover submenu style as shown in below


			/**Hover-Sub-Menu**/
			// $('body').addClass('hover-submenu');
			/**Hover-Sub-Menu**/
			
Remove the comments to enable Hover Submenu as shown below

			/**Hover-Sub-Menu**/
				$('body').addClass('hover-submenu');
			/**Hover-Sub-Menu**/
			

How to Enable Hover Submenu style1

open switcher-styles.js path:(static/assets/js/switcher-styles.js) file and remove comments for Hover Submenu Style1 to enable Hover submenu style1 style as shown in below


			/**Hover-Sub-Menu1**/
			// $('body').addClass('hover-submenu1');
			/**Hover-Sub-Menu1**/
			
Remove the comments to enable Hover Submenu Style1 as shown below

			/**Hover-Sub-Menu1**/
			$('body').addClass('hover-submenu1');
			/**Hover-Sub-Menu1**/
			
Horizontal Click & Horizontal Hover styles

How to Enable Horizontal layout

open switcher-styles.js path:(static/assets/js/switcher-styles.js) file and remove comments for Horizontal layout to enable Horizontal layout style as shown in below


			/***************** Horizontal THEME *********************/
			// $('body').addClass('horizontal');
			/***************** Horizontal THEME *********************/
			
Remove the comments to enable Horizontal layout as shown below

			/***************** Horizontal THEME *********************/
			$('body').addClass('horizontal');
			/***************** Horizontal THEME *********************/
			

How to Enable Horizontal Hover layout

open switcher-styles.js path:(static/assets/js/switcher-styles.js) file and remove comments for Horizontal Hover layout to enable Horizontal Hover layout style as shown in below


			/***************** Horizontal-Hover THEME *********************/
			// $('body').addClass('horizontal-hover');
			/***************** Horizontal-Hover THEME *********************/
			
Remove the comments to enable Horizontal Hover layout as shown below

			/***************** Horizontal-Hover THEME *********************/
				$('body').addClass('horizontal-hover');
			/***************** Horizontal-Hover THEME *********************/
			
Primary Color

How to Change Primary Color?

Please follow the bellow steps to change Primary Color
Step 1 :

To change Primary Color you have to open _custom.scss file and replace what color you want as shown in below

Rootpath : _custom.scss (static/assets/scss/custom/_custom.scss )

NOTE : After changnig or modifying the content in SCSS files, you need to perform related GULP command. Otherwise the changes will not be applied to your template, for more understanding please refer GULP section in Documentation.

Light Theme Style

How to Change Light Background Color?

Please follow the bellow steps to change Light Background Color
Step 1 :

To change Light Background Color you have to open _variables.scss file and replace what color you want as shown in below

Rootpath : _variables.scss (static/assets/scss/_variables.scss )

NOTE : After changnig or modifying the content in SCSS files, you need to perform related GULP command. Otherwise the changes will not be applied to your template, for more understanding please refer GULP section in Documentation.

How to Change Light Text Color?

Please follow the bellow steps to change Light Text Color
Step 1 :

To change Light Text Color you have to open _variables.scss file and replace what color you want as shown in below

Rootpath : _variables.scss (static/assets/scss/_variables.scss )

NOTE : After changnig or modifying the content in SCSS files, you need to perform related GULP command. Otherwise the changes will not be applied to your template, for more understanding please refer GULP section in Documentation.

How to Change Light Border Color?

Please follow the below steps to change Light Border Color
Step 1 :

To change Light Border Color you have to open _variables.scss file and replace what color you want as shown in below

Rootpath : _variables.scss (static/assets/scss/_variables.scss )

NOTE : After changnig or modifying the content in SCSS files, you need to perform related GULP command. Otherwise the changes will not be applied to your template, for more understanding please refer GULP section in Documentation.

Dark Theme Style

How to Change Dark body Color?

Please follow the bellow steps to change Dark body Color
Step 1 :

To change Dark body Color you have to open _custom.scss file and replace what color you want as shown in below

Rootpath : _custom.scss (static/assets/scss/custom/_custom.scss )

NOTE : After changnig or modifying the content in SCSS files, you need to perform related GULP command. Otherwise the changes will not be applied to your template, for more understanding please refer GULP section in Documentation.

How to Change Dark Theme Color?

Please follow the bellow steps to change Dark Theme Color
Step 1 :

To change Dark Theme Color you have to open _custom.scss file and replace what color you want as shown in below

Rootpath : _custom.scss (static/assets/scss/custom/_custom.scss )

NOTE : After changnig or modifying the content in SCSS files, you need to perform related GULP command. Otherwise the changes will not be applied to your template, for more understanding please refer GULP section in Documentation.

How to Change Dark default Color ,border color ,and shadow color?

Please follow the below steps to change Dark default Color ,border color ,and shadow color
Step 1 :

To change Dark default Color ,border color ,and shadow color you have to open _custom.scss file in scss folder and replace what color you want as shown in below

Rootpath : _custom.scss (static/assets/scss/custom/_custom.scss )

NOTE : After changnig or modifying the content in SCSS files, you need to perform related GULP command. Otherwise the changes will not be applied to your template, for more understanding please refer GULP section in Documentation.

THANK YOU!