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: /src/config.ts

2. CustomizerContext.ts Path: /src/stores/customizer.ts

3. Customizer.vue Path: /src/layouts/full/customizer/Customizer.vue

1. How to set default settings ?

                            
// ----------------------------------------------------
// File:  /src/config.ts
// ----------------------------------------------------

const config : ConfigProps = {
Sidebar_drawer: null, 
Customizer_drawer: false,
mini_sidebar: false,
setHorizontalLayout: false,   //  Horizontal layout
setRTLLayout: false,  //  RTL layout
actTheme: "BLUE_THEME",
boxed:true,
setBorderCard: false,
themeMode: "light", // light / dark
borderRadius: 8,
};

                          
                      

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

                            
// ----------------------------------------------------
// File:  /src/config.ts
// ----------------------------------------------------

const config : ConfigProps = {
Sidebar_drawer: "null", 
Customizer_drawer: false,
mini_sidebar: false,
setHorizontalLayout: false,  
setRTLLayout: false, // Change is here 
actTheme: "BLUE_THEME",
boxed:true,
setBorderCard: false,
themeMode: "dark",
borderRadius: 8,
};
                          
                      

3. How to set Dark theme ?

                            
// ----------------------------------------------------
// File:  /src/config.ts
// ----------------------------------------------------

const config : ConfigProps = {
Sidebar_drawer: null, 
Customizer_drawer: false,
mini_sidebar: false,
setHorizontalLayout: false,  
setRTLLayout: false,
actTheme: "BLUE_THEME",
boxed:true,
setBorderCard: false,
themeMode: "dark", // Change is here 
borderRadius: 8,
};
                          
                      

4. How to change color theme ?

                            
// ----------------------------------------------------
// File:  /src/config.ts
// ----------------------------------------------------

const config : ConfigProps = {
Sidebar_drawer: null, 
Customizer_drawer: false,
mini_sidebar: false,
setHorizontalLayout: false,  
setRTLLayout: false, 
actTheme: "BLUE_THEME", // change is here GREEN_THEME, BLUE_THEME, BROWN_THEME,  TEAL_THEME, VIOLET_THEME, LAVENDER_THEME
boxed:true,
setBorderCard: false,
themeMode: "light",
borderRadius: 8,
};

                          
                      

5. How to set Horizontal layout ?

                            
// ----------------------------------------------------
// File:  /src/config.ts
// ----------------------------------------------------

const config : ConfigProps = {
Sidebar_drawer: null, 
Customizer_drawer: false,
mini_sidebar: false,
setHorizontalLayout: true,   //   change is here
setRTLLayout: false, 
actTheme: "BLUE_THEME",
boxed:true,
setBorderCard: false,
themeMode: "light",
borderRadius: 8,
};

                          
                      

6. How to set Fullwidth layout ?

                            
// ----------------------------------------------------
// File:  /src/config.ts
// ----------------------------------------------------

const config : ConfigProps = {
Sidebar_drawer: null, 
Customizer_drawer: false,
mini_sidebar: false,
setHorizontalLayout: false, 
setRTLLayout: false, 
actTheme: "BLUE_THEME",
boxed: false , // change here
setBorderCard: false,
themeMode: "light",
borderRadius: 8,
};

                          
                      

7. How to set Boxed layout ?

                            
// ----------------------------------------------------
// File:  /src/config.ts
// ----------------------------------------------------

const config : ConfigProps = {
Sidebar_drawer: null, 
Customizer_drawer: false,
mini_sidebar: false,
setHorizontalLayout: false, 
setRTLLayout: false, 
actTheme: "BLUE_THEME",
boxed: true , // change here
setBorderCard: false,
themeMode: "light",
borderRadius: 8,
};

                          
                      

8. How to set Minisidebar ?

                            
// ----------------------------------------------------
// File:  /src/config.ts
// ----------------------------------------------------

const config : ConfigProps = {
Sidebar_drawer: null, 
Customizer_drawer: false,
mini_sidebar: true, // change here
setHorizontalLayout: false, 
setRTLLayout: false, 
actTheme: "BLUE_THEME",
boxed: true ,
setBorderCard: false,
themeMode: "light",
borderRadius: 8,
};

                          
                      

9. How to set card with shadow ?

                            
// ----------------------------------------------------
// File:  /src/config.ts
// ----------------------------------------------------

const config : ConfigProps = {
Sidebar_drawer: null, 
Customizer_drawer: false,
mini_sidebar: true,
setHorizontalLayout: false, 
setRTLLayout: false, 
actTheme: "BLUE_THEME",
boxed: true ,
setBorderCard: false , // change here
themeMode: "light",
borderRadius: 8,
};

                          
                      

10. How to set card with border ?

                            
// ----------------------------------------------------
// File:  /src/config.ts
// ----------------------------------------------------

const config : ConfigProps = {
Sidebar_drawer: null, 
Customizer_drawer: false,
mini_sidebar: true,
setHorizontalLayout: false, 
setRTLLayout: false, 
actTheme: "BLUE_THEME",
boxed: true ,
setBorderCard: true , // change here
themeMode: "light",
borderRadius: 8,
};

                          
                      

11. How to set theme border radius ?

                            
// ----------------------------------------------------
// File:  /src/config.ts
// ----------------------------------------------------

const config : ConfigProps = {
Sidebar_drawer: null, 
Customizer_drawer: false,
mini_sidebar: true,
setHorizontalLayout: false, 
setRTLLayout: false, 
actTheme: "BLUE_THEME",
boxed: true ,
setBorderCard: true ,
themeMode: "light",
borderRadius: 8, // change here
};