Theming

How Theming Works

Components emit standard Tailwind utility classes (bg-blue-600, text-gray-900). To customize colors, override the underlying CSS variables in your @theme block:

app.css

@import "tailwindcss";
@source "../vendor/github.com/larsartmann/templ-components";

@theme {
  /* Override the primary brand color globally */
  --color-blue-600: #4f46e5; /* changes ALL bg-blue-600, text-blue-600, etc. */
  --color-blue-500: #6366f1;
  --color-blue-400: #818cf8;
}

No Go code changes needed. Every component that uses bg-blue-600 picks up the new color.

Semantic Token Layer

For a higher-level theming API, copy the included theme file:

curl -O https://raw.githubusercontent.com/larsartmann/templ-components/master/templ-components-theme.css

Then import it in your CSS:

@import "tailwindcss";
@source "../vendor/github.com/larsartmann/templ-components";
@import "./templ-components-theme.css";

The theme file provides semantic tokens like bg-tc-primary, text-tc-danger, bg-tc-surface that you can use in your own CSS or Tailwind arbitrary values.

Dark Mode

Dark mode is built-in. Components use Tailwind dark: variants for all colors. Include ThemeScript to prevent flash of unstyled content:

@layout.ThemeScript("")

See the Dark Mode guide for the full setup.

RTL / Internationalization

All components use CSS logical properties (ms-, me-, ps-, pe-, start-, end-, text-start, border-s-, border-e). They automatically mirror in RTL contexts when you set dir="rtl" on a parent element.