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()
th.Shaper = text.NewShaper(text.WithCollection(gofont.Collection()))

var window app.Window
window.Option(app.Title(title))

var ops op.Ops
for {
	switch e := window.Event().(type) {
	case app.DestroyEvent:
		// The window was closed.
		return e.Err
	case app.FrameEvent:
		// Reset the layout.Context for a new frame.
		gtx := app.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
	isChecked.Update(gtx)
	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.