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/store/layout.d.ts file. Make sure to click on Reset Layouts button in order to apply the changes.

Default Colors

data-colors="default"

Green Colors

data-colors="green"

Violet Colors

data-colors="violet"

Orange Colors

data-colors="orange"

Teal Colors

data-colors="teal"

Fuchsia Colors

data-colors="fuchsia"

Lime Colors

data-colors="lime"

Amber Colors

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/config-colors.ts file. If you are creating your own custom color palette and don’t feel confident doing it by hand using UI Colors.

const colors = require('tailwindcss/colors');

module.exports = {
    custom: {
        '50': '#eef7ff',
        '100': '#daedff',
        '200': '#bde0ff',
        '300': '#90cdff',
        '400': '#5bb1ff',
        '500': '#358ffc',
        '600': '#2c78f2',
        '700': '#1759de',
        '800': '#1949b4',
        '900': '#1b408d',
        '950': '#152956',
    },
}