GOTHUI / DOCUMENTATION

Make it feel like yours.

Choose a color mode, compose appearance settings, or override the tokens.

Let the document choose a color mode

Set data-theme="light" or data-theme="dark" on the root HTML element. Omit the attribute to follow the operating system. With templ, set LayoutProps.Theme.

components.LayoutProps{
    Title: "Your app",
    Theme: components.ThemeDark,
}

Compose appearance settings

The appearance studio demonstrates color presets, spacing, corners, font family, text size, page width, and elevation. Preview before saving. Preferences in this demo use browser cookies; your own application controls storage.

Use its Download Go settings link for a typed components.Appearance value. Use Download CSS overrides for the corresponding stylesheet. Downloads reflect the applied preview, not unsubmitted form choices.

Override tokens

Load your stylesheet after GothUI. Variables are the extension point; avoid depending on internal selector details.

:root {
  --gothui-content-width: 90rem;
  --gothui-radius: 0.8rem;
}

Choose motion deliberately

Cards and Reveal support short entrance effects. Keep decorative motion finite and optional. The operating system’s reduced-motion preference and the explicit motion-off setting disable it. Visit Motion & surfaces to compare effects and elevation.

Verify your palette

Custom colors can change text, border, focus, and disabled-state contrast. Test your own overrides in light, dark, forced-color, and print modes. The library’s baseline color checks do not certify arbitrary themes.