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

Default Colors

userSettings.primaryColor="default"

Green Colors

userSettings.primaryColor="green"

Violet Colors

userSettings.primaryColor="violet"

Orange Colors

userSettings.primaryColor="orange"

Teal Colors

userSettings.primaryColor="teal"

Fuchsia Colors

userSettings.primaryColor="fuchsia"

Lime Colors

userSettings.primaryColor="lime"

Amber Colors

userSettings.primaryColor="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.

                    [data-colors=green] {
    --color-primary-50:             oklch(98.4% 0.0182 166.4);
    --color-primary-100:            oklch(96.73% 0.0421 168.38);
    --color-primary-200:            oklch(93.31% 0.077 165.84);
    --color-primary-300:            oklch(88.6% 0.1269 164.02);
    --color-primary-400:            oklch(82.25% 0.1654 160.37);
    --color-primary-500:            oklch(74.88% 0.1723 157.44);
    --color-primary-600:            oklch(64.79% 0.1512 157.06);
    --color-primary-700:            oklch(54.51% 0.1228 158.21);
    --color-primary-800:            oklch(46.24% 0.0982 159.81);
    --color-primary-900:            oklch(40.38% 0.0818 161.07);
    --color-primary-950:            oklch(27.46% 0.057 162.48);
}