theme

package
v0.1.14 Latest Latest
Warning

This package is not in the latest version of its module.

 Go to latest Published: Apr 27, 2026 License: MIT Imports: 3 Imported by: 0

Documentation

Overview

Package theme provides a comprehensive theming system for gogpu/ui.

The theme package enables consistent visual styling across an application by providing centralized definitions for colors, typography, spacing, shadows, and border radii. It supports both light and dark modes, with automatic system preference detection (platform-dependent).

Quick Start

Use the default themes for immediate styling: 

// Get the default light theme
light := theme.DefaultLight()

// Get the default dark theme
dark := theme.DefaultDark()

// Access theme properties
primaryColor := light.Colors.Primary
bodyFont := light.Typography.BodyMedium
padding := light.Spacing.M

Theme Structure

A Theme consists of several components:

  • Colors: Semantic color palette (primary, secondary, background, etc.)
  • Typography: Font families and text styles (display, headline, body, label)
  • Spacing: Consistent spacing scale (XS to XXL)
  • Shadows: Elevation-based shadow definitions
  • Radii: Border radius scale for rounded corners
  • Mode: Light, Dark, or System preference

Color Palette

The color palette uses semantic naming following Material 3 guidelines: 

theme.Colors.Primary       // Brand primary color
theme.Colors.Secondary     // Secondary accent color
theme.Colors.Background    // Window/page background
theme.Colors.Surface       // Card/panel surfaces
theme.Colors.Error         // Error states
theme.Colors.OnPrimary     // Text on primary color
theme.Colors.OnSurface     // Text on surface color

Typography

Typography follows the Material 3 type scale: 

// Display - Large, impactful text
theme.Typography.DisplayLarge
theme.Typography.DisplayMedium
theme.Typography.DisplaySmall

// Headline - Section headers
theme.Typography.HeadlineLarge
theme.Typography.HeadlineMedium
theme.Typography.HeadlineSmall

// Title - Smaller headings
theme.Typography.TitleLarge
theme.Typography.TitleMedium
theme.Typography.TitleSmall

// Body - Primary reading text
theme.Typography.BodyLarge
theme.Typography.BodyMedium
theme.Typography.BodySmall

// Label - UI labels and buttons
theme.Typography.LabelLarge
theme.Typography.LabelMedium
theme.Typography.LabelSmall

Thread Safety

Themes are designed to be immutable by convention. Once created, a theme should not be modified. This allows themes to be safely shared across goroutines without synchronization. If you need different themes for different parts of your application, create separate Theme instances.

Extensions

The Theme struct includes an extensions map for custom theme data: 

theme := theme.DefaultLight()
theme.Extensions["my-component"] = MyComponentTheme{...}

This allows third-party components to add their own theme properties while maintaining compatibility with the core theme system.

Creating Custom Themes

Build custom themes by modifying a base theme: 

func MyBrandTheme() *theme.Theme {
    t := theme.DefaultLight()
    t.Colors.Primary = widget.Hex(0x6200EE)      // Purple
    t.Colors.Secondary = widget.Hex(0x03DAC6)    // Teal
    return t
}

System Preference Detection

The ThemeMode.System value indicates that the theme should follow the operating system's color scheme preference. Actual detection is handled by the platform integration layer (not this package). 

if theme.Mode == theme.ModeSystem {
    // Platform layer should detect OS preference
    // and apply appropriate light/dark theme
}

Index

Constants

This section is empty.

Variables

This section is empty.

Functions

func ContrastColor 

func ContrastColor(background, onLight, onDark widget.Color) widget.Color

ContrastColor returns an appropriate text color for the given background.

This uses a simple luminance calculation to determine whether white or black text would provide better contrast on the given background color.

The onLight color is returned for light backgrounds (luminance >= 0.5), and onDark is returned for dark backgrounds.

func Count 

func Count() int

Count returns the number of themes in the global registry.

func Darken 

func Darken(c widget.Color, amount float32) widget.Color

Darken returns a darker version of the color by the given amount.

The amount should be in the range [0, 1], where 0 returns the original color and 1 returns black.

func ExtensionAs 

func ExtensionAs[T ThemeExtension](t *Theme, name string) (T, bool)

ExtensionAs retrieves and type-asserts a ThemeExtension.

This is a generic helper that provides type-safe access to extensions. It returns the typed extension and true if found and of the correct type, or the zero value and false otherwise.

Example: 

if ext, ok := theme.ExtensionAs[*CorporateExtension](theme, "corporate"); ok {
    canvas.DrawRect(bounds, RectStyle{Fill: ext.BrandPrimary})
}

func Has 

func Has(name string) bool

Has returns true if a theme with the given name is in the global registry.

func LerpFloat32 

func LerpFloat32(a, b, t float32) float32

LerpFloat32 interpolates between two float32 values.

This is a helper function for implementing ThemeExtension.Lerp().

func LerpInt 

func LerpInt(a, b int, t float32) int

LerpInt interpolates between two int values.

The result is rounded to the nearest integer. This is a helper function for implementing ThemeExtension.Lerp().

func LerpString 

func LerpString(a, b string, t float32) string

LerpString interpolates between two strings for animation.

Since strings cannot be mathematically interpolated, this function returns a when t < 0.5 and b when t >= 0.5.

This is a helper function for implementing ThemeExtension.Lerp().

func Lighten 

func Lighten(c widget.Color, amount float32) widget.Color

Lighten returns a lighter version of the color by the given amount.

The amount should be in the range [0, 1], where 0 returns the original color and 1 returns white.

func List 

func List() []string

List returns the names of all themes in the global registry.

The names are returned in sorted order.

Example: 

for _, name := range theme.List() {
    info, _ := theme.Info(name)
    fmt.Printf("%s: %s\n", name, info.Description)
}

func ListByVariant 

func ListByVariant(variant ThemeVariant) []string

ListByVariant returns names of themes in the global registry that support the given variant.

func Register 

func Register(name string, theme *Theme, info ...ThemeInfo)

Register adds a theme to the global registry.

This is the primary way to register themes. Third-party packages typically call this in their init() function.

Example: 

// In your theme package's init()
func init() {
    theme.Register("my-theme", myTheme, theme.ThemeInfo{
        Name:        "My Theme",
        Description: "A custom theme",
    })
}

func Unregister 

func Unregister(name string) bool

Unregister removes a theme from the global registry.

Returns true if the theme was found and removed.

func WithOpacity 

func WithOpacity(c widget.Color, opacity float32) widget.Color

WithOpacity returns a copy of the color with the given opacity applied.

This multiplies the existing alpha by the opacity factor. opacity should be in the range [0, 1].

Types

type ColorPalette 

