Color Swatch

You can easily customize the color palette of your TailAdmin project by modifying the css file @theme. TailAdmin comes with a variety of pre-defined color swatches that you can directly use or customize according to your needs.

Here are some default color categories:

brand

#F2F7FF

#ECF3FF

#DDE9FF

#C2D6FF

#9CB9FF

#7592FF

#465FFF

#3641F5

#2A31D8

#252DAE

#262E89

#161950

blue light

#F5FBFF

#F0F9FF

#E0F2FE

#B9E6FE

#7CD4FD

#36BFFA

#0BA5EC

#0086C9

#026AA2

#065986

#0B4A6F

#062C41

gray

#FCFCFD

#F9FAFB

#F2F4F7

#E4E7EC

#D0D5DD

#98A2B3

#667085

#475467

#344054

#1D2939

#101828

#0C111D

#1A2231

orange

#FFFAF5

#FFF6ED

#FFEAD5

#FDDCAB

#FEB273

#FD853A

#FB6514

#EC4A0A

#C4320A

#9C2A10

#7E2410

#511C10

success

#F6FEF9

#ECFDF3

#D1FADF

#A6F4C5

#6CE9A6

#32D583

#12B76A

#039855

#027A48

#05603A

#054F31

#053321

error

#FFFBFA

#FEF3F2

#FEE4E2

#FECDCA

#FDA29B

#F97066

#F04438

#D92D20

#B42318

#912018

#7A271A

#55160C

warning

#FFFCF5

#FFFAEB

#FEF0C7

#FEDF89

#FEC84B

#FDB022

#F79009

#DC6803

#B54708

#93370D

#7A2E0E

#4E1D09

theme pink

#EE46BC

theme purple

#7A5AF8

Customizing Colors

You can easily customize your TailAdmin color palette by editing the css file. Here’s how to do it:

Add Custom Colors: Inside the theme object, use the colors key to define custom colors.
Example Configuration:

@theme {
  --color-current: currentColor;
  --color-transparent: transparent;
  --color-white: #ffffff;
  --color-black: #101828;
 
  --color-brand-25: #f2f7ff;
  --color-brand-50: #ecf3ff;
  --color-brand-100: #dde9ff;
  --color-brand-200: #c2d6ff;
  --color-brand-300: #9cb9ff;
  --color-brand-400: #7592ff;
  --color-brand-500: #465fff;
  --color-brand-600: #3641f5;
  --color-brand-700: #2a31d8;
  --color-brand-800: #252dae;
  --color-brand-900: #262e89;
  --color-brand-950: #161950;
 
  --color-blue-light-25: #f5fbff;
  --color-blue-light-50: #f0f9ff;
  --color-blue-light-100: #e0f2fe;
  --color-blue-light-200: #b9e6fe;
  --color-blue-light-300: #7cd4fd;
  --color-blue-light-400: #36bffa;
  --color-blue-light-500: #0ba5ec;
  --color-blue-light-600: #0086c9;
  --color-blue-light-700: #026aa2;
  --color-blue-light-800: #065986;
  --color-blue-light-900: #0b4a6f;
  --color-blue-light-950: #062c41;
 
  --color-gray-25: #fcfcfd;
  --color-gray-50: #f9fafb;
  --color-gray-100: #f2f4f7;
  --color-gray-200: #e4e7ec;
  --color-gray-300: #d0d5dd;
  --color-gray-400: #98a2b3;
  --color-gray-500: #667085;
  --color-gray-600: #475467;
  --color-gray-700: #344054;
  --color-gray-800: #1d2939;
  --color-gray-900: #101828;
  --color-gray-950: #0c111d;
  --color-gray-dark: #1a2231;
 
  --color-orange-25: #fffaf5;
  --color-orange-50: #fff6ed;
  --color-orange-100: #ffead5;
  --color-orange-200: #fddcab;
  --color-orange-300: #feb273;
  --color-orange-400: #fd853a;
  --color-orange-500: #fb6514;
  --color-orange-600: #ec4a0a;
  --color-orange-700: #c4320a;
  --color-orange-800: #9c2a10;
  --color-orange-900: #7e2410;
  --color-orange-950: #511c10;
 
  --color-success-25: #f6fef9;
  --color-success-50: #ecfdf3;
  --color-success-100: #d1fadf;
  --color-success-200: #a6f4c5;
  --color-success-300: #6ce9a6;
  --color-success-400: #32d583;
  --color-success-500: #12b76a;
  --color-success-600: #039855;
  --color-success-700: #027a48;
  --color-success-800: #05603a;
  --color-success-900: #054f31;
  --color-success-950: #053321;
 
  --color-error-25: #fffbfa;
  --color-error-50: #fef3f2;
  --color-error-100: #fee4e2;
  --color-error-200: #fecdca;
  --color-error-300: #fda29b;
  --color-error-400: #f97066;
  --color-error-500: #f04438;
  --color-error-600: #d92d20;
  --color-error-700: #b42318;
  --color-error-800: #912018;
  --color-error-900: #7a271a;
  --color-error-950: #55160c;
 
  --color-warning-25: #fffcf5;
  --color-warning-50: #fffaeb;
  --color-warning-100: #fef0c7;
  --color-warning-200: #fedf89;
  --color-warning-300: #fec84b;
  --color-warning-400: #fdb022;
  --color-warning-500: #f79009;
  --color-warning-600: #dc6803;
  --color-warning-700: #b54708;
  --color-warning-800: #93370d;
  --color-warning-900: #7a2e0e;
  --color-warning-950: #4e1d09;
 
  --color-theme-pink-500: #ee46bc;
 
  --color-theme-purple-500: #7a5af8;
 
  /* --- other theme configs -- */
}

This structure allows you to define your project’s colors and makes it easy to use them throughout your components. Simply use the color values in your classes like so:

<div class="bg-brand-500 text-white">
  Custom color background with text
</div>

Feel free to adjust the color palette to suit your brand or design preferences.

Dark Mode Spacing