Sidebar Colors

We have provided multiple variant options for the sidebar, making it very easy to customize. You need to change the attribute in the public/assets/js/layout/layout-*.js file to switch between different sidebar color variations.

Step 1: Use a Predefined Sidebar Variation

To change the sidebar variation, modify the [ATTRIBUTES.SIDEBAR] attribute in the configuration file located at public/assets/js/layout/layout-*.js:

• Light Sidebar: 'light-sidebar'
• Dark Sidebar: 'dark-sidebar'
• Gradient Sidebar: 'gradient-sidebar'

Step 2: Modify Custom Sidebar Colors

To customize the sidebar colors, you need to modify the specific variation file (e.g., `light-sidebar`, `dark-sidebar`, or `gradient-sidebar`). This is where the sidebar’s background, text, and other color-related styles are defined.

Locate the variation file in the public/assets/js/layout/ directory and adjust the CSS styles or color variables according to your needs.

Step 3: Example Configuration Code

Here's an example of how to set the default sidebar variation in the JavaScript configuration file:

const ATTRIBUTES = {
    SIDEBAR: 'data-sidebar',
};

const DEFAULT_VALUES = {
    [ATTRIBUTES.SIDEBAR]: 'dark-sidebar', // 'light-sidebar', 'dark-sidebar', 'gradient-sidebar'
};

Additional Notes:

• Light Sidebar: Typically used for lighter themes and brighter background colors.
• Dark Sidebar: Best suited for dark mode or darker themes with dark background colors.
• Gradient Sidebar: Adds a visually appealing gradient effect to the sidebar for a more dynamic look.

By following these steps, you can easily switch between sidebar themes or modify the sidebar's colors to fit your requirements.