Colors and Branding

One of the main features of theui-svelte components library is its customizable color options, allowing you to maintain brand identity and ensure consistent theming efficiently.

The color system in TailwindCSS is a powerful tool for developers, and we've taken it a step further in our component library! By leveraging TailwindCSS, we've introduced additional custom color classes tailored for consistent branding. These new classes work just like Tailwind's native color classes but are specifically designed for branding and come with full support for shades. Using the built-in color system you can generate both shaded and non-shaded color classes.

Available Color Classes

Our component library provides a set of custom classes to make integrating these colors into your designs seamless and flexible. Below is the full list of available classes:

Shaded Colors

100

200

300

400

500

600

700

800

900

950

Brand primary --color-brand-primary-[S]

Brand secondary --color-brand-secondary-[S]

Error --color-error-[S]

Info --color-info-[S]

Success --color-success-[S]

Warning --color-warning-[S]

[T] = Type (e.g., bg, text, border, fill, etc.)
[S] = Shade (e.g., 50, 100-900, 950)
Class example: bg-brand-primary-500, text-on-brand-primary-500, bg-error-400

Non-shaded Colors

		Light mode	Dark mode
Background colors	Primary (bg-primary) --background-color-primary
	Secondary (bg-secondary) --background-color-secondary
	Tertiary (bg-tertiary) --background-color-tertiary
	Alternate background (bg-alt) --background-color-alt
Text colors	Default (text-default) --text-color-default
	Text on brand primary (text-on-brand-primary) --text-color-on-brand-primary
	Text on brand secondary (text-on-brand-secondary) --text-color-on-brand-secondary
	Muted (text-muted) --text-color-muted
	Alternate text (text-alt) --text-color-alt

Modify Colors

You can override the library's default colors by assigning new values to the corresponding CSS theme variables:

./src/app.css

@theme {
  /* Modify brand primary colors */
  --color-brand-primary-50: #f0f9ff;
  --color-brand-primary-100: #e0f2fe;
  --color-brand-primary-200: #bae6fd;
  --color-brand-primary-300: #7dd3fc;
  --color-brand-primary-400: #38bdf8;
  --color-brand-primary-500: #0ea5e9;
  --color-brand-primary-600: #0284c7;
  --color-brand-primary-700: #0369a1;
  --color-brand-primary-800: #075985;
  --color-brand-primary-900: #0c4a6e;
  --color-brand-primary-950: #082f49;

  /* Modify background colors */
  --background-color-primary: #ffffff;
  --background-color-secondary: #f8fafc;
  
  /* Modify text colors */
  --text-color-default: #1e293b;
  --text-color-muted: #64748b;
}

Add New Color

You can extend your theme by adding new colors in Tailwind CSS 4. These can be shaded (multi-value scales like --color-accent-100 to --color-accent-950) or non-shaded (single-value utilities like --background-surface). For single-value colors (e.g., a special background or text color), define a new theme variable:

./src/app.css

@theme {
  --color-accent-50: #f0f9ff;
  --color-accent-100: #e0f2fe;
  --color-accent-200: #bae6fd;
  /* ... add more shades as needed */
  --color-accent-900: #0c4a6e;
  --color-accent-950: #082f49;

  --background-surface: #f8fafc;
  --text-highlight: #4338ca;
}

After defining, use it in your components with utility classes like bg-accent-500, text-accent-300, border-accent-700, bg-surface, text-highlight etc.

Remove A Color

To completely remove a color from your theme, set its namespace to initial:

./src/app.css

@theme {
  /* Remove the warning color palette */
  --color-warning-*: initial;
  
  /* Remove specific non-shaded colors */
  --background-color-tertiary: initial;
  --text-color-alt: initial;
}

This will remove all the warning color classes, bg-tertiary and text-alt class from the application!

Available Color Palette

Here's a complete list of the available colors and their values for reference:

theui-svelte/style.css