type ColorPalette struct {
	// Primary brand colors
	Primary      widget.Color
	PrimaryLight widget.Color
	PrimaryDark  widget.Color

	// Secondary accent colors
	Secondary      widget.Color
	SecondaryLight widget.Color
	SecondaryDark  widget.Color

	// Surface colors
	Background     widget.Color
	Surface        widget.Color
	SurfaceVariant widget.Color

	// Semantic colors
	Error   widget.Color
	Warning widget.Color
	Success widget.Color
	Info    widget.Color

	// On-colors (text/icons on corresponding backgrounds)
	OnPrimary    widget.Color
	OnSecondary  widget.Color
	OnBackground widget.Color
	OnSurface    widget.Color
	OnError      widget.Color

	// UI element colors
	Divider widget.Color
	Outline widget.Color
	Shadow  widget.Color
}

ColorPalette defines the semantic colors for a theme.

ColorPalette follows Material 3 design guidelines with semantic naming that describes the purpose of each color rather than its appearance. This allows themes to be switched between light and dark modes while maintaining consistent meaning.

Color Categories

Primary colors:

  • Primary: The brand's main color, used for key UI elements
  • PrimaryLight: A lighter variant for hover states or containers
  • PrimaryDark: A darker variant for pressed states or emphasis

Secondary colors:

  • Secondary: An accent color for less prominent elements
  • SecondaryLight: A lighter secondary variant
  • SecondaryDark: A darker secondary variant

Surface colors:

  • Background: The main window/page background
  • Surface: Card, panel, and dialog surfaces
  • SurfaceVariant: Alternative surface for visual distinction

Semantic colors:

  • Error: Error states and destructive actions
  • Warning: Warning states and cautionary actions
  • Success: Success states and confirmations
  • Info: Informational states and tips

On-colors (text/icon colors for use ON the corresponding background):

  • OnPrimary: Text/icons on Primary color
  • OnSecondary: Text/icons on Secondary color
  • OnBackground: Text/icons on Background color
  • OnSurface: Text/icons on Surface color
  • OnError: Text/icons on Error color

UI element colors:

  • Divider: Lines separating content
  • Outline: Borders and outlines
  • Shadow: Shadow color (typically semi-transparent black)

func (*ColorPalette) Lerp 

func (p *ColorPalette) Lerp(other *ColorPalette, t float32) ColorPalette

Lerp returns a color palette linearly interpolated between p and other.

t=0 returns p, t=1 returns other. This is useful for animating between themes.

func (*ColorPalette) WithAlpha 

func (p *ColorPalette) WithAlpha(alpha float32) ColorPalette

WithAlpha returns a copy of the palette with all colors adjusted to the given alpha.

This is useful for creating disabled or overlay states.

type CornerRadius 

type CornerRadius struct {
	TopLeft     float32
	TopRight    float32
	BottomRight float32
	BottomLeft  float32
}

CornerRadius represents corner radii for a rectangle.

This allows different radius values for each corner, useful for elements like tabs that need selective rounding.

func Bottom 

func Bottom(radius float32) CornerRadius

Bottom creates a CornerRadius with rounding only on the bottom corners.

func Left 

func Left(radius float32) CornerRadius

Left creates a CornerRadius with rounding only on the left corners. 

func Right(radius float32) CornerRadius

Right creates a CornerRadius with rounding only on the right corners.

func Top 

func Top(radius float32) CornerRadius

Top creates a CornerRadius with rounding only on the top corners.

func Uniform 

func Uniform(radius float32) CornerRadius

Uniform creates a CornerRadius with the same value for all corners.

func (CornerRadius) IsUniform 

func (c CornerRadius) IsUniform() bool

IsUniform returns true if all corners have the same radius.

func (CornerRadius) Max 

func (c CornerRadius) Max() float32

Max returns the largest corner radius value.

func (CornerRadius) Scale 

func (c CornerRadius) Scale(factor float32) CornerRadius

Scale returns a copy with all corners scaled by the given factor.

type ElevationShadow 

type ElevationShadow struct {
	// Key is the primary shadow from the key (directional) light.
	//
	// This shadow is typically sharper and more offset.
	Key Shadow

	// Ambient is the secondary shadow from ambient (environmental) light.
	//
	// This shadow is typically softer and less offset.
	Ambient Shadow
}

ElevationShadow defines a multi-layered shadow for realistic elevation.

Real shadows often consist of multiple layers: a key light creating a crisp shadow, and ambient light creating a soft shadow. This struct allows combining multiple shadow layers for more realistic effects.

func (ElevationShadow) Scale 

func (e ElevationShadow) Scale(factor float32) ElevationShadow

Scale returns a copy with both shadow layers scaled.

func (ElevationShadow) WithAlpha 

func (e ElevationShadow) WithAlpha(alpha float32) ElevationShadow

WithAlpha returns a copy with both shadow layers adjusted to the given alpha.

type FontStyle 

type FontStyle uint8

FontStyle represents the style (posture) of a font. 

const (
	// FontStyleNormal is the standard upright style.
	FontStyleNormal FontStyle = iota

	// FontStyleItalic is the italic style with modified letterforms.
	FontStyleItalic

	// FontStyleOblique is a slanted version of the normal style.
	FontStyleOblique
)

func (FontStyle) String 

func (s FontStyle) String() string

String returns the human-readable name for the font style.

type FontWeight 

type FontWeight uint16

FontWeight represents the weight (boldness) of a font.

Font weights follow the CSS/OpenType standard where 400 is normal and 700 is bold. Not all fonts support all weights; the system will use the closest available weight. 

const (
	// FontWeightThin is the thinnest available weight (100).
	FontWeightThin FontWeight = 100

	// FontWeightExtraLight is extra-light weight (200).
	FontWeightExtraLight FontWeight = 200

	// FontWeightLight is light weight (300).
	FontWeightLight FontWeight = 300

	// FontWeightNormal is the standard weight (400).
	FontWeightNormal FontWeight = 400

	// FontWeightMedium is medium weight (500).
	FontWeightMedium FontWeight = 500

	// FontWeightSemiBold is semi-bold weight (600).
	FontWeightSemiBold FontWeight = 600

	// FontWeightBold is bold weight (700).
	FontWeightBold FontWeight = 700

	// FontWeightExtraBold is extra-bold weight (800).
	FontWeightExtraBold FontWeight = 800

	// FontWeightBlack is the heaviest weight (900).
	FontWeightBlack FontWeight = 900
)

func (FontWeight) IsBold 

func (w FontWeight) IsBold() bool

IsBold returns true if this weight is considered bold (>= 700).

func (FontWeight) IsLight 

func (w FontWeight) IsLight() bool

IsLight returns true if this weight is considered light (<= 300).

func (FontWeight) String 

func (w FontWeight) String() string

String returns the human-readable name for the font weight.

type RadiusScale 

