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

Default Colors

primaryAssetColors:'default'

Green Colors

primaryAssetColors:'green'

Violet Colors

primaryAssetColors:'violet'

Orange Colors

primaryAssetColors:'orange'

Teal Colors

primaryAssetColors:'teal'

Fuchsia Colors

primaryAssetColors:'fuchsia'

Lime Colors

primaryAssetColors:'lime'

Amber Colors

primaryAssetColors:'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',
                },
            }
        },
    },
}