--color-brand-primary-50 : oklch(0.97 0.0152 12.42);
--color-brand-primary-100: oklch(0.94 0.0298 12.58);
--color-brand-primary-200: oklch(0.89 0.0535 11.01);
--color-brand-primary-300: oklch(0.81 0.1036 12.12);
--color-brand-primary-400: oklch(0.72 0.1642 13.87);
--color-brand-primary-500: oklch(0.62 0.2276 19.57);
--color-brand-primary-600: oklch(0.58 0.2180 17.89);
--color-brand-primary-700: oklch(0.51 0.1952 17.24);
--color-brand-primary-800: oklch(0.45 0.1684 13.59);
--color-brand-primary-900: oklch(0.41 0.1468 10.14);
--color-brand-primary-950: oklch(0.27 0.0989 11.14);
--text-color-on-brand-primary: #FFFFFF;

--color-brand-secondary-50 : var(--color-emerald-50);
--color-brand-secondary-100: var(--color-emerald-100);
--color-brand-secondary-200: var(--color-emerald-200);
--color-brand-secondary-300: var(--color-emerald-300);
--color-brand-secondary-400: var(--color-emerald-400);
--color-brand-secondary-500: var(--color-emerald-500);
--color-brand-secondary-600: var(--color-emerald-600);
--color-brand-secondary-700: var(--color-emerald-700);
--color-brand-secondary-800: var(--color-emerald-800);
--color-brand-secondary-900: var(--color-emerald-900);
--color-brand-secondary-950: var(--color-emerald-950);
--text-color-on-brand-secondary: #2E2105;

--color-error-50 : var(--color-red-50);
--color-error-100: var(--color-red-100);
--color-error-200: var(--color-red-200);
--color-error-300: var(--color-red-300);
--color-error-400: var(--color-red-400);
--color-error-500: var(--color-red-500);
--color-error-600: var(--color-red-600);
--color-error-700: var(--color-red-700);
--color-error-800: var(--color-red-800);
--color-error-900: var(--color-red-900);
--color-error-950: var(--color-red-950);

--color-info-50 : var(--color-sky-50);
--color-info-100: var(--color-sky-100);
--color-info-200: var(--color-sky-200);
--color-info-300: var(--color-sky-300);
--color-info-400: var(--color-sky-400);
--color-info-500: var(--color-sky-500);
--color-info-600: var(--color-sky-600);
--color-info-700: var(--color-sky-700);
--color-info-800: var(--color-sky-800);
--color-info-900: var(--color-sky-900);
--color-info-950: var(--color-sky-950);

--color-success-50 : var(--color-green-50);
--color-success-100: var(--color-green-100);
--color-success-200: var(--color-green-200);
--color-success-300: var(--color-green-300);
--color-success-400: var(--color-green-400);
--color-success-500: var(--color-green-500);
--color-success-600: var(--color-green-600);
--color-success-700: var(--color-green-700);
--color-success-800: var(--color-green-800);
--color-success-900: var(--color-green-900);
--color-success-950: var(--color-green-950);

--color-warning-50 : var(--color-yellow-50);
--color-warning-100: var(--color-yellow-100);
--color-warning-200: var(--color-yellow-200);
--color-warning-300: var(--color-yellow-300);
--color-warning-400: var(--color-yellow-400);
--color-warning-500: var(--color-yellow-500);
--color-warning-600: var(--color-yellow-600);
--color-warning-700: var(--color-yellow-700);
--color-warning-800: var(--color-yellow-800);
--color-warning-900: var(--color-yellow-900);
--color-warning-950: var(--color-yellow-950);

--text-color-default: #16161D;
--text-color-muted: #636369;
--text-color-alt: #FFFDFD;

--background-color-primary: #FFFDFD;
--background-color-secondary: #F5F3F3;
--background-color-tertiary: #EBE9E9;
--background-color-alt: #16161D;

@layer base {
  .dark {
    --text-color-default: #F5F3F3;
    --text-color-muted: #A1A1AA;
    --text-color-alt: #16161D;

    --background-color-primary: #16161D;
    --background-color-secondary: #1E1E26;
    --background-color-tertiary: #26262F;
    --background-color-alt: #F5F3F3;
  }
}