Template Context

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

Top-Level Fields

Field Path	Type	Example Template	Output Example
`.Image`	`string`	`{{ .Image }}`	`"material.png"`
`.Material`	`Material`	N/A (use sub-fields)
`.Colors`	`[]Color`	See looping section

Material Color Fields

All fields are of type ColorValue.

Field Name	Example Template	Output 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):

Representation	Example Template	Output 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)

Case	Example Template	Output Example
`Snake`	`{{ .Name.Snake }}`	`on_primary`
`Camel`	`{{ .Name.Camel }}`	`onPrimary`
`Kebab`	`{{ .Name.Kebab }}`	`on-primary`
`Pascal`	`{{ .Name.Pascal }}`	`OnPrimary`

Colors Looping Example

{{ 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

{{/* Rong theme example */}}

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

TIP

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

Template Context ​

Top-Level Fields ​

Material Color Fields ​

ColorValue Representations ​

Color Name Cases (for .Colors elements) ​

Colors Looping Example ​

Example Template ​