Customizer Usage

The Customizer enables you and your customers to modify the primary colors, themes, skins, layout options, and overall appearance of the template in real time.

While we recommend using this for enhanced customization, its use is entirely optional. Please review both scenarios carefully to understand its usage and benefits.

Note :

You must have below files in your project :

1. config.ts Path: main/src/context/config.ts

2. CustomizerContext.tsx Path: main/src/context/CustomizerContext.tsx

3. Customizer.tsx Path: main/src/layouts/full/shared/customizer/Customizer.tsx

1. How to set default settings ?

                            
// ----------------------------------------------------
// File: src/redux/customizer/Reducer.js
// ----------------------------------------------------

const INIT_STATE = {
activeDir: "ltr",
activeNavbarBg: "#0b70fb", // This can be any color,
activeSidebarBg: "#ffffff", // This can be any color
activeMode: "light", // This can be light or dark
activeTheme: "BLUE_THEME", // BLUE_THEME, GREEN_THEME, RED_THEME, BLACK_THEME, PURPLE_THEME, INDIGO_THEME
SidebarWidth: 240,
};

                    
                

2. How to set right-to-left (RTL) settings ?

                            
// ----------------------------------------------------
// File: src/redux/customizer/Reducer.js
// ----------------------------------------------------

const INIT_STATE = {
activeDir: "rtl", // Change is here
activeNavbarBg: "#0b70fb", 
activeSidebarBg: "#ffffff",  
activeMode: "light",  
activeTheme: "BLUE_THEME",
SidebarWidth: 240,
}; 
                    
                

3. How to set Dark theme ?

                            
// ----------------------------------------------------
// File: src/redux/customizer/Reducer.js
// ----------------------------------------------------
const INIT_STATE = {
  activeDir: "ltr", 
  activeNavbarBg: "#0b70fb", 
  activeSidebarBg: "#ffffff",  
  activeMode: "dark",  // Change is here
  activeTheme: "BLUE_THEME",
  SidebarWidth: 240,
}; 
                            
                        

4. How to change color theme ?

                            
// ----------------------------------------------------
// File: src/redux/customizer/Reducer.js
// ----------------------------------------------------

const INIT_STATE = {
  activeDir: "ltr", 
  activeNavbarBg: "#0b70fb", 
  activeSidebarBg: "#ffffff", 
  activeMode: "dark",
  // BLUE_THEME, GREEN_THEME, RED_THEME, BLACK_THEME, PURPLE_THEME, INDIGO_THEME
  activeTheme: "RED_THEME", // Change is here // You can  use any of above theme
  SidebarWidth: 240,
};