Color

Override Colors (Light Theme)

For any change in colors : /src/app/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: rgb(90, 106, 133);
--color-darklink: #7c8fac;
--color-lightgray: #f6f9fc;
--color-bgmuted: #eff4fa;
--color-darkgray: #465670;
--color-bodytext: #5a6a85;
--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 */

--radius: 10px;
--background: #fff;
--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;  
--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 : /src/app/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 any change in colors : /src/app/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;
}