Steps

To use a Colibri Color Theme variable, follow these steps:

1. Find the variable you want to use.

   The XWiki standard old ColorTheme variables are declared in the colorThemeInit.vm file. This velocity template is a unique source of truth for old ColorTheme variables. Mappings to CSS properties and LESS variables are available in variablelist.vm.

2. Evaluate the context in which you want to use it.

   When you're extending an existing stylesheet, there are 2 choices:

   1. You're developing style rules in a CSS file or a CSS StyleSheet Extension.
      Warning

      You should consider using CSS properties instead.

      Make sure the content of your stylesheet is parsed. This will allow the use of the Velocity Templating Language (VTL) in your stylesheet. The old ColorTheme does rely on VTL to work properly. You also need to make sure you import the declaration of the variables done in the colorThemeInit.vm template so that your stylesheet compiles to a consistent result in any context.

      #template('colorThemeInit.vm')
      
      .box.box-custom {
        color: $theme.textPrimaryColor;
      }

      Learn more about the old color theme variables.

   2. You're developing style rules in a LESS file or a LESS StyleSheet Extension.
      Error

      You should consider using LESS variables instead, or even migrating your stylesheet directly to native CSS with CSS variables.

      This is by far the most computationally costly option because you need to compile both LESS and VTL on your stylesheet!

      Make sure the content of your stylesheet is parsed. This will allow the use of Velocity Templating Language (VTL) in your stylesheet. The old colorTheme does rely on VTL to work properly. You also need to make sure you import the declaration of the variables done in the colorThemeInit.vm template so that your stylesheet compiles to a consistent result in any context.

      #template('colorThemeInit.vm')
      
      .box.box-custom {
        color: $theme.textPrimaryColor;
      }