type RadiusScale struct {
	// None is no rounding (sharp corners) - 0px.
	None float32

	// XS is extra-small rounding - 2px.
	//
	// Use for subtle rounding on small elements.
	XS float32

	// S is small rounding - 4px.
	//
	// Use for buttons, chips, and small cards.
	S float32

	// M is medium rounding - 8px.
	//
	// Use for standard cards and containers.
	M float32

	// L is large rounding - 12px.
	//
	// Use for dialogs and larger containers.
	L float32

	// XL is extra-large rounding - 16px.
	//
	// Use for sheets and prominent surfaces.
	XL float32

	// XXL is double extra-large rounding - 24px.
	//
	// Use for floating action buttons and rounded shapes.
	XXL float32

	// Full is fully circular rounding - typically 9999px.
	//
	// Use for pills, badges, and circular buttons.
	// A very large value ensures circular shapes regardless of element size.
	Full float32
}

RadiusScale defines the border radius values for a theme.

RadiusScale provides consistent corner rounding across the application. Following Material 3, the scale ranges from no rounding (None) to fully circular (Full).

Usage: 

radius := theme.Radii.M  // Standard card radius
buttonRadius := theme.Radii.Full  // Pill-shaped buttons

func DefaultRadii 

func DefaultRadii() RadiusScale

DefaultRadii returns a RadiusScale following Material 3 guidelines.

The scale provides sizes suitable for various UI elements: 

None: 0px   - Sharp corners
XS:   2px   - Subtle rounding
S:    4px   - Buttons, chips
M:    8px   - Cards
L:   12px   - Dialogs
XL:  16px   - Sheets
XXL: 24px   - FABs
Full: 9999px - Pills, circles

func SharpRadii 

func SharpRadii() RadiusScale

SharpRadii returns a RadiusScale with minimal rounding.

This creates a sharp, angular aesthetic: 

None: 0px
XS:   1px
S:    2px
M:    3px
L:    4px
XL:   6px
XXL:  8px
Full: 9999px

func SoftRadii 

func SoftRadii() RadiusScale

SoftRadii returns a RadiusScale with generous rounding.

This creates a soft, friendly aesthetic: 

None: 0px
XS:   4px
S:    8px
M:   16px
L:   24px
XL:  32px
XXL: 48px
Full: 9999px

func (RadiusScale) Clamp 

func (r RadiusScale) Clamp(value, minVal, maxVal float32) float32

Clamp returns the radius clamped to the range [minVal, maxVal].

This is useful when you need to ensure a radius fits within specific bounds for a particular element.

func (RadiusScale) Scale 

func (r RadiusScale) Scale(factor float32) RadiusScale

Scale returns a copy of the radius scale with all values multiplied by the given factor (except None and Full).

This is useful for adjusting the overall "roundness" of a theme. None stays at 0, Full stays at 9999.

Example: 

sharper := theme.DefaultRadii().Scale(0.5)  // Half the rounding
rounder := theme.DefaultRadii().Scale(1.5)  // More rounded

type Shadow 

type Shadow struct {
	// OffsetX is the horizontal offset of the shadow in logical pixels.
	//
	// Positive values move the shadow to the right, negative to the left.
	OffsetX float32

	// OffsetY is the vertical offset of the shadow in logical pixels.
	//
	// Positive values move the shadow down, negative values move it up.
	OffsetY float32

	// Blur is the blur radius in logical pixels.
	//
	// Larger values create softer, more diffuse shadows. A value of 0
	// creates a sharp shadow.
	Blur float32

	// Spread is the spread radius in logical pixels.
	//
	// Positive values expand the shadow, negative values contract it.
	// This affects the shadow size relative to the element size.
	Spread float32

	// Color is the shadow color, typically semi-transparent black.
	Color widget.Color
}

Shadow defines a single shadow effect.

Shadows create depth and elevation effects by drawing blurred shapes behind elements. They follow the CSS box-shadow model with offset, blur, spread, and color properties.

Example: 

shadow := theme.Shadow{
    OffsetX: 0,
    OffsetY: 2,
    Blur:    4,
    Spread:  0,
    Color:   widget.RGBA(0, 0, 0, 0.1),
}

func (Shadow) IsZero 

func (s Shadow) IsZero() bool

IsZero returns true if the shadow has no visible effect.

A shadow is considered zero if it has no blur, no spread, and is fully transparent.

func (Shadow) Scale 

func (s Shadow) Scale(factor float32) Shadow

Scale returns a copy of the shadow with all dimensions scaled.

This scales offset, blur, and spread proportionally.

func (Shadow) WithAlpha 

func (s Shadow) WithAlpha(alpha float32) Shadow

WithAlpha returns a copy of the shadow with a different alpha value.

This is useful for adjusting shadow intensity without changing the color.

func (Shadow) WithBlur 

func (s Shadow) WithBlur(blur float32) Shadow

WithBlur returns a copy of the shadow with a different blur radius.

func (Shadow) WithOffset 

func (s Shadow) WithOffset(x, y float32) Shadow

WithOffset returns a copy of the shadow with different offsets.

type ShadowStyles 

type ShadowStyles struct {
	// Level0 has no shadow (elevation 0dp).
	Level0 ElevationShadow

	// Level1 is for subtle elevation (1-3dp).
	//
	// Use for cards, buttons at rest, and surfaces at rest state.
	Level1 ElevationShadow

	// Level2 is for medium elevation (4-6dp).
	//
	// Use for hovering buttons, raised surfaces, and FAB at rest.
	Level2 ElevationShadow

	// Level3 is for elevated elements (7-12dp).
	//
	// Use for navigation drawers, bottom sheets, and menus.
	Level3 ElevationShadow

	// Level4 is for high elevation (13-16dp).
	//
	// Use for dialogs and full-screen dialogs.
	Level4 ElevationShadow

	// Level5 is for the highest elevation (17-24dp).
	//
	// Use for tooltips, overlays, and temporary surfaces.
	Level5 ElevationShadow
}

ShadowStyles defines the shadow system for a theme.

ShadowStyles provides elevation-based shadows following Material Design principles. Each elevation level represents a different height above the surface, with higher elevations creating larger, more diffuse shadows.

Elevation levels:

  • Level0: No elevation (flat on surface)
  • Level1: Slight elevation (cards, buttons at rest)
  • Level2: Medium elevation (hovering buttons, FAB at rest)
  • Level3: Higher elevation (navigation drawers, menus)
  • Level4: High elevation (dialogs)
  • Level5: Highest elevation (temporary surfaces like tooltips)

func DefaultShadowsDark 

func DefaultShadowsDark() ShadowStyles

DefaultShadowsDark returns shadow styles optimized for dark themes.

Dark themes use stronger shadows to create contrast against dark backgrounds. The shadows are also slightly more opaque.

func DefaultShadowsLight 

func DefaultShadowsLight() ShadowStyles

