/*---break---*/
.dark {
    --background: var(--color-darkgray);
    --foreground: var(--color-white);
    --card: var(--color-dark);
    --card-foreground: var(--color-white);
    --popover: var(--color-darkgray);
    --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-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);
     --color-lightprimary: #00A1FF20;

    /* common var for dark&light */
    --color-charcoal: #7b8893;
    --color-customdark: #ffff;
    --color-defaultBorder: #333f55;
    --color-slateGray: #7b8893;
    --color-breadcrumbColor: #223662;
}