Theme

Provides styling information including colors and typography for the UI.

Built-in Themes

Theme	Description
`Light`	Light theme with modern colors
`Dark`	Dark theme

Basic Usage

th := Light  // or Dark

// Use in render loop
myWidget(gtx, &th)

Predefined Colors

Basic Colors

White       // #FFFFFF
Black       // #000000
Transparent // Fully transparent

Grays

Gray50   // #FAFAFA (lightest)
Gray100  // #F5F5F5
Gray200  // #EEEEEE
Gray300  // #E0E0E0
Gray400  // #BDBDBD
Gray500  // #9E9E9E
Gray600  // #757575
Gray700  // #616161
Gray800  // #424242
Gray900  // #212121 (darkest)

Primary Colors

Red     // #F44336
Pink    // #E91E63
Purple  // #9C27B0
Indigo  // #3F51B5
Blue    // #2196F3
Cyan    // #00BCD4
Teal    // #009688
Green   // #4CAF50
Yellow  // #FFEB3B
Orange  // #FF9800

Theme Palette

The theme includes a Palette with semantic colors:

Color	Description
`Primary`	Main brand color
`OnPrimary`	Text/icon color on primary
`SurfaceVariant`	Alternative surface color
`Outline`	Border/outline color

Examples

// Using built-in theme
th := Light

// Access palette colors
Container(
    Text("Primary colored"),
    Background(th.Palette.Primary),
)

// Using predefined colors
Container(
    Text("Blue background"),
    Background(Blue),
)

// Custom colors
Container(
    Text("Custom color"),
    Background(color.NRGBA{R: 100, G: 150, B: 200, A: 255}),
)

// Switching themes
var th Theme
if isDarkMode {
    th = Dark
} else {
    th = Light
}

Custom Theme

You can create a custom theme:

myTheme := Theme{
    Theme: material.NewTheme(),
    Palette: Palette{
        Primary:        color.NRGBA{R: 0, G: 150, B: 136, A: 255},
        OnPrimary:      White,
        SurfaceVariant: color.NRGBA{R: 240, G: 240, B: 240, A: 255},
        Outline:        Gray400,
    },
}