Color

Override Colors

For any change in colors : main/src/css/theme/default-colors.css 
                            
:root{
  --color-info: oklch(0.5832 0.2172 294.04);
  --color-success: oklch(0.8048 0.1502 174.63);
  --color-warning: oklch(0.8124 0.1619 81.39);
  --color-error: oklch(0.6368 0.2078 25.33);
  --color-lightsuccess: oklch(0.7486 0.1832 137.27 / 10.2%);
  --color-lighterror: oklch(0.7475 0.1445 35.82 / 10.2%);
  --color-lightinfo: oklch(0.5832 0.2172 294.04 / 10.2%);
  --color-darkinfo: oklch(0.3405 0.0816 264.13);
  --color-lightwarning: oklch(0.8094 0.1653 74.03 / 12.55%);
  --color-white: oklch(1 0 0);
  --color-dark: oklch(0.2643 0.0345 262.71);
  --color-border: oklch(0.9203 0.015 260.73);
  --color-darkborder: oklch(0.3667 0.0414 262.29);
  --color-link: oklch(0.327 0.0355 260.11);
  --color-muted: oklch(0.5216 0.0471 260.8);
  --color-darklink: oklch(0.6454 0.0488 258.74);
  --color-lightgray: oklch(0.9807 0.0051 247.88);
  --color-bgmuted: oklch(0.9651 0.0097 252.81);
  --color-darkgray: oklch(0.4504 0.0473 259.98);
  --color-bodytext: oklch(0.5216 0.0471 260.8);
  --color-darkmuted: oklch(0.3401 0.048 261.63);
  --color-error-emphasis: oklch(0.6629 0.1275 35.43);
  --color-darkmuted: oklch(0.3401 0.048 261.63);
  --color-lightmuted: oklch(0.543 0.0413 248.59);
  --color-warning-emphasis: oklch(0.7177 0.1459 74.27);
  --color-success-emphasis: oklch(0.7135 0.1331 174.5);
  --color-info-emphasis: oklch(0.625 0.1896 257.73);
  --color-gray-emphasis: oklch(0.73 0.0301 246.6);
  --color-light-emphasis: oklch(0.9203 0.015 260.73);

/* ShadCN Compnent */

  --radius: 10px;

  --background: oklch(0.97 0.0029 264.54);
  --muted: oklch(0.9702 0 0);
  --muted-foreground: oklch(0.5555 0 0);
  --border: oklch(0.9219 0 0);
  --sidebar-border: oklch(0.9219 0 0);
  --sidebar-ring: oklch(0.709 0 0);

  --foreground: var(--color-link);
  --card: var(--color-white);
  --card-foreground: var(--color-link);
  --popover: var(--color-white);
  --popover-foreground: var(--color-link);
  --primary: var(--color-primary);
  --primary-foreground: var(--color-white);
  --secondary: var(--color-secondary);
  --secondary-foreground: var(--color-white);

  --accent: var(--color-lightprimary);
  --accent-foreground: var(--color-primary);
  --destructive: var(--color-error);
  --destructive-foreground: var(--color-white);

  --input: var(--color-input);
  --ring: var(--color-lightprimary);
  --chart-1: var(--color-primary);
  --chart-2: var(--color-secondary);
  --chart-3: var(--color-success);
  --chart-4: var(--color-warning);
  --chart-5: var(--color-error);
  --sidebar: var(--color-white);
  --sidebar-foreground: var(--color-link);
  --sidebar-primary: var(--color-primary);
  --sidebar-primary-foreground: var(--color-white);
  --sidebar-accent: var(--color-lightprimary);
  --sidebar-accent-foreground: var(--color-primary);


  --color-primary-emphasis: color-mix(in oklab, var(--color-primary) 80%, black);
  --color-secondary-emphasis: color-mix(in oklab,
  var(--color-secondary) 80%,
  black);  
  --color-lightprimary: color-mix(in oklab,
  var(--color-primary) 12%,
  transparent);
  --color-lightsecondary: color-mix(in oklab,
  var(--color-secondary) 12%,
  transparent);

}

Override Colors (Dark Theme)

For any change in colors : main/src/css/theme/dark.css 
                            
.dark:root {
  --color-surface-ld: oklch(0.2633 0.0374 260);
  --background: oklch(0.2643 0.0345 262.71);
  --foreground: var(--color-white);
  --card: var(--color-dark);
  --card-foreground: var(--color-white);
  --popover: var(--color-dark);
  --popover-foreground: var(--color-white);
  --primary: var(--color-primary);
  --primary-foreground: var(--color-white);
  --secondary: var(--color-secondary);
  --secondary-foreground: var(--color-white);
  --muted: var(--color-muted);
  --muted-foreground: var(--color-muted-foreground);
  --accent: var(--color-lightprimary);
  --accent-foreground: var(--color-primary);
  --destructive: var(--color-error);
  --border: var(--color-input);
  --input: var(--color-darkborder);
  --ring: var(--color-lightprimary);
  --chart-1: var(--color-primary);
  --chart-2: var(--color-secondary);
  --chart-3: var(--color-success);
  --chart-4: var(--color-warning);
  --chart-5: var(--color-error);
  --sidebar: var(--color-sidebar);
  --sidebar-foreground: var(--color-sidebar-foreground);
  --sidebar-primary: var(--color-sidebar-primary);
  --sidebar-primary-foreground: var(--color-sidebar-primary-foreground);
  --sidebar-accent: var(--color-sidebar-accent);
  --sidebar-accent-foreground: var(--color-sidebar-accent-foreground);
  --sidebar-border: var(--color-sidebar-border);
  --sidebar-ring: var(--color-sidebar-ring);
}

Override Theme Colors

For any change in colors : main/src/css/theme/default-colors.css 
                            

  [data-color-theme="BLUE_THEME"] {
    --color-primary: oklch(0.6533 0.1838 266.79);
    --color-secondary: oklch(0.7632 0.139 237.2);
  }

  [data-color-theme="AQUA_THEME"] {
    --color-primary: oklch(0.5416 0.13889 245.8714);
    --color-secondary: oklch(0.7961 0.1275 177.72);
  }

  [data-color-theme="PURPLE_THEME"] {
    --color-primary: oklch(0.5005 0.1897 299.73);
    --color-secondary: oklch(0.7632 0.139 237.2);
  }

  [data-color-theme="GREEN_THEME"] {
    --color-primary: oklch(0.5547 0.1066 228.5);
    --color-secondary: oklch(0.8519 0.1615 114.74);
  }

  [data-color-theme="CYAN_THEME"] {
    --color-primary: oklch(0.7343 0.1247 200.11);
    --color-secondary: oklch(0.7719 0.1293 37.34);
  }

  [data-color-theme="CUSTOM_THEME"] {
    --color-primary: oklch(0.6533 0.1838 266.79);
    --color-secondary: oklch(0.7632 0.139 237.2);
  }