Color
Override Colors (Light Theme)
For any change in colors : main/src/css/theme/default-colors.css
:root {
--color-info: #8754ec;
--color-success: #13deb9;
--color-warning: #f6b51e;
--color-error: #ef4444;
--color-lightsuccess: #70c7481a;
--color-lighterror: #fa896b1a;
--color-lightinfo: #8754ec1a;
--color-darkinfo: #223662;
--color-lightwarning: #ffae1f20;
--color-white: #fff;
--color-dark: #1c2536;
--color-border: var(--border);
--color-darkborder: #333f55;
--color-link: #2a3547;
--color-muted: #5a6a85;
--color-darklink: #7c8fac;
--color-lightgray: #f6f9fc;
--color-bgmuted: #eff4fa;
--color-darkgray: #465670;
--color-bodytext: #5a6a85;
--color-darkmuted: #2a3851;
--color-error-emphasis: #d5745b;
--color-darkmuted: #2a3851;
--color-lightmuted: #5d7287;
--color-warning-emphasis: #d9941a;
--color-success-emphasis: #10bd9d;
--color-info-emphasis: #3184f7;
--color-gray-emphasis: #99aaba;
--color-light-emphasis: #dfe5ef;
/* ShadCN Compnent */
--background: #f4f5f7;
--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);
--muted: #f5f5f5;
--muted-foreground: #737373;
--accent: var(--color-lightprimary);
--accent-foreground: var(--color-primary);
--destructive: var(--color-error);
--destructive-foreground: var(--color-white);
--border: #e5e5e5;
--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);
--sidebar-border: #e5e5e5;
--sidebar-ring: #a1a1a1;
/* ----------- generate emphasis and lighter color of primary and secondary -------------- */
/* Darker versions (emphasis) */
--color-primary-emphasis: color-mix(in oklab, var(--color-primary) 80%, black);
--color-secondary-emphasis: color-mix(in oklab, var(--color-secondary) 80%, black);
/* Lighter/opacity-like versions */
--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-colors.css
.dark:root {
--background: #1c2536;
--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-darkborder);
--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 change , go to : src/css/theme/default-colors.css
[data-color-theme='BLUE_THEME'] {
--color-primary: #5d87ff;
--color-secondary: #49beff;
}
[data-color-theme='AQUA_THEME'] {
--color-primary: #0074ba;
--color-secondary: #47d7bc;
}
[data-color-theme='PURPLE_THEME'] {
--color-primary: #763ebd;
--color-secondary: #49beff;
}
[data-color-theme='GREEN_THEME'] {
--color-primary: #0a7ea4;
--color-secondary: #ccda4e;
}
[data-color-theme='CYAN_THEME'] {
--color-primary: #01c0c8;
--color-secondary: #fb9678;
}
[data-color-theme='CUSTOM_THEME'] {
--color-primary: #5d87ff;
--color-secondary: #49beff;
}
Override Colors (Light Theme)
For any change in colors : package/src/css/theme/default-colors.css
:root {
--color-primary: #00a1ff;
--color-secondary: #16CDC7;
--color-primary-emphasis: #0491e2;
--color-secondary-emphasis: #1cc3bd;
--color-lightprimary: #00a1ff20;
--color-lightsecondary: #16CDC740;
--color-info: #46CAEB;
--color-success: #36c96c;
--color-warning: #f8c20a;
--color-error: #FF6692;
--color-lightsuccess: #2EA95C40;
--color-lighterror: #FF669260;
--color-lightinfo: #46caeb40;
--color-lightwarning: #F8C20A40;
--color-white: #fff;
--color-dark: #1F2A3D;
--color-border: #e0e6eb;
--color-bordergray: #f3f3f4;
--color-darkborder: #333F55;
--color-link: #2a3547;
--color-muted: #EFF4FA;
--color-darkmuted: #2A3851;
--color-darklink: #29343d;
--color-lightgray: #F4F7FB;
--color-lighthover: #f6f7f9;
--color-darkgray: #1A2537;
--color-sky: #0A2540;
--color-error-emphasis: #d9577c;
--color-warning-emphasis: #d3a509;
--color-success-emphasis: #2ea95c;
--color-info-emphasis: #3cacc8;
--color-surface-ld: #ffffff;
--color-bodytext: #98A4AE;
}
Override Colors (Dark Theme)
For any change in colors : package/src/css/theme/dark-colors.css
.dark {
--background: var(--color-dark);
--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-accent);
--accent-foreground: var(--color-accent-foreground);
--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);
--color-lightprimary: #5D87FF20;
/* common var for dark&light */
--color-charcoal: #7c8fac;
--color-customdark: #ffff;
--color-defaultBorder: #333f55;
--color-slateGray: #7c8fac;
--color-breadcrumbColor: #223662;
}