Checkout Pro Version

Color

Override Colors

For any change in colors : main/src/css/theme/default-colors.css
                        
:root{
  /* Default theme fonts */
  --theme-font:"Plus Jakarta Sans", sans-serif;

  /* Default theme shadows */
  --theme-shadow-md: 0 2px 6px #2553b91a;
  --theme-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
  --theme-shadow-dark-md:
    rgba(145, 158, 171, 0.3) 0px 0px 2px 0px,
    rgba(145, 158, 171, 0.02) 0px 12px 24px -4px;

  --theme-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --theme-shadow-btn-shadow:rgba(0, 0, 0, 0.05) 0 9px 17.5px;
  --theme-shadow-tw: rgba(175, 182, 201, 0.2) 0px 2px 4px -1px;
  --theme-shadow-btnshdw: 0 17px 20px -8px rgba(77, 91, 236, 0.231372549);
  --theme-shadow-elevation1: 0px 12px 30px -2px rgba(58, 75, 116, 0.14);
  --theme-shadow-elevation2: 0px 24px 24px -12px rgba(0, 0, 0, 0.05);
  --theme-shadow-elevation3: 0px 24px 24px -12px rgba(99, 91, 255, 0.15);
  --theme-shadow-elevation4: 0 2px 30px 15px #2553b91a;

  /* Default theme Radius */
  --theme-radius-sm: 7px;
  --theme-radius-md: 9px;
  --theme-radius-lg: 18px;


  /* Default theme font-size */
  --theme-text-13: 13px;
  --theme-text-15: 15px;
  --theme-text-17: 17px;
  --theme-text-22: 22px;
  --theme-text-28: 28px;
  --theme-text-34: 34px;
  --theme-text-40: 40px;
  --theme-text-44: 44px;
  --theme-text-50: 50px;
  --theme-text-56: 56px;
  --theme-text-64: 64px;


  /* Default theme colors */
  --info:oklch(0.7811 0.1209 218.04);
  --success:oklch(0.7676 0.1533 156.87);
  --warning:oklch(0.8429 0.1119 73.04);
  --error:oklch(0.7745 0.1265 35.41);
  --indigo:oklch(0.5933 0.1751 294.4);
  --lightsuccess:oklch(0.7676 0.1533 156.87 / 12.5%);
  --lighterror:oklch(0.7745 0.1265 35.41 / 12.5%);
  --lightinfo:oklch(0.7811 0.1209 218.04 / 12.5%);
  --lightwarning:oklch(0.8429 0.1119 73.04 / 12.5%);
  --lightindigo:oklch(0.5933 0.1751 294.4 / 12.5%);
  --white:oklch(1 0 0) ;
--dark:oklch(0.23 0.037 258.85);
  --border:oklch(0.92 0.0094 242.84);
  --bordergray:oklch(0.87 0.0103 238.53);
  --darkborder:oklch(0.37 0.0414 262.29 / 50%);
  --link:oklch(0.33 0.0355 260.11);
  --muted:oklch(0.97 0.0097 252.81);
  --darkmuted:oklch(0.34 0.048 261.63);
  --darklink:oklch(0.62 0.0225 243.61);
  --lightgray:oklch(0.98 0.0045 258.32);
  --lighthover:oklch(0.98 0.0051 247.88);
  --darkgray: oklch(0.26 0.0374 260);
  --error-emphasis:oklch(0.7745 0.1265 35.41 / 80%);
  --warning-emphasis:oklch(0.8429 0.1119 73.04 / 80%);
  --success-emphasis:oklch(0.7676 0.1533 156.87 / 80%);
  --info-emphasis:oklch(0.7811 0.1209 218.04 / 80%);
  --surface-ld:oklch(1 0 0);
}

[data-color-theme="BLUE_THEME"] {
  --primary: oklch(0.6 0.1613 247.83);
  --secondary: oklch(0.57 0.0172 241.96);
  --primary-emphasis: oklch(0.6 0.1613 247.83 / 80%);
  --secondary-emphasis: oklch(0.57 0.0172 241.96 / 80%);
  --lightprimary: oklch(0.6 0.1613 247.83 / 12.5%);
  --lightsecondary: oklch(0.57 0.0172 241.96 / 12.5%);
}

