Customization

Create Theme

Step-by-step guide to creating a custom theme that matches your brand. Override CSS variables, build brand presets, and ship a unique look.

1Start with the Default Theme

Copy the default theme into your globals.css and modify only the variables you want to change. Any variable you do not override will keep its default value.

globals.css

:root {
  /* Override only what you need */
  --trinkui-primary: 20 184 166;      /* your brand color */
  --trinkui-primary-fg: 255 255 255;
  --trinkui-accent: 234 179 8;        /* your accent color */
}

.dark {
  --trinkui-primary: 45 212 191;
  --trinkui-accent: 250 204 21;
}

2Convert Your Brand Colors to RGB Channels

trink-ui expects color values as space-separated RGB channels. Convert your hex or RGB values:

Color conversion

/* Hex to RGB channels */
#6366f1  →  99 102 241
#14b8a6  →  20 184 166
#f97316  →  249 115 22

/* RGB to RGB channels */
rgb(99, 102, 241)  →  99 102 241

/* You can use any color picker tool or browser DevTools:
   1. Pick your color
   2. Get the RGB values
   3. Write them space-separated (no commas) */

3Choose Light and Dark Values

For good contrast, your dark mode primary should typically be a lighter shade of your light mode primary. The same applies to other colors:

/* Rule of thumb:
   Light mode → use the -500 or -600 shade
   Dark mode  → use the -400 shade (lighter, better contrast on dark bg)

   Light background → white or near-white
   Dark background  → very dark gray or near-black

   Muted text → should have at least 4.5:1 contrast ratio */

Example: Corporate Blue Theme

A professional theme using blue as the primary color:

themes/corporate-blue.css

:root {
  --trinkui-bg: 255 255 255;
  --trinkui-fg: 15 23 42;
  --trinkui-primary: 37 99 235;       /* blue-600 */
  --trinkui-primary-fg: 255 255 255;
  --trinkui-secondary: 241 245 249;   /* slate-100 */
  --trinkui-secondary-fg: 30 41 59;   /* slate-800 */
  --trinkui-accent: 234 88 12;        /* orange-600 */
  --trinkui-muted: 100 116 139;       /* slate-500 */
  --trinkui-border: 203 213 225;      /* slate-300 */
  --trinkui-surface: 248 250 252;     /* slate-50 */

  --trinkui-radius-md: 0.5rem;
  --trinkui-radius-lg: 0.75rem;
}

.dark {
  --trinkui-bg: 2 6 23;              /* slate-950 */
  --trinkui-fg: 248 250 252;
  --trinkui-primary: 96 165 250;     /* blue-400 */
  --trinkui-primary-fg: 255 255 255;
  --trinkui-secondary: 30 41 59;     /* slate-800 */
  --trinkui-secondary-fg: 226 232 240;
  --trinkui-accent: 251 146 60;      /* orange-400 */
  --trinkui-muted: 148 163 184;      /* slate-400 */
  --trinkui-border: 51 65 85;        /* slate-700 */
  --trinkui-surface: 15 23 42;       /* slate-900 */
}

Example: Vibrant Purple Theme

A bold, creative theme with purple as the primary and pink as the accent:

themes/vibrant-purple.css

:root {
  --trinkui-bg: 255 255 255;
  --trinkui-fg: 15 3 38;
  --trinkui-primary: 147 51 234;     /* purple-600 */
  --trinkui-primary-fg: 255 255 255;
  --trinkui-secondary: 250 245 255;  /* purple-50 */
  --trinkui-secondary-fg: 88 28 135; /* purple-800 */
  --trinkui-accent: 236 72 153;      /* pink-500 */
  --trinkui-muted: 120 113 138;
  --trinkui-border: 233 213 255;     /* purple-200 */
  --trinkui-surface: 253 251 255;

  --trinkui-radius-md: 1rem;
  --trinkui-radius-lg: 1.25rem;
  --trinkui-radius-xl: 2rem;
}

.dark {
  --trinkui-bg: 13 3 27;
  --trinkui-fg: 245 240 255;
  --trinkui-primary: 192 132 252;    /* purple-400 */
  --trinkui-primary-fg: 255 255 255;
  --trinkui-secondary: 30 15 50;
  --trinkui-secondary-fg: 233 213 255;
  --trinkui-accent: 244 114 182;     /* pink-400 */
  --trinkui-muted: 140 130 160;
  --trinkui-border: 55 30 80;
  --trinkui-surface: 22 8 40;
}

Example: Earthy Green Theme

A natural, grounded theme with green tones:

themes/earthy-green.css

:root {
  --trinkui-bg: 252 253 248;
  --trinkui-fg: 20 30 15;
  --trinkui-primary: 22 163 74;      /* green-600 */
  --trinkui-primary-fg: 255 255 255;
  --trinkui-secondary: 240 253 244;  /* green-50 */
  --trinkui-secondary-fg: 20 83 45;  /* green-800 */
  --trinkui-accent: 202 138 4;       /* yellow-600 */
  --trinkui-muted: 107 114 128;      /* gray-500 */
  --trinkui-border: 209 213 219;     /* gray-300 */
  --trinkui-surface: 247 250 244;

  --trinkui-radius-sm: 0.25rem;
  --trinkui-radius-md: 0.5rem;
  --trinkui-radius-lg: 0.75rem;
}

.dark {
  --trinkui-bg: 5 15 8;
  --trinkui-fg: 240 250 240;
  --trinkui-primary: 74 222 128;     /* green-400 */
  --trinkui-primary-fg: 5 46 22;
  --trinkui-secondary: 20 40 25;
  --trinkui-secondary-fg: 187 247 208;
  --trinkui-accent: 250 204 21;      /* yellow-400 */
  --trinkui-muted: 156 163 175;      /* gray-400 */
  --trinkui-border: 40 55 45;
  --trinkui-surface: 12 25 16;
}

Next step

Learn how dark mode works and how to implement a theme toggle.

Dark Mode