DefaultShadowsLight returns shadow styles optimized for light themes.

These shadows use semi-transparent black, which works well on light backgrounds. The values follow Material Design elevation guidelines.

func (*ShadowStyles) ForElevation 

func (s *ShadowStyles) ForElevation(level int) ElevationShadow

ForElevation returns the appropriate shadow for a given elevation level (0-5).

If level is out of range, it returns the closest valid level (0 or 5).

type SpacingScale 

type SpacingScale struct {
	// XXS is the smallest spacing value (2px).
	//
	// Use for tight spacing between closely related elements.
	XXS float32

	// XS is extra-small spacing (4px).
	//
	// Use for compact layouts or icon padding.
	XS float32

	// S is small spacing (8px).
	//
	// Use for spacing between related elements, small gaps.
	S float32

	// M is medium spacing (16px) - the base unit.
	//
	// Use for standard padding and margins.
	M float32

	// L is large spacing (24px).
	//
	// Use for separating distinct sections.
	L float32

	// XL is extra-large spacing (32px).
	//
	// Use for major section breaks or large containers.
	XL float32

	// XXL is double extra-large spacing (48px).
	//
	// Use for page-level margins or hero sections.
	XXL float32

	// XXXL is the largest spacing value (64px).
	//
	// Use for major layout divisions or very large screens.
	XXXL float32
}

SpacingScale defines a consistent spacing system for a theme.

SpacingScale provides predefined spacing values that maintain visual consistency across the application. Values follow a base-4 scale, which is common in modern design systems.

Use these values for margins, padding, gaps, and other spacing needs: 

padding := theme.Spacing.M  // 16px standard padding
gap := theme.Spacing.S      // 8px gap between items

The scale progression (XXS to XXXL) allows for fine-grained control while maintaining visual harmony.

func ComfortableSpacing 

func ComfortableSpacing() SpacingScale

ComfortableSpacing returns a spacious scale for comfortable layouts.

This is a pre-configured scale suitable for content-focused interfaces: 

XXS:  4px
XS:   8px
S:   12px
M:   24px
L:   32px
XL:  48px
XXL: 64px
XXXL: 96px

func DefaultSpacing 

func DefaultSpacing() SpacingScale

DefaultSpacing returns a SpacingScale following a base-4 progression.

The scale uses multiples of 4 for consistent sizing: 

XXS:  2px (half base)
XS:   4px (1x base)
S:    8px (2x base)
M:   16px (4x base)
L:   24px (6x base)
XL:  32px (8x base)
XXL: 48px (12x base)
XXXL: 64px (16x base)

func DenseSpacing 

func DenseSpacing() SpacingScale

DenseSpacing returns a compact spacing scale for dense layouts.

This is a pre-configured scale suitable for data-dense interfaces: 

XXS:  1px
XS:   2px
S:    4px
M:    8px
L:   12px
XL:  16px
XXL: 24px
XXXL: 32px

func (SpacingScale) Compact 

func (s SpacingScale) Compact() SpacingScale

Compact returns a compact version of the spacing scale (75% of original).

func (SpacingScale) Inset 

func (s SpacingScale) Inset(value float32) (top, right, bottom, left float32)

Inset returns spacing values suitable for inset (padding) on all sides.

The returned values represent top, right, bottom, left in that order, all set to the specified spacing value.

func (SpacingScale) InsetHorizontal 

func (s SpacingScale) InsetHorizontal(value float32) (top, right, bottom, left float32)

InsetHorizontal returns spacing values for horizontal-only inset.

Returns zero for top/bottom and the specified value for right/left.

func (SpacingScale) InsetVertical 

func (s SpacingScale) InsetVertical(value float32) (top, right, bottom, left float32)

InsetVertical returns spacing values for vertical-only inset.

Returns the specified value for top/bottom and zero for right/left.

func (SpacingScale) Relaxed 

func (s SpacingScale) Relaxed() SpacingScale

Relaxed returns a relaxed version of the spacing scale (150% of original).

func (SpacingScale) Scale 

func (s SpacingScale) Scale(factor float32) SpacingScale

Scale returns a copy of the spacing scale with all values multiplied by the given factor.

This is useful for density adjustments or accessibility settings. A factor of 1.0 returns the original values, 0.75 creates a compact scale, 1.5 creates a relaxed scale.

Example: 

compact := theme.DefaultSpacing().Scale(0.75)
relaxed := theme.DefaultSpacing().Scale(1.5)

type TextStyle 

type TextStyle struct {
	// Font is the font family name (e.g., "Roboto", "Inter", "System").
	//
	// If the font is not available, the system will fall back to a
	// default sans-serif font.
	Font string

	// Size is the font size in logical pixels (sp in Material terms).
	Size float32

	// Weight is the font weight (boldness).
	Weight FontWeight

	// Style is the font style (normal, italic, oblique).
	Style FontStyle

	// LineHeight is the line height in logical pixels.
	//
	// This defines the vertical spacing between baselines. If zero,
	// a default line height is calculated from the font size.
	LineHeight float32

	// LetterSpacing is the additional spacing between characters in logical pixels.
	//
	// Positive values increase spacing, negative values decrease it.
	// Zero means normal spacing.
	LetterSpacing float32
}

TextStyle defines the complete styling for text rendering.

TextStyle combines all properties needed to render text: font family, size, weight, style, line height, and letter spacing. It follows Material 3 typography conventions.

Example: 

style := theme.TextStyle{
    Font:          "Roboto",
    Size:          16,
    Weight:        theme.FontWeightNormal,
    Style:         theme.FontStyleNormal,
    LineHeight:    24,
    LetterSpacing: 0,
}

func (TextStyle) Bold 

func (t TextStyle) Bold() TextStyle

Bold returns a copy of the style with bold weight.

func (TextStyle) Italic 

func (t TextStyle) Italic() TextStyle

Italic returns a copy of the style with italic style.

func (TextStyle) WithFont 

func (t TextStyle) WithFont(font string) TextStyle

WithFont returns a copy of the style with a different font family.

func (TextStyle) WithLetterSpacing 

func (t TextStyle) WithLetterSpacing(letterSpacing float32) TextStyle

WithLetterSpacing returns a copy of the style with different letter spacing.

func (TextStyle) WithLineHeight 

func (t TextStyle) WithLineHeight(lineHeight float32) TextStyle

WithLineHeight returns a copy of the style with a different line height.

func (TextStyle) WithSize 

func (t TextStyle) WithSize(size float32) TextStyle

WithSize returns a copy of the style with a different size.

func (TextStyle) WithStyle 

func (t TextStyle) WithStyle(style FontStyle) TextStyle

WithStyle returns a copy of the style with a different font style.

func (TextStyle) WithWeight 

func (t TextStyle) WithWeight(weight FontWeight) TextStyle

WithWeight returns a copy of the style with a different weight.

