Primary Colors

We have provided multiple colors set so it will be easy to use for customers as well as designers to change quickly. Here we go to set default color theme ( Green, Violet, Orange, Teal, Fuchsia etc) to default on load the project. Do the below changes in the /src/components/common/ClientProviders.tsx and /src/slices/layout/reducer.ts file. Make sure to click on Reset Layouts button in order to apply the changes.

Default Colors

In ClientProviders.tsx dispatch(changeDataColor(getPreviousThemeData('dx-theme-color') ?? DATA_COLORS.DEFAULT))

& In reducer.ts layoutDataColor: DATA_COLORS.DEFAULT

Green Colors

In ClientProviders.tsx dispatch(changeDataColor(getPreviousThemeData('dx-theme-color') ?? DATA_COLORS.GREEN))

& In reducer.ts layoutDataColor: DATA_COLORS.GREEN

Violet Colors

In ClientProviders.tsx dispatch(changeDataColor(getPreviousThemeData('dx-theme-color') ?? DATA_COLORS.VIOLET))

& In reducer.ts layoutDataColor: DATA_COLORS.VIOLET

Orange Colors

In ClientProviders.tsx dispatch(changeDataColor(getPreviousThemeData('dx-theme-color') ?? DATA_COLORS.ORANGE))

& In reducer.ts layoutDataColor: DATA_COLORS.ORANGE

Teal Colors

In ClientProviders.tsx dispatch(changeDataColor(getPreviousThemeData('dx-theme-color') ?? DATA_COLORS.TEAL))

& In reducer.ts layoutDataColor: DATA_COLORS.TEAL

Fuchsia Colors

In ClientProviders.tsx dispatch(changeDataColor(getPreviousThemeData('dx-theme-color') ?? DATA_COLORS.FUCHSIA))

& In reducer.ts layoutDataColor: DATA_COLORS.FUCHSIA

Lime Colors

In ClientProviders.tsx dispatch(changeDataColor(getPreviousThemeData('dx-theme-color') ?? DATA_COLORS.LIME))

& In reducer.ts layoutDataColor: DATA_COLORS.LIME

Amber Colors

In ClientProviders.tsx dispatch(changeDataColor(getPreviousThemeData('dx-theme-color') ?? DATA_COLORS.AMBER))

& In reducer.ts layoutDataColor: DATA_COLORS.AMBER

Use Custom Primary Colors

You can easily customize the primary color to create a fresh and stunning appearance across your project. Changing the color in one place will quickly update it throughout, ensuring consistency and saving time. Add your color codes to 50, 100, 200 etc all color shades. Update in the Admin/plugins/theme-colors/primaryColors.js file. If you are creating your own custom color palette and don’t feel confident doing it by hand using UI Colors.

const defaultTheme = require('tailwindcss/defaultTheme');
const colors = require('tailwindcss/colors');
module.exports = {
    variables: {
        DEFAULT: {
            colors: { 
                primary: {
                    '50': '#eef7ff',
                    '100': '#daedff',
                    '200': '#bde0ff',
                    '300': '#90cdff',
                    '400': '#5bb1ff',
                    '500': '#358ffc',
                    '600': '#2c78f2',
                    '700': '#1759de',
                    '800': '#1949b4',
                    '900': '#1b408d',
                    '950': '#152956',
                },
            }
        },
    },
}