TailwindAdmin Tanstackstart Template

Color

Free Version
Premium Version

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 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 : /src/styles.css

                            
@theme {
  --font-sans: 'DM Sans', ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

  --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
  --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --shadow-md: 0 1px 4px rgba(133, 146, 173, 0.2);
  --shadow-btn-shadow: 0 9px 17.5px rgba(0, 0, 0, 0.05);

  --radius-sm: 4px;
  --radius-md: 7px;
  --radius-lg: 7px;
  --radius-tw: 12px;

  --leading-21: 21px;

  --gap-30: 30px;

  --padding-15: 15px;
  --padding-30: 30px;

  --margin-30: 30px;
}
    
:root {
  --radius: 10px;
  --background: var(--white);
  --foreground: var(--dark);
  --card: var(--white);
  --card-foreground: var(--link);
  --popover: var(--white);
  --popover-foreground: var(--link);
  --primary: #5d87ff;
  --primary-foreground: var(--white);
  --secondary: #49beff;
  --secondary-foreground: var(--white);
  --muted: #f5f5f5;
  --muted-foreground: #5a6a85bf;
  --accent: var(--lightprimary);
  --accent-foreground: var(--primary);
  --destructive: var(--error);
  --destructive-foreground: var(--white);
  --border: #dfe5ef;
  --input: #e5e7eb;
  --ring: var(--lightprimary);
  --chart-1: var(--primary);
  --chart-2: var(--secondary);
  --chart-3: var(--success);
  --chart-4: var(--warning);
  --chart-5: var(--error);
  --sidebar: var(--white);
  --sidebar-foreground: #2a3547;
  --sidebar-primary: var(--primary);
  --sidebar-primary-foreground: var(--white);
  --sidebar-accent: var(--lightprimary);
  --sidebar-accent-foreground: var(--primary);
  --sidebar-border: var(--border);
  --sidebar-ring: #a1a1a1;

  /* CUSTOM COLORS */
  --info: #8754ec;
  --success: #13deb9;
  --warning: #f6b51e;
  --error: #ef4444;
  --white: #ffffff;
  --dark: #1c2536;
  --bodytext: #5a6a85bf;

  /* Light Variants */
  --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);
  --lightwarning: color-mix(in oklab, var(--warning) 12%, transparent);
  --lighterror: color-mix(in oklab, var(--error) 12%, transparent);
  --lightinfo: color-mix(in oklab, var(--info) 12%, transparent);

  /* Emphasis Variants */
  --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);
  --warning-emphasis: color-mix(in oklab, var(--warning) 80%, black);
  --error-emphasis: color-mix(in oklab, var(--error) 80%, black);
  --info-emphasis: color-mix(in oklab, var(--info) 80%, black);
}

Override Colors (Dark Theme)

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

                            
.dark {
  --background: var(--dark);
  --foreground: var(--white);
  --card: var(--dark);
  --card-foreground: var(--white);
  --popover: #333f55;
  --popover-foreground: var(--white);
  --primary: #5d87ff;
  --primary-foreground: var(--white);
  --secondary: #49beff;
  --secondary-foreground: var(--white);
  --muted: #2a3851;
  --muted-foreground: #7c8fac;
  --accent: var(--accent);
  --accent-foreground: var(--accent-foreground);
  --destructive: var(--error);
  --border: #333f55;
  --input: var(--border);
  --ring: var(--lightprimary);
  --chart-1: var(--primary);
  --chart-2: var(--secondary);
  --chart-3: var(--success);
  --chart-4: var(--warning);
  --chart-5: var(--error);
  --sidebar: var(--dark);
  --sidebar-foreground: #7c8fac;
  --sidebar-primary: var(--sidebar-primary);
  --sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --sidebar-accent: var(--sidebar-accent);
  --sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --sidebar-border: var(--sidebar-border);
  --sidebar-ring: var(--sidebar-ring);

  /* CUSTOM COLORS */
  --info: #8754ec;
  --success: #13deb9;
  --warning: #f6b51e;
  --error: #ef4444;
  --white: #ffffff;
  --dark: #1c2536;
  --bodytext: #5a6a85bf;

  /* Light Variants */
  --lightprimary: color-mix(in oklab, var(--primary) 20%, transparent);
  --lightsecondary: color-mix(in oklab, var(--secondary) 20%, transparent);
  --lightsuccess: color-mix(in oklab, var(--success) 20%, transparent);
  --lightwarning: color-mix(in oklab, var(--warning) 20%, transparent);
  --lighterror: color-mix(in oklab, var(--error) 20%, transparent);
  --lightinfo: color-mix(in oklab, var(--info) 20%, transparent);

  /* Emphasis Variants */
  --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);
  --warning-emphasis: color-mix(in oklab, var(--warning) 80%, black);
  --error-emphasis: color-mix(in oklab, var(--error) 80%, black);
  --info-emphasis: color-mix(in oklab, var(--info) 80%, black);
}