[data-color-theme="AQUA_THEME"] {
  --primary: oklch(55.34% 0.173 248.32);
  --secondary: oklch(79.24% 0.164 179.51);
  --primary-emphasis: oklch(55.34% 0.173 248.32 / 80%);
  --secondary-emphasis: oklch(79.24% 0.164 179.51 / 80%);
  --lightprimary: oklch(55.34% 0.173 248.32 / 12.5%);
  --lightsecondary: oklch(49.56% 0.167 248.72 / 12.5%);
}

[data-color-theme="PURPLE_THEME"] {
  --primary: oklch(45.22% 0.202 294.17);
  --secondary: oklch(76.98% 0.211 247.58);
  --primary-emphasis: oklch(45.22% 0.202 294.17 / 80%);
  --secondary-emphasis: oklch(76.98% 0.211 247.58 / 80%);
  --lightprimary: oklch(45.22% 0.202 294.17 / 12.5%);
  --lightsecondary: oklch(76.98% 0.211 247.58 / 12.5%);
}

[data-color-theme="GREEN_THEME"] {
  --primary: oklch(54.22% 0.122 229.82);
  --secondary: oklch(83.88% 0.153 103.17);
  --primary-emphasis: oklch(54.22% 0.122 229.82 / 80%);
  --secondary-emphasis: oklch(83.88% 0.153 103.17 / 80%);
  --lightprimary: oklch(54.22% 0.122 229.82 / 12.5%);
  --lightsecondary: oklch(83.88% 0.153 103.17 / 12.5%);
}

[data-color-theme="CYAN_THEME"] {
  --primary: oklch(76.14% 0.176 199.18);
  --secondary: oklch(77.52% 0.169 46.58);
  --primary-emphasis: oklch(76.14% 0.176 199.18 / 80%);
  --secondary-emphasis: oklch(77.52% 0.169 46.58 / 80%);
  --lightprimary: oklch(76.14% 0.176 199.18 / 12.5%);
  --lightsecondary: oklch(77.52% 0.169 46.58 / 12.5%);
}

[data-color-theme="ORANGE_THEME"] {
  --primary: oklch(76.69% 0.177 40.26);
  --secondary: oklch(55.34% 0.173 248.32);
  --primary-emphasis:oklch(76.69% 0.177 40.26 / 80%);
  --secondary-emphasis: oklch(55.34% 0.173 248.32 / 80%);
  --lightprimary: oklch(76.69% 0.177 40.26 / 12.5%);
  --lightsecondary: oklch(55.34% 0.173 248.32 / 12.5%);
}

                              

2. Override Theme Colors

For change , go to : src/css/theme/default-colors.css
                            
      [data-color-theme="BLUE_THEME"]{
          --color-primary: #00A1FF;
          --color-secondary: #8965E5;
          --color-primary-emphasis:#0091E5;   
          --color-secondary-emphasis:#7c57d9;
          --color-lightprimary:#00A1FF20;
          --color-lightsecondary:#8965E520; 
      }
                                  
                              

Override Colors (Light / Dark Theme)

For any change in colors : package/src/css/globals.css
                            
@theme {

  --font-*: initial;
  --font-sans: "Plus Jakarta Sans", sans-serif;

  --color-primary: oklch(0.6 0.1613 247.83);
  --color-secondary: oklch(0.57 0.0172 241.96);
  --color-info: oklch(0.7811 0.1209 218.04);
  --color-success: oklch(0.7676 0.1533 156.87);
  --color-warning: oklch(0.8429 0.1119 73.04);
  --color-error: oklch(0.7745 0.1265 35.41);
  --color-indigo: oklch(0.5933 0.1751 294.4);
  --color-dark: oklch(0.23 0.037 258.85);

  --shadow-md: 0 2px 6px #2553b91a;
  --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);

  --radius-sm: 7px;
  --radius-md: 9px;
  --radius-lg: 18px;
}