Change Global Skin Color
How to Configure Global Skin Colors ?
Note : To execute Gulp,
navigate to the package folder containing the package.json
file. Open a command prompt in that directory and execute the
command "gulp" as demonstrated below. If you require guidance
on installing Gulp, please refer to the provided resource.
Gulp
gulp
// -------------------------------------------------------------------------------------
// File: packages/demos/tailwind.config.js
// -------------------------------------------------------------------------------------
primary: "var(--color-primary)",
secondary: "var(--color-secondary)",
// ---------------------------------------------------------------------------------------
// For the Blue Theme - Primary-Secondary Color
// ---------------------------------------------------------------------------------------
// ---------------------------------------------------------------------------------------
// File: packages/demos/src/assets/tailwind/utilities/default_colors.css
// ---------------------------------------------------------------------------------------
[data-color-theme="Blue_Theme"]:root{
--color-primary: #0085db;
--color-secondary: #707a82;
--color-lightprimary:#0085db12;
--color-darkprimary:#0f273f;
--color-darksecondary:#1a2535;
--color-lightsecondary:#707a821a;
--color-primary-emphasis:#0071ba;
--color-secondary-emphasis:#5f686f;
}
// ---------------------------------------------------------------------------------------
// For the Aqua Theme - Primary-Secondary Color
// ---------------------------------------------------------------------------------------
// ---------------------------------------------------------------------------------------
// File: packages/demos/src/assets/tailwind/utilities/default_colors.css
// ---------------------------------------------------------------------------------------
[data-color-theme="Aqua_Theme"]:root{
--color-primary: #0074BA;
--color-bghover:#00639e ;
--color-primary-emphasis:#00639e;
--color-secondary-emphasis:#3cb7a0;
--color-secondary: #47D7BC;
--color-lightprimary:#0074BA20;
--color-lightsecondary:#00639e20;
--color-darkprimary:#1D3143;
--color-darksecondary:#243B43;
}
// ---------------------------------------------------------------------------------------
// For the Cyan Theme - Primary-Secondary Color
// ---------------------------------------------------------------------------------------
// ---------------------------------------------------------------------------------------
// File: packages/demos/src/assets/tailwind/utilities/default_colors.css
// ---------------------------------------------------------------------------------------
[data-color-theme="Cyan_Theme"]:root{
--color-primary: #01C0C8;
--color-primary-emphasis:#01a3aa;
--color-secondary-emphasis:#d58066;
--color-secondary: #FB9678;
--color-lightprimary:#01C0C820;
--color-lightsecondary:#FB967820;
--color-darkprimary:#1D3944;
--color-darksecondary:#37343C;
}
// ---------------------------------------------------------------------------------------
// For the Green Theme - Primary-Secondary Color
// ---------------------------------------------------------------------------------------
// ---------------------------------------------------------------------------------------
// File: packages/demos/src/assets/tailwind/utilities/default_colors.css
// ---------------------------------------------------------------------------------------
[data-color-theme="Green_Theme"]:root{
--color-primary: #0A7EA4;
--color-primary-emphasis:#096b8b;
--color-secondary-emphasis:#d4e069;
--color-secondary: #CCDA4E;
--color-lightprimary:#0A7EA420;
--color-lightsecondary:#CCDA4E20;
--color-darkprimary:#1E3241;
--color-darksecondary:#323B38;
}
// ---------------------------------------------------------------------------------------
// For the Orange Theme - Primary-Secondary Color
// ---------------------------------------------------------------------------------------
// ---------------------------------------------------------------------------------------
// File: packages/demos/src/assets/tailwind/utilities/default_colors.css
// ---------------------------------------------------------------------------------------
[data-color-theme="Orange_Theme"]:root{
--color-primary: #FA896B;
--color-primary-emphasis:#d5745b;
--color-secondary-emphasis:#00639e;
--color-secondary: #0074BA;
--color-lightprimary:#FA896B20;
--color-lightsecondary:#0074BA20;
--color-darkprimary:#36333B;
--color-darksecondary:#1D3143;
}
// ---------------------------------------------------------------------------------------
// For the Purple Theme - Primary-Secondary Color
// ---------------------------------------------------------------------------------------
// ---------------------------------------------------------------------------------------
// File: packages/demos/src/assets/tailwind/utilities/default_colors.css
// ---------------------------------------------------------------------------------------
[data-color-theme="Purple_Theme"]:root{
--color-primary: #763EBD;
--color-primary-emphasis:#6435a1;
--color-secondary-emphasis:#7fb0b5;
--color-secondary: #49BEFF;
--color-lightprimary:#763EBD20;
--color-lightsecondary:#49BEFF20;
--color-darkprimary:#292B43;
--color-darksecondary:#2C3A46;
}
Now, save files and check in browser