TailwindAdmin Tanstackstart Template

Color

Override Colors (Light Theme)

For any change in colors : /src/styles.css

                            
:root {
  /* 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: #5a6a85;
  --muted-foreground: #737373;
  --accent: var(--color-lightprimary);
  --accent-foreground: var(--color-primary);
  --destructive: var(--color-error);
  --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;

  /* ----------------------------------- custom color variable ----------------------------------- */
  --info: #8754ec;
  --success: #13deb9;
  --warning: #f6b51e;
  --error: #ef4444;
  --white: #fff;
  --dark: #1c2536;
  --darkinfo: #223662;
  --lightgray: #f6f9fc;
  --bgmuted: #eff4fa;
  --darkgray: #465670;
  --bodytext: #5a6a85;
  --lightmuted: #5d7287;
  --link: #2a3547;
  --light-emphasis: #dfe5ef;
  --destructive-foreground: var(--color-white);

  /* ----------- generate emphasis and lighter color of primary and secondary -------------- */

  /* Lighter/opacity-like versions */
  --lightprimary: color-mix(in oklab, var(--color-primary) 12%, transparent);
  --lightsecondary: color-mix(in oklab, var(--color-secondary) 12%, transparent);
  --lightsuccess: color-mix(in oklab, var(--color-success) 12%, transparent);
  --lightinfo: color-mix(in oklab, var(--color-info) 12%, transparent);
  --lightwarning: color-mix(in oklab, var(--color-warning) 12%, transparent);
  --lighterror: color-mix(in oklab, var(--color-error) 12%, transparent);

  /* Darker versions (emphasis) */
  --primary-emphasis: color-mix(in oklab, var(--primary) 80%, black);
  --secondary-emphasis: color-mix(in oklab, var(--secondary) 80%, black);
  --success-emphasis: color-mix(in oklab, var(--success) 80%, black);
  --info-emphasis: color-mix(in oklab, var(--info) 80%, black);
  --warning-emphasis: color-mix(in oklab, var(--warning) 80%, black);
  --error-emphasis: color-mix(in oklab, var(--error) 80%, black);

  /* ----------------------------------- custom color variable end ----------------------------------- */

  /* shadow */
  --shadow-md: rgb(145 158 171 / 30%) 0px 0px 2px 0px, rgb(145 158 171 / 12%) 0px 12px 24px -4px;
  --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
  --shadow-dark-md: rgba(145, 158, 171, 0.3) 0px 0px 2px 0px,
    rgba(145, 158, 171, 0.02) 0px 12px 24px -4px;
  --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --shadow-btn-shadow: rgba(0, 0, 0, 0.05) 0 9px 17.5px;

  /* font-size */
  --text-40: 40px;
  --text-56: 56px;
  --text-fs_21: 21px;
  --text-fs_13: 13px;
  --text-fs_28: 28px;

  /* line-height */
  --leading-21: 21px;
}

Override Colors (Dark Theme)

For any change in colors : /src/styles.css

                            
.dark {
  --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: #2a3851;
  --muted-foreground: var(--color-muted-foreground);
  --accent: var(--color-lightprimary);
  --accent-foreground: var(--color-primary);
  --destructive: var(--color-error);
  --border: #333f55;
  --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);

  /* custom color variable */
  --info: #8754ec;
  --success: #13deb9;
  --warning: #f6b51e;
  --error: #ef4444;
  --white: #fff;
  --dark: #1c2536;
  --darkinfo: #223662;
  --lightgray: #f6f9fc;
  --link: #7c8fac;
  --bgmuted: #eff4fa;
  --darkgray: #465670;
  --bodytext: #5a6a85;
  --lightmuted: #5d7287;
  --light-emphasis: #dfe5ef;
  --destructive-foreground: var(--color-white);

  /* ----------- generate emphasis and lighter color of primary and secondary -------------- */

  /* Lighter/opacity-like versions */
  --lightprimary: color-mix(in oklab, var(--primary) 12%, transparent);
  --lightsecondary: color-mix(in oklab, var(--secondary) 12%, transparent);
  --lightsuccess: color-mix(in oklab, var(--success) 12%, transparent);
  --lightinfo: color-mix(in oklab, var(--info) 12%, transparent);
  --lightwarning: color-mix(in oklab, var(--warning) 12%, transparent);
  --lighterror: color-mix(in oklab, var(--error) 12%, transparent);

  /* Darker versions (emphasis) */
  --primary-emphasis: color-mix(in oklab, var(--primary) 80%, black);
  --secondary-emphasis: color-mix(in oklab, var(--secondary) 80%, black);
  --success-emphasis: color-mix(in oklab, var(--success) 80%, black);
  --info-emphasis: color-mix(in oklab, var(--info) 80%, black);
  --warning-emphasis: color-mix(in oklab, var(--warning) 80%, black);
  --error-emphasis: color-mix(in oklab, var(--error) 80%, black);
}

Override Theme Colors

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