type Theme 

type Theme struct {
	// Name is a human-readable identifier for the theme.
	//
	// Examples: "Light", "Dark", "Ocean Blue", "High Contrast"
	Name string

	// Mode indicates whether this is a light, dark, or system-following theme.
	Mode ThemeMode

	// Colors defines the semantic color palette.
	Colors ColorPalette

	// Typography defines the type scale and text styles.
	Typography Typography

	// Spacing defines the spacing scale for margins and padding.
	Spacing SpacingScale

	// Shadows defines the elevation-based shadow styles.
	Shadows ShadowStyles

	// Radii defines the border radius scale.
	Radii RadiusScale

	// Extensions allows custom theme data for third-party components.
	//
	// Components can store their own theme properties here using a unique
	// key (typically the component package path). This enables theming
	// of custom components while maintaining compatibility with the core
	// theme system.
	//
	// Example:
	//
	//	type MyComponentTheme struct {
	//	    AccentColor widget.Color
	//	    BorderWidth float32
	//	}
	//
	//	// Store custom theme data
	//	theme.Extensions["myorg/mycomponent"] = MyComponentTheme{
	//	    AccentColor: widget.Hex(0xFF5722),
	//	    BorderWidth: 2,
	//	}
	//
	//	// Retrieve custom theme data
	//	if ext, ok := theme.Extensions["myorg/mycomponent"].(MyComponentTheme); ok {
	//	    // Use ext.AccentColor, ext.BorderWidth
	//	}
	Extensions map[string]any
	// contains filtered or unexported fields
}

Theme defines the complete visual style for an application.

Theme combines all visual properties needed to style UI components: colors, typography, spacing, shadows, and border radii. Themes are designed to be immutable by convention - once created, they should not be modified. This allows safe sharing across goroutines.

Use DefaultLight or DefaultDark for pre-configured themes, or build custom themes by modifying a base theme: 

func MyBrandTheme() *Theme {
    t := DefaultLight()
    t.Colors.Primary = widget.Hex(0x6200EE)
    return t
}

Themes can be extended with custom data using the Extensions map, which allows third-party components to add their own theme properties.

func DefaultDark 

func DefaultDark() *Theme

DefaultDark returns a pre-configured dark theme following Material 3 guidelines.

The dark theme uses a dark gray background with light text and lighter primary colors for better contrast. It's suitable for low-light environments and can reduce eye strain and save battery on OLED displays.

Color scheme:

  • Primary: Light Blue (#64B5F6)
  • Secondary: Light Teal (#4DB6AC)
  • Background: Dark gray (#121212)
  • Surface: Slightly lighter gray (#1E1E1E)
  • Error: Light Red (#EF5350)

Example: 

theme := theme.DefaultDark()
backgroundColor := theme.Colors.Background

func DefaultHighContrast 

func DefaultHighContrast() *Theme

DefaultHighContrast returns a high-contrast theme for accessibility.

This theme uses maximum contrast ratios (black on white) for better readability by users with visual impairments. It follows WCAG AAA guidelines with contrast ratios of at least 7:1.

Color scheme:

  • Primary: Strong Blue (#0033CC)
  • Background: White (#FFFFFF)
  • Text: Black (#000000)
  • Error: Strong Red (#CC0000)

Example: 

theme := theme.DefaultHighContrast()

func DefaultLight 

func DefaultLight() *Theme

DefaultLight returns a pre-configured light theme following Material 3 guidelines.

The light theme uses a white background with dark text and blue primary colors. It's suitable for well-lit environments and is often the default choice for applications.

Color scheme:

  • Primary: Blue (#1976D2)
  • Secondary: Teal (#009688)
  • Background: White (#FFFFFF)
  • Surface: Light gray (#FAFAFA)
  • Error: Red (#D32F2F)

Example: 

theme := theme.DefaultLight()
primaryColor := theme.Colors.Primary
bodyStyle := theme.Typography.BodyMedium

func ForMode 

func ForMode(mode ThemeMode) *Theme

ForMode returns the appropriate default theme for the given mode.

If mode is ModeSystem, this returns the light theme. Use your platform's system preference detection to determine the actual mode and call this with ModeLight or ModeDark.

func Get 

func Get(name string) (*Theme, bool)

Get retrieves a theme from the global registry by name.

Returns the theme and true if found, or nil and false if not found.

Example: 

if theme, ok := theme.Get("corporate"); ok {
    app.SetTheme(theme)
}

func Green 

func Green() *Theme

Green returns a theme with green primary colors.

This is an example of a branded theme using Material Design green palette.

Color scheme:

  • Primary: Green (#388E3C)
  • Secondary: Lime (#689F38)
  • Background: White

func MustGet 

func MustGet(name string) *Theme

MustGet retrieves a theme from the global registry or panics if not found.

Use this for themes you know exist, such as the built-in "light" and "dark" themes.

Example: 

lightTheme := theme.MustGet("light")
darkTheme := theme.MustGet("dark")

func New 

func New(name string, mode ThemeMode) *Theme

New creates a new Theme with the given name and mode.

The theme is initialized with default values for all properties. Use this as a starting point for custom themes.

Example: 

theme := theme.New("My Brand", theme.ModeLight)
theme.Colors.Primary = widget.Hex(0x6200EE)

func Orange 

func Orange() *Theme

Orange returns a theme with orange primary colors.

This is an example of a branded theme using Material Design orange palette.

Color scheme:

  • Primary: Orange (#F57C00)
  • Secondary: Amber (#FFA000)
  • Background: White

func Purple 

func Purple() *Theme

Purple returns a theme with purple primary colors.

This is an example of a branded theme using Material Design purple palette.

Color scheme:

  • Primary: Purple (#7B1FA2)
  • Secondary: Pink (#F06292)
  • Background: White

func (*Theme) Clone 

func (t *Theme) Clone() *Theme

Clone creates a deep copy of the theme.

This is useful when you want to create a variant of an existing theme without modifying the original.

Note: Extensions are shallow-copied. If you have mutable extension values, you should deep-copy them manually.

func (*Theme) Comfortable 

func (t *Theme) Comfortable() *Theme

Comfortable returns a copy of the theme with increased spacing (125%).

This creates a more spacious layout suitable for touch interfaces.

func (*Theme) Compact 

func (t *Theme) Compact() *Theme

Compact returns a copy of the theme with reduced spacing (75%).

This creates a denser layout suitable for data-heavy interfaces.

func (*Theme) GetExtension 

func (t *Theme) GetExtension(key string) (any, bool)

GetExtension retrieves a custom extension value from the theme.

Returns the value and true if found, or nil and false if not found.

func (*Theme) IsDark 

func (t *Theme) IsDark() bool

IsDark returns true if this theme uses a dark color scheme.

func (*Theme) IsLight 

func (t *Theme) IsLight() bool

IsLight returns true if this theme uses a light color scheme.

func (*Theme) LerpExtensions 

func (t *Theme) LerpExtensions(other *Theme, amount float32)

LerpExtensions interpolates all extensions with another theme.

For each extension in this theme, if the other theme has an extension with the same name, Lerp is called to interpolate them. Extensions that exist in only one theme are not interpolated.

t ranges from 0.0 (this theme) to 1.0 (other theme).

This enables smooth theme transition animations.

func (*Theme) MergeExtensions 

func (t *Theme) MergeExtensions(other *Theme)

MergeExtensions merges extensions from another theme.

For each extension in the other theme, if this theme has an extension with the same name, Merge is called to combine them. Otherwise, the extension is simply copied.

This enables theme inheritance where child themes can override specific extension properties.

func (*Theme) OnSurface 

func (t *Theme) OnSurface() widget.Color

OnSurface returns the default text/icon color for surface backgrounds.

This satisfies the widget.ThemeProvider interface and returns the OnSurface color from the theme's color palette.

func (*Theme) RegisterExtension 

func (t *Theme) RegisterExtension(ext ThemeExtension)

RegisterExtension registers a ThemeExtension with the theme.

ThemeExtension provides a type-safe way to add custom properties that support animation (Lerp), inheritance (Merge), and copying (CopyWith). Use this for extensions that need these advanced features.

For simple key-value storage, use SetExtension instead.

This modifies the theme in place. For immutable usage, use Clone() first.

Example: 

theme.RegisterExtension(&CorporateExtension{
    BrandPrimary: widget.Hex(0x00529B),
})

func (*Theme) ScaleSpacing 

func (t *Theme) ScaleSpacing(factor float32) *Theme

ScaleSpacing returns a copy of the theme with scaled spacing.

This is useful for density adjustments. Factor of 1.0 keeps original spacing, 0.75 creates compact spacing, etc.

func (*Theme) ScaleTypography 

func (t *Theme) ScaleTypography(factor float32) *Theme

ScaleTypography returns a copy of the theme with scaled typography.

This is useful for accessibility settings that increase text size. Factor of 1.0 keeps original sizes, 1.25 increases by 25%, etc.

func (*Theme) SetExtension 

func (t *Theme) SetExtension(key string, value any)

SetExtension sets a custom extension value on the theme.

This modifies the theme in place. For immutable usage, use Clone() first.

func (*Theme) TypedExtension 

func (t *Theme) TypedExtension(name string) ThemeExtension

TypedExtension retrieves a registered ThemeExtension by name.

Returns nil if no extension with that name is registered. For type-safe access with automatic casting, use the ExtensionAs generic function.

Example: 

ext := theme.TypedExtension("corporate")
if corp, ok := ext.(*CorporateExtension); ok {
    // Use corp.BrandPrimary
}

func (*Theme) TypedExtensions 

func (t *Theme) TypedExtensions() map[string]ThemeExtension

TypedExtensions returns all registered ThemeExtensions.

The returned map is a copy and can be safely modified.

func (*Theme) WithColors 

func (t *Theme) WithColors(colors *ColorPalette) *Theme

WithColors returns a copy of the theme with a different color palette.

func (*Theme) WithMode 

func (t *Theme) WithMode(mode ThemeMode) *Theme

WithMode returns a copy of the theme with a different mode.

Note: This only changes the Mode field. For a full light/dark switch, you should also update Colors and Shadows appropriately.

func (*Theme) WithName 

func (t *Theme) WithName(name string) *Theme

WithName returns a copy of the theme with a different name.

func (*Theme) WithRadii 

func (t *Theme) WithRadii(radii RadiusScale) *Theme

WithRadii returns a copy of the theme with a different radius scale.

func (*Theme) WithShadows 

func (t *Theme) WithShadows(shadows *ShadowStyles) *Theme

WithShadows returns a copy of the theme with different shadow styles.

func (*Theme) WithSpacing 

func (t *Theme) WithSpacing(spacing SpacingScale) *Theme

WithSpacing returns a copy of the theme with a different spacing scale.

func (*Theme) WithTypography 

func (t *Theme) WithTypography(typography *Typography) *Theme

WithTypography returns a copy of the theme with different typography.

type ThemeExtension 

type ThemeExtension interface {
	// Name returns the unique identifier for this extension.
	//
	// The name should be a stable string that uniquely identifies the
	// extension type. Using a package path or namespace is recommended
	// to avoid collisions (e.g., "myorg/branding", "corporate").
	Name() string

	// Merge combines this extension with another, typically for theme inheritance.
	//
	// When a child theme has an extension with the same name as a parent theme,
	// Merge is called to combine them. The other parameter is the child's
	// extension that should override values from this extension.
	//
	// If other is not the same type, implementations should return the
	// original extension unchanged.
	//
	// Example:
	//
	//	func (e *MyExt) Merge(other ThemeExtension) ThemeExtension {
	//	    if o, ok := other.(*MyExt); ok {
	//	        return o // Child completely overrides parent
	//	    }
	//	    return e
	//	}
	Merge(other ThemeExtension) ThemeExtension

	// Lerp interpolates between this extension and another for animations.
	//
	// t ranges from 0.0 (this) to 1.0 (other). This enables smooth theme
	// transitions when animating between light and dark themes, or between
	// different brand themes.
	//
	// For properties that cannot be interpolated (like strings), return
	// the value from this extension when t < 0.5 and from other when t >= 0.5.
	//
	// If other is not the same type, implementations should return the
	// original extension unchanged.
	//
	// Example:
	//
	//	func (e *MyExt) Lerp(other ThemeExtension, t float32) ThemeExtension {
	//	    if o, ok := other.(*MyExt); ok {
	//	        return &MyExt{
	//	            Color: e.Color.Lerp(o.Color, t),
	//	            Label: lerpString(e.Label, o.Label, t),
	//	        }
	//	    }
	//	    return e
	//	}
	Lerp(other ThemeExtension, t float32) ThemeExtension

	// CopyWith creates a modified copy of the extension.
	//
	// This allows creating variations of an extension without mutating
	// the original. The overrides map uses string keys that are specific
	// to each extension type.
	//
	// Example:
	//
	//	func (e *MyExt) CopyWith(overrides map[string]any) ThemeExtension {
	//	    copy := *e
	//	    if v, ok := overrides["color"].(widget.Color); ok {
	//	        copy.Color = v
	//	    }
	//	    return &copy
	//	}
	CopyWith(overrides map[string]any) ThemeExtension
}

ThemeExtension allows custom theme properties for third-party components.

ThemeExtension provides a mechanism for third-party developers and enterprise applications to add custom properties to themes without modifying the core Theme struct. This follows Flutter's proven pattern for extensible theming.

Implementing a ThemeExtension

To create a custom extension, implement all four methods: 

type CorporateExtension struct {
    BrandPrimary   widget.Color
    BrandSecondary widget.Color
    LogoURL        string
}

func (e *CorporateExtension) Name() string { return "corporate" }

func (e *CorporateExtension) Merge(other ThemeExtension) ThemeExtension {
    if o, ok := other.(*CorporateExtension); ok {
        return o // Use other's values (override)
    }
    return e // Keep original if types don't match
}

func (e *CorporateExtension) Lerp(other ThemeExtension, t float32) ThemeExtension {
    if o, ok := other.(*CorporateExtension); ok {
        return &CorporateExtension{
            BrandPrimary:   e.BrandPrimary.Lerp(o.BrandPrimary, t),
            BrandSecondary: e.BrandSecondary.Lerp(o.BrandSecondary, t),
            LogoURL:        e.LogoURL, // Can't interpolate strings
        }
    }
    return e
}

func (e *CorporateExtension) CopyWith(overrides map[string]any) ThemeExtension {
    copy := *e
    if v, ok := overrides["brand_primary"].(widget.Color); ok {
        copy.BrandPrimary = v
    }
    return &copy
}

Registering Extensions 

theme := DefaultLight()
theme.RegisterExtension(&CorporateExtension{
    BrandPrimary: widget.Hex(0x00529B),
})

Retrieving Extensions 

// Type-safe retrieval
if ext, ok := ExtensionAs[*CorporateExtension](theme, "corporate"); ok {
    canvas.DrawRect(bounds, RectStyle{Fill: ext.BrandPrimary})
}

type ThemeInfo 

type ThemeInfo struct {
	// Name is the human-readable name of the theme.
	// Example: "Material Light", "Corporate Blue"
	Name string

	// Description provides a brief description of the theme.
	// Example: "A clean, modern theme with blue accents"
	Description string

	// Author is the creator or maintainer of the theme.
	// Example: "Design Team", "John Doe"
	Author string

	// Version is the semantic version of the theme.
	// Example: "1.0.0", "2.1.3"
	Version string

	// Variants lists the color scheme variants this theme supports.
	// A theme may support light, dark, or both variants.
	Variants []ThemeVariant

	// Preview is an optional URL to a preview image of the theme.
	// This can be used in theme selection UIs to show a visual preview.
	Preview string
}

ThemeInfo describes metadata about a registered theme.

ThemeInfo provides human-readable information about a theme, including its name, description, author, and supported variants. This metadata can be used to build theme selection UIs.

Example: 

info := ThemeInfo{
    Name:        "Corporate Blue",
    Description: "Company branded theme with blue accents",
    Author:      "Design Team",
    Version:     "1.2.0",
    Variants:    []ThemeVariant{VariantLight, VariantDark},
    Preview:     "https://example.com/theme-preview.png",
}

func Info 

func Info(name string) (ThemeInfo, bool)

Info retrieves metadata about a theme from the global registry.

Returns the ThemeInfo and true if found, or an empty ThemeInfo and false if the theme is not registered.

func (ThemeInfo) HasVariant 

func (ti ThemeInfo) HasVariant(variant ThemeVariant) bool

HasVariant returns true if the theme supports the given variant.

type ThemeMode 

type ThemeMode uint8

ThemeMode represents the color scheme mode for a theme.

ThemeMode determines whether a theme uses light colors, dark colors, or follows the operating system's preference. 

const (
	// ModeLight indicates a light color scheme with dark text on light backgrounds.
	//
	// Light mode is typically used in well-lit environments and is often
	// the default for daytime use.
	ModeLight ThemeMode = iota

	// ModeDark indicates a dark color scheme with light text on dark backgrounds.
	//
	// Dark mode reduces eye strain in low-light environments and can
	// save battery on OLED displays.
	ModeDark

	// ModeSystem indicates the theme should follow the operating system's
	// color scheme preference.
	//
	// When this mode is active, the platform integration layer should detect
	// the OS preference and apply the appropriate light or dark theme.
	// This package does not perform the actual detection; it only provides
	// the mode value.
	ModeSystem
)

func (ThemeMode) IsDark 

func (m ThemeMode) IsDark() bool

IsDark returns true if this mode represents a dark color scheme.

Note: This returns false for ModeSystem, as the actual scheme depends on the operating system preference which must be determined elsewhere.

func (ThemeMode) IsLight 

func (m ThemeMode) IsLight() bool

IsLight returns true if this mode represents a light color scheme.

Note: This returns false for ModeSystem, as the actual scheme depends on the operating system preference which must be determined elsewhere.

func (ThemeMode) IsSystem 

func (m ThemeMode) IsSystem() bool

IsSystem returns true if this mode follows the system preference.

func (ThemeMode) ResolvedMode 

func (m ThemeMode) ResolvedMode(preferLight bool) ThemeMode

ResolvedMode returns the effective mode when system preference is known.

If the mode is ModeSystem, it returns lightIfSystem when preferLight is true, otherwise ModeDark. For explicit modes (ModeLight, ModeDark), it returns the mode unchanged.

Example: 

mode := theme.ModeSystem
effectiveMode := mode.ResolvedMode(osPrefersDarkMode)
// effectiveMode will be ModeDark if osPrefersDarkMode is true

func (ThemeMode) String 

func (m ThemeMode) String() string

String returns a human-readable name for the theme mode.

type ThemeRegistry 

type ThemeRegistry struct {
	// contains filtered or unexported fields
}

ThemeRegistry manages registration and retrieval of themes.

ThemeRegistry provides thread-safe storage for themes and their metadata. It enables dynamic theme discovery and switching in applications. Third-party packages can register themes via init() functions, making them automatically available to applications.

ThemeRegistry follows the same patterns as other registries in the gogpu/ui ecosystem, such as the Widget Registry.

Example: 

registry := NewThemeRegistry()
registry.Register("corporate", corporateTheme, ThemeInfo{
    Name: "Corporate",
    Description: "Company branded theme",
})

// Later, retrieve the theme
if theme, ok := registry.Get("corporate"); ok {
    app.SetTheme(theme)
}

func GlobalRegistry 

func GlobalRegistry() *ThemeRegistry

GlobalRegistry returns the global theme registry.

This is useful when you need direct access to the registry instance, for example when passing it to functions that accept a *ThemeRegistry.

func NewThemeRegistry 

func NewThemeRegistry() *ThemeRegistry

NewThemeRegistry creates a new empty ThemeRegistry.

Use the global registry functions (Register, Get, List, etc.) for most use cases. Create a custom registry only when you need isolated theme management.

func (*ThemeRegistry) Clear 

func (r *ThemeRegistry) Clear()

Clear removes all themes from the registry.

This is primarily useful for testing.

func (*ThemeRegistry) Count 

func (r *ThemeRegistry) Count() int

Count returns the number of registered themes.

func (*ThemeRegistry) Get 

func (r *ThemeRegistry) Get(name string) (*Theme, bool)

Get retrieves a theme by its registered name.

Returns the theme and true if found, or nil and false if not found.

Example: 

if theme, ok := registry.Get("dark"); ok {
    app.SetTheme(theme)
}

func (*ThemeRegistry) Has 

func (r *ThemeRegistry) Has(name string) bool

Has returns true if a theme with the given name is registered.

func (*ThemeRegistry) Info 

func (r *ThemeRegistry) Info(name string) (ThemeInfo, bool)

Info retrieves metadata about a registered theme.

Returns the ThemeInfo and true if found, or an empty ThemeInfo and false if the theme is not registered.

Example: 

if info, ok := registry.Info("corporate"); ok {
    fmt.Printf("%s by %s: %s\n", info.Name, info.Author, info.Description)
}

func (*ThemeRegistry) List 

func (r *ThemeRegistry) List() []string

List returns the names of all registered themes.

The names are returned in sorted order for consistent iteration. This is useful for building theme selection UIs.

Example: 

for _, name := range registry.List() {
    fmt.Println(name)
}

func (*ThemeRegistry) ListByVariant 

func (r *ThemeRegistry) ListByVariant(variant ThemeVariant) []string

ListByVariant returns names of themes that support the given variant.

The names are returned in sorted order.

Example: 

// Get all dark themes
darkThemes := registry.ListByVariant(VariantDark)

func (*ThemeRegistry) MustGet 

func (r *ThemeRegistry) MustGet(name string) *Theme

MustGet retrieves a theme by name or panics if not found.

Use this when you are certain the theme exists (e.g., built-in themes). For optional themes, use Get instead.

Example: 

// Safe for built-in themes
lightTheme := registry.MustGet("light")

func (*ThemeRegistry) Register 

func (r *ThemeRegistry) Register(name string, theme *Theme, info ...ThemeInfo)

Register adds a theme to the registry.

The name should be a unique identifier for the theme (e.g., "light", "dark", "corporate-blue"). If a theme with the same name already exists, it will be replaced.

The optional info parameter provides metadata about the theme. If not provided, default info will be created from the theme's Name field.

Example: 

registry.Register("ocean", oceanTheme, ThemeInfo{
    Name:        "Ocean Blue",
    Description: "A calming blue theme",
    Variants:    []ThemeVariant{VariantLight},
})

func (*ThemeRegistry) Unregister 

func (r *ThemeRegistry) Unregister(name string) bool

Unregister removes a theme from the registry.

Returns true if the theme was found and removed, false otherwise. This is useful for dynamically loaded themes that need to be unloaded.

type ThemeVariant 

type ThemeVariant string

ThemeVariant represents the visual variant of a theme.

Theme variants indicate whether a theme is designed for light, dark, or system-following color schemes. A single theme may support multiple variants. 

const (
	// VariantLight indicates a light color scheme.
	VariantLight ThemeVariant = "light"

	// VariantDark indicates a dark color scheme.
	VariantDark ThemeVariant = "dark"

	// VariantSystem indicates the theme follows system preferences.
	VariantSystem ThemeVariant = "system"
)

func (ThemeVariant) String 

func (v ThemeVariant) String() string

String returns the string representation of the variant.

type Typography 

type Typography struct {
	// FontFamily is the default font family used by all text styles.
	//
	// Common values: "Roboto", "Inter", "System", "sans-serif"
	FontFamily string

	// Display styles for large, impactful text.
	//
	// Use for hero sections, page titles, or other prominent text.
	// Display text should be used sparingly for maximum impact.
	DisplayLarge  TextStyle
	DisplayMedium TextStyle
	DisplaySmall  TextStyle

	// Headline styles for section headers.
	//
	// Use for major sections or content divisions.
	HeadlineLarge  TextStyle
	HeadlineMedium TextStyle
	HeadlineSmall  TextStyle

	// Title styles for smaller headings.
	//
	// Use for component titles, card headers, or subsections.
	TitleLarge  TextStyle
	TitleMedium TextStyle
	TitleSmall  TextStyle

	// Body styles for primary reading text.
	//
	// Use for paragraphs, descriptions, and general content.
	BodyLarge  TextStyle
	BodyMedium TextStyle
	BodySmall  TextStyle

	// Label styles for UI labels and buttons.
	//
	// Use for button text, form labels, captions, and small UI text.
	LabelLarge  TextStyle
	LabelMedium TextStyle
	LabelSmall  TextStyle
}

Typography defines the complete type scale for a theme.

Typography follows the Material 3 type scale with five categories:

  • Display: Large, impactful text for hero sections
  • Headline: Section headers
  • Title: Smaller headings and component titles
  • Body: Primary reading text
  • Label: UI labels, buttons, and small text

Each category has Large, Medium, and Small variants for flexibility.

The FontFamily field sets the default font for all styles. Individual styles can override this by setting their Font field.

func DefaultTypography 

func DefaultTypography() Typography

DefaultTypography returns a Typography scale following Material 3 guidelines.

The default uses "System" as the font family, which maps to the platform's default UI font (Segoe UI on Windows, San Francisco on macOS, Roboto on Linux).

All sizes are in logical pixels (sp). Line heights and letter spacing follow Material 3 recommendations for optimal readability.

func (*Typography) Scale 

func (t *Typography) Scale(factor float32) Typography

Scale returns a copy of the typography with all sizes scaled by the given factor.

This is useful for accessibility settings that increase text size. A factor of 1.0 returns the original sizes, 1.25 increases all sizes by 25%, etc.

func (*Typography) WithFontFamily 

func (t *Typography) WithFontFamily(fontFamily string) Typography

WithFontFamily returns a copy of the typography with all styles using the specified font family.

Source Files

View all Source files

Directories

Path Synopsis
Package cupertino provides an Apple Human Interface Guidelines (HIG) theme.
 Package cupertino provides an Apple Human Interface Guidelines (HIG) theme.
Package devtools provides a JetBrains-inspired DevTools design system theme.
 Package devtools provides a JetBrains-inspired DevTools design system theme.
Package fluent provides a Microsoft Fluent Design System theme.
 Package fluent provides a Microsoft Fluent Design System theme.
Package font provides a font registry for managing font families, weights, and styles in the gogpu/ui toolkit.
 Package font provides a font registry for managing font families, weights, and styles in the gogpu/ui toolkit.
Package material3 provides a Google Material Design 3 (Material You) theme.
 Package material3 provides a Google Material Design 3 (Material You) theme.

Jump to

Keyboard shortcuts

? : This menu
/ : Search site
f or F : Jump to
y or Y : Canonical URL
go.dev uses cookies from Google to deliver and enhance the quality of its services and to analyze traffic. Learn more.