Sidebar Colors

We have provided multiple colors sidebar options and which seems very easy to have it. Do the below changes in the /src/components/common/ClientProviders.jsx and /src/slices/layout/reducer.js file.

Light Colors

In App.jsx dispatch(changeSidebarColor(getPreviousThemeData('dx-sidebar-colors') ?? SIDEBAR_COLOR.LIGHT))

& In reducer.js layoutSidebarColor: SIDEBAR_COLOR.LIGHT

Dark Colors

In App.jsx dispatch(changeSidebarColor(getPreviousThemeData('dx-sidebar-colors') ?? SIDEBAR_COLOR.DARK))

& In reducer.js layoutSidebarColor: SIDEBAR_COLOR.DARK

Brand Colors

In App.jsx dispatch(changeSidebarColor(getPreviousThemeData('dx-sidebar-colors') ?? SIDEBAR_COLOR.BRAND))

& In reducer.js layoutSidebarColor: SIDEBAR_COLOR.BRAND

Purple Colors

In App.jsx dispatch(changeSidebarColor(getPreviousThemeData('dx-sidebar-colors') ?? SIDEBAR_COLOR.PURPLE))

& In reducer.js layoutSidebarColor: SIDEBAR_COLOR.PURPLE

Sky Colors

In App.jsx dispatch(changeSidebarColor(getPreviousThemeData('dx-sidebar-colors') ?? SIDEBAR_COLOR.SKY))

& In reducer.js layoutSidebarColor: SIDEBAR_COLOR.SKY

Use Custom Sidebar Colors

To display sidebar content in dark mode, you can use the SIDEBAR_COLOR.DARK. You can also create your own sidebar colors by clone brand or dark or any other object from the below code and provide custom name and use the same name in the value i.e. SIDEBAR_COLOR.RED.

src/components/constants/layout.js
enum SIDEBAR_COLOR {
    LIGHT = "light",
    DARK = "dark",
    BRAND = "brand",
    PURPLE = "purple",
    SKY = "sky",
    RED = "red"
}
plugins/theme-colors/sidebarColors.js
const colors = require('tailwindcss/colors');
module.exports = {
    brand: {
        sidebar: '#477eef',
        menuTitle: '#b1c1fd',
        text: '#bdcbff',
        textHover: '#ffffff',
        textActive: '#ffffff',
        sidebarBgActive: '228, 245, 251'
    },
    dark: {
        sidebar: colors.slate[800],
        menuTitle: colors.slate[400],
        text: colors.slate[400],
        textHover: colors.slate[50],
        textActive: colors.slate[50],
        sidebarBgActive: '224, 242, 254'
    },
    purple: {
        sidebar: colors.purple[950],
        menuTitle: '#b98fd7',
        text: '#b98fd7',
        textHover: '#dfd3eb',
        textActive: '#dfd3eb',
        sidebarBgActive: '216, 180, 254'
    },
    sky: {
        sidebar: colors.sky[900],
        menuTitle: '#8ea2b5',
        text: '#8ea2b5',
        textHover: colors.sky[50],
        textActive: colors.sky[50],
        sidebarBgActive: '125, 211, 252'
    }
};
Add Custom Sidebar Color

To create a custom sidebar color, clone the brand, dark, or another color object, assign a new name, use it in the appropriate attribute, then update /src/components/constants/layout.ts by adding the new color in SIDEBAR_COLOR (e.g., Red = 'red') , and finally modify /src/slices/layout/reducer.ts to handle the new color.

plugins/theme-colors/sidebarColors.js
const colors = require('tailwindcss/colors');
module.exports = {
    brand: {
        sidebar: '#477eef',
        menuTitle: '#b1c1fd',
        text: '#bdcbff',
        textHover: '#ffffff',
        textActive: '#ffffff',
        sidebarBgActive: '228, 245, 251'
    },
    dark: {
        sidebar: colors.slate[800],
        menuTitle: colors.slate[400],
        text: colors.slate[400],
        textHover: colors.slate[50],
        textActive: colors.slate[50],
        sidebarBgActive: '224, 242, 254'
    },
    purple: {
        sidebar: colors.purple[950],
        menuTitle: '#b98fd7',
        text: '#b98fd7',
        textHover: '#dfd3eb',
        textActive: '#dfd3eb',
        sidebarBgActive: '216, 180, 254'
    },
    sky: {
        sidebar: colors.sky[900],
        menuTitle: '#8ea2b5',
        text: '#8ea2b5',
        textHover: colors.sky[50],
        textActive: colors.sky[50],
        sidebarBgActive: '125, 211, 252'
    },
    red: {
        sidebar: colors.red[900],
        menuTitle: '#8ea2b5',
        text: '#8ea2b5',
        textHover: colors.red[50],
        textActive: colors.red[50],
        sidebarBgActive: '255, 0, 0'
    }
};
Receive the latest updates directly in your inbox!

Be the first to know about new updates and exclusive discounts. No spam, just great offers!

How about

A Custom Project?

With over 7 years of experienced team, we specialize in delivering custom projects for startups, blue-chip companies, and government agencies. We have successfully completed over 250+ projects, providing tailored solutions that meet the unique needs of each client.

Hire Us
Domiex Admin & Dashboards
230+

Total Pages

5+

Layouts

11+

Application

We provide quick support withing one business day to all of our customers.

© Domiex Created & Crafted by SRBThemes.