Theme CSS YAML Configuration Reference

You can define a theme CSS client extension with a client-extension.yaml file.

Usage Details

This client-extension.yaml file defines a theme CSS client extension:

able-theme-css:
    clayURL: css/clay.css
    frontendTokenDefinitionJSON: src/frontend-token-definition.json
    mainURL: css/main.css
    name: Able Theme CSS
    type: themeCSS

The required mainURL and clayURL properties set the path to the two CSS resource files (main.css and clay.css, respectively). These CSS files correspond to those deployed with a theme module project.

The CSS in these files is added to the styling already used in your theme. In case of a conflict, the client extension’s CSS overrides the styling already on the page.

The frontendTokenDefinitionJSON property was added in Liferay DXP 2024.Q2/Portal 7.4 GA120 to enable providing the frontend token definition file.

The example workspace includes a complete theme CSS client extension.

YAML Properties

These properties are specific to theme CSS client extensions:

Name	Data Type	Description
`clayURL`	URL	(Required) The path to the CSS file representing the `clay.css` file of a Liferay theme. The complete URI is prefixed by the `baseURL` value.
`clayRTLURL`	URL	The path to the right-to-left version of the Clay CSS. This is used only when Liferay is changed to a RTL language. The complete URI is prefixed by the `baseURL` value.
`mainURL`	URL	(Required) The path to the CSS file representing the `main.css` file of a Liferay theme. The complete URI is prefixed by the `baseURL` value.
`mainRTLURL`	URL	The path to the right-to-left version of the main CSS. This is used only when Liferay is changed to a RTL language. The complete URI is prefixed by the `baseURL` value.
`frontendTokenDefinitionJSON`	String	The path to the `frontend-token-definition.json` file. At build time, its JSON is injected into the client extension’s configuration file.
`scope`	String	Beginning in Liferay DXP 2025.Q1/Portal GA132, you can set the scope to `controlPanel` to apply the theme CSS client extension to the administrative pages of an instance (e.g., site administration and the control panel pages). The default is `layout`, and applies only to site pages as set by the administrator.