Logo-Dark

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 all Color Theme - Primary-Secondary Color
  // ---------------------------------------------------------------------------------------

  // -------------------------------------------------------------------------------------
  // File: packages/demos/tailwind.config.js
  // -------------------------------------------------------------------------------------
  
  primary: "var(--color-primary)",
  secondary: "var(--color-secondary)",
  lightprimary: "var(--color-lightprimary)",
  lightsecondary: "var(--color-lightsecondary)",
  primaryemphasis: "var(--color-primary-emphasis)",
  secondaryemphasis: "var(--color-secondary-emphasis)",
  

  // ---------------------------------------------------------------------------------------
  // File: package/main/src/assets/tailwind/utilities/default_colors.css
  // ---------------------------------------------------------------------------------------


  // ---------------------------------------------------------------------------------------
  // For the Blue Theme - Primary-Secondary Color
  // ---------------------------------------------------------------------------------------

  [data-color-theme="Blue_Theme"]:root{
    --color-primary: #5D87FF;
    --color-primary-emphasis:#4f73d9;   
    --color-secondary: #49BEFF;
    --color-secondary-emphasis:#3ea2d9;
    --color-lightprimary:#5D87FF20;
    --color-lightsecondary:#49BEFF20;
    --color-darkprimary:#26334A;
    --color-darksecondary:#24384A;
}

// ---------------------------------------------------------------------------------------
// For the Aqua Theme - Primary-Secondary Color
// ---------------------------------------------------------------------------------------

[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 Purple_Theme - Primary-Secondary Color
// ---------------------------------------------------------------------------------------

[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; 
}

// ---------------------------------------------------------------------------------------
// For the Green_Theme - Primary-Secondary Color
// ---------------------------------------------------------------------------------------

[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 Cyan_Theme - Primary-Secondary Color
// ---------------------------------------------------------------------------------------

[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 Orange_Theme - Primary-Secondary Color
// ---------------------------------------------------------------------------------------

[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; 
}