TailwindAdmin NextJs Template

Color

Free Version
Premium Version

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;
}

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: #13DEB920;
    --color-lighterror: #FA896B20;
    --color-lightinfo: #8754ec1a;
    --color-darkinfo: #223662;
    --color-lightwarning: #FFAE1F20;
    --color-white: #fff;
    --color-dark: #1c2536;
    --color-border: #dfe5ef;
    --color-darkborder: #333f55;
    --color-link: #2a3547;
    --color-muted: #5a6a85;
    --color-darkmuted: #2a3851;
    --color-darklink: #7c8fac;
    --color-lightgray: #f6f9fc;
    --color-darkgray: #333f55;
    --color-bodytext: #5a6a85bf;
    --color-error-emphasis: #d5745b;
    --color-warning-emphasis: #d9941a;
    --color-success-emphasis: #10bd9d;
    --color-primary: #5D87FF;
    --color-primary-emphasis: #4f73d9;
    --color-secondary: #49BEFF;
    --color-secondary-emphasis: #3ea2d9;
    --color-lightprimary: #5D87FF20;
    --color-lightsecondary: #49BEFF20;
    --color-input: #E5E7EB;

    /* common var for dark&light */
    --color-charcoal: #2a3547;
    --color-customdark: #1c2536;
    --color-defaultBorder: #dfe5ef;
    --color-slateGray: #5a6a85bf;
    --color-breadcrumbColor: #49BEFF20;

    --background: #ffff;
    --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;
}

Override Colors (Dark Theme)

For any change in colors : /src/app/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;
}