Skip to content

Template Context

The following data is passed to Go's template engine to render the themes files.

Top-Level Fields

Field PathTypeExample TemplateOutput Example
.Imagestring{{ .Image }}"material.png"
.MaterialMaterialN/A (use sub-fields)
.Colors[]ColorSee looping section

Material Color Fields

All fields are of type ColorValue.

Field NameExample TemplateOutput Example
Background{{ .Background }}121212
Error{{ .Error }}B3261E
ErrorContainer{{ .ErrorContainer }}F9DEDC
InverseOnSurface{{ .InverseOnSurface }}322F29
InversePrimary{{ .InversePrimary }}D0BCFF
InverseSurface{{ .InverseSurface }}E4E2E6
OnBackground{{ .OnBackground }}E0E0E0
OnError{{ .OnError }}FFFFFF
OnErrorContainer{{ .OnErrorContainer }}410E0B
OnPrimary{{ .OnPrimary }}FFFFFF
OnPrimaryContainer{{ .OnPrimaryContainer }}3700B3
OnPrimaryFixed{{ .OnPrimaryFixed }}21005D
OnPrimaryFixedVariant{{ .OnPrimaryFixedVariant }}000000
OnSecondary{{ .OnSecondary }}FFFFFF
OnSecondaryContainer{{ .OnSecondaryContainer }}1D192B
OnSecondaryFixed{{ .OnSecondaryFixed }}332D41
OnSecondaryFixedVariant{{ .OnSecondaryFixedVariant }}4A4458
OnSurface{{ .OnSurface }}E0E0E0
OnSurfaceVariant{{ .OnSurfaceVariant }}C4C7C5
OnTertiary{{ .OnTertiary }}FFFFFF
OnTertiaryContainer{{ .OnTertiaryContainer }}31111D
OnTertiaryFixed{{ .OnTertiaryFixed }}492532
OnTertiaryFixedVariant{{ .OnTertiaryFixedVariant }}633B48
Outline{{ .Outline }}938F99
OutlineVariant{{ .OutlineVariant }}C4C7C5
Primary{{ .Primary }}BB86FC
PrimaryContainer{{ .PrimaryContainer }}6200EE
PrimaryFixed{{ .PrimaryFixed }}EADDFF
PrimaryFixedDim{{ .PrimaryFixedDim }}D0BCFF
Scrim{{ .Scrim }}000000
Secondary{{ .Secondary }}03DAC6
SecondaryContainer{{ .SecondaryContainer }}018786
SecondaryFixed{{ .SecondaryFixed }}E8DEF8
SecondaryFixedDim{{ .SecondaryFixedDim }}CCC2DC
Shadow{{ .Shadow }}000000
Surface{{ .Surface }}121212
SurfaceBright{{ .SurfaceBright }}373737
SurfaceContainer{{ .SurfaceContainer }}211F26
SurfaceContainerHigh{{ .SurfaceContainerHigh }}2B2930
SurfaceContainerHighest{{ .SurfaceContainerHighest }}36343B
SurfaceContainerLow{{ .SurfaceContainerLow }}1D1B20
SurfaceContainerLowest{{ .SurfaceContainerLowest }}0F0D13
SurfaceDim{{ .SurfaceDim }}121212
SurfaceTint{{ .SurfaceTint }}BB86FC
SurfaceVariant{{ .SurfaceVariant }}49454F
Tertiary{{ .Tertiary }}03DAC6
TertiaryContainer{{ .TertiaryContainer }}3700B3
TertiaryFixed{{ .TertiaryFixed }}FFD8E4
TertiaryFixedDim{{ .TertiaryFixedDim }}EFB8C8

ColorValue Representations

You can use these suffixes on any ColorValue field (Material fields or .Colors elements):

RepresentationExample TemplateOutput Example
HexRGB{{ .Primary.HexRGB }}BB86FC
TrimmedHexRGB{{ .Error.TrimmedHexRGB }}B3261E
HexRGBA{{ .OnSurface.HexRGBA }}E0E0E0FF
TrimmedHexRGBA{{ .Background.TrimmedHexRGBA }}121212FF
RGB{{ .Primary.RGB }}rgb(187, 134, 252)
TrimmedRGB{{ .Primary.TrimmedRGB }}187, 134, 252
RGBA{{ .Primary.RGBA }}rgba(187, 134, 252, 255)
TrimmedRGBA{{ .Primary.TrimmedRGBA }}187, 134, 252, 255
LinearRGB{{ .Primary.LinearRGB }}rgb(0.73, 0.53, 0.99)
TrimmedLinearRGB{{ .Primary.TrimmedLinearRGB }}0.73, 0.53, 0.99
LinearRGBA{{ .Primary.LinearRGBA }}rgba(0.73, 0.53, 0.99, 1)
TrimmedLinearRGBA{{ .Primary.TrimmedLinearRGBA }}0.73, 0.53, 0.99, 1
Red{{ .Primary.Red }}187
Green{{ .Primary.Green }}134
Blue{{ .Primary.Blue }}252
Alpha{{ .Primary.Alpha }}255

Color Name Cases (for .Colors elements)

CaseExample TemplateOutput Example
Snake{{ .Name.Snake }}on_primary
Camel{{ .Name.Camel }}onPrimary
Kebab{{ .Name.Kebab }}on-primary
Pascal{{ .Name.Pascal }}OnPrimary

Colors Looping Example

go
{{ range .Colors }}
## {{ .Name.Pascal }} Color
- All cases:
  Snake: `{{ .Name.Snake }}`,
  Camel: `{{ .Name.Camel }}`,
  Kebab: `{{ .Name.Kebab }}`,
  Pascal: `{{ .Name.Pascal }}`
- Formats:
  Hex: {{ .Color.HexRGB }}
  Trimmed RGB: {{ .Color.TrimmedRGB }}
  RGBA: {{ .Color.RGBA }}
  Linear: {{ .Color.LinearRGB }}
  Components: R={{ .Color.Red }} G={{ .Color.Green }} B={{ .Color.Blue }} A={{ .Color.Alpha }}
{{ end }}

Example Template

go
{{/* Rong theme example */}}

primary = "{{ .Primary }}"
background = "{{ .Background }}"

TIP

  • Use {{- and -}} to trim whitespace.
  • Run rong to test and preview your template.