Theme
Making things look the same

The same abstract widget can have many visual representations, ranging from simple color changes to entirely custom graphics. To give an application a consistent appearance it is useful to have an abstraction that represents a particular “theme”.

Package gioui.org/widget/material implements a theme based on the Material Design, and the Theme struct encapsulates the parameters for varying colors, sizes and fonts.

To use a theme, you must first initialize it in your application loop:

th := material.NewTheme(gofont.Collection())

var ops op.Ops
window := app.NewWindow()
for e := range window.Events() {
	switch e := e.(type) {
	case system.DestroyEvent:
		// The window was closed.
		return e.Err
	case system.FrameEvent:
		// Reset the layout.Context for a new frame.
		gtx := layout.NewContext(&ops, e)

		// Draw the state into ops based on events in e.Queue.
		draw(gtx, th)

		// Update the display.
		e.Frame(gtx.Ops)
	}
}

Then in your application use the provided widgets:

var isChecked widget.Bool

func themedApplication(gtx layout.Context, th *material.Theme) layout.Dimensions {
	var checkboxLabel string
	if isChecked.Value {
		checkboxLabel = "checked"
	} else {
		checkboxLabel = "not-checked"
	}

	return layout.Flex{
		Axis: layout.Vertical,
	}.Layout(gtx,
		layout.Rigid(material.H3(th, "Hello, World!").Layout),
		layout.Rigid(material.CheckBox(th, &isChecked, checkboxLabel).Layout),
	)
}


Kitchen example shows all the different widgets available.