Components Library
Theme

Theme

The Theme component provides a way to define a particular theming context for its nested components. The XMLUI framework uses Theme to define the default theming context for all of its child components. Theme variables and theme settings only work in this context.

You can change the tone or even specify individual theme variables and change the appearance of nested contents in a theme. It is also possible to nest multiple Theme components to define multiple theming contexts. Contexts follow a specificity rule.

Learn more about styling theming and theming context in Themes and Styles Overview.

Using Theme

In contrast to other components, Theme accepts theme variables as properties. You can define specific styles for components nested in Theme using these theme variables.

The following example specifies a dark tone for the current theme and sets several theme variables to style the ProgressBar component:

<App>
  <Theme
    tone="dark"
    backgroundColor-ProgressBar="cyan"
    color-indicator-ProgressBar="purple"
    thickness-ProgressBar="12px"
    borderRadius-indicator-ProgressBar="12px"
    borderRadius-Progressbar="4px"
  >
    <VStack backgroundColor="$backgroundColor-primary">
      <ProgressBar value="0"/>
      <ProgressBar value="0.2"/>
      <ProgressBar value="0.6"/>
      <ProgressBar value="1.0"/>
    </VStack>
  </Theme>
</App>

Properties

root

This property indicates whether the component is at the root of the application.

If so, it will set a number of important settings for the app:

  • what favicon to use
  • sets up font links
  • specifies the base css
  • sets up the root for the toast notification system

Otherwise, the Theme component will just provide the theme context to its children.

themeId

This property specifies which theme to use by setting the theme's id.

<App>
  <Theme themeId="xmlui">
    <VStack backgroundColor="$backgroundColor-primary">
      <H3>Use 'xmlui' theme:</H3>
      <ProgressBar value="0"/>
      <ProgressBar value="0.6"/>
    </VStack>
  </Theme>
  <Theme themeId="xmlui-green">
    <VStack backgroundColor="$backgroundColor-primary">
      <H3>Use 'xmlui-green' theme:</H3>
      <ProgressBar value="0"/>
      <ProgressBar value="0.6"/>
    </VStack>
  </Theme>
  <Theme themeId="solid">
    <VStack backgroundColor="$backgroundColor-primary">
      <H3>Use the 'solid' theme:</H3>
      <ProgressBar value="0"/>
      <ProgressBar value="0.6"/>
    </VStack>
  </Theme>
</App>

tone (default: "light")

This property allows the setting of the current theme's tone.

Available values: light (default), dark

<App>
  <Theme tone="light">
    <VStack backgroundColor="$backgroundColor-primary" >
      <H3>Use the light tone of the base theme:</H3>
      <ProgressBar value="0"/>
      <ProgressBar value="0.6"/>
    </VStack>
  </Theme>
  <Theme tone="dark">
    <VStack backgroundColor="$backgroundColor-primary">
      <H3>Use the dark tone of the base theme:</H3>
      <ProgressBar value="0"/>
      <ProgressBar value="0.6"/>
    </VStack>
  </Theme>
</App>

Events

This component does not have any events.

Exposed Methods

This component does not expose any methods.

Styling

The Theme component is a styling wrapper that influences the nested components' visual appearance. It cannot be styled.

TextBoxToneChangerButton