Theming

Семантические токены (background, foreground, primary, …) задаются CSS-переменными в стиле tweakcn. Переключатель темы в шапке меняет светлую/тёмную тему через theme.js.

web/static/css/tweakcn.css

Семантические токены

Используйте утилиты токенов — например bg-background и text-foreground — в class-строках templ.

import "github.com/fastygo/templ/ui"

templ Example() {
	@ui.Group(ui.GroupProps{Class: "gap-2"}) {
		@ui.Box(ui.BoxProps{Class: "inline-block h-10 w-16 rounded-md border border-border bg-background"})
		@ui.Box(ui.BoxProps{Class: "inline-block h-10 w-16 rounded-md bg-primary"})
		@ui.Box(ui.BoxProps{Class: "inline-block h-10 w-16 rounded-md bg-muted"})
	}
}

import "github.com/fastygo/templ/ui"

templ Example() {
	@ui.Group(ui.GroupProps{Class: "gap-2"}) {
		@ui.Box(ui.BoxProps{Class: "inline-block h-10 w-16 rounded-md border border-border bg-background"})
		@ui.Box(ui.BoxProps{Class: "inline-block h-10 w-16 rounded-md bg-primary"})
		@ui.Box(ui.BoxProps{Class: "inline-block h-10 w-16 rounded-md bg-muted"})
	}
}

<body class="bg-background text-foreground">
  <!-- theme.js переключает .dark на html -->
</body>

<body class="bg-background text-foreground">
  <!-- theme.js переключает .dark на html -->
</body>