$v:theme-list — Enumerates available themes.

Defined in:
Used in:


  |<xsl:variable name="v:theme-list"
  |              as="element()*">
  |   <theme name="Materials dark" id="materials-dark" dark="true"/>
  |   <theme name="Materials light" id="materials-light" dark="false"/>


This variable is part of the experimental themes feature. It enumerates the available themes. Each theme has three parts, a name, an ID, and (optionally) an indication of whether or not it’s a “dark” theme.

Themes are implemented in CSS. If the $theme-picker is enabled, it will be possible for the reader to select a theme. The theme names are used for this purpose.

The ID value is used as a class on the html element. Everything else about the theme is implemented in CSS. To add a new theme, provide a set of CSS rules that apply when the ID class is in effect.

The dark mode setting is only used as a default. If the document does not specify a $default-theme, if the user has never selected a theme, if the user has enabled dark mode at the operating system level, and if the browser makes this fact available, the first “dark” theme will automatically be selected.