When should I use the Theme CSS client extension type?

• You're rebranding the DXP look for a tenant or product surface. • You want to swap CSS custom properties (fonts, colors, spacing) site-wide. • You're building a design system on top of Clay.

How do I create a Theme CSS client extension?

1. Author `clay.css` and `main.css` (any bundler / CSS pipeline works). 2. Assemble both into the extension. 3. Point `clayURL:` and `mainURL:` at them. Optionally add RTL variants.

What fields are required on a Theme CSS client extension?

clayURL (string): Replacement for `clay.css`. mainURL (string): Replacement for `main.css`.

Theme CSS

Replace clay.css and main.css with your own.

type: themeCSS·Frontend·Liferay docs →

at a glance

Theme CSS (type: themeCSS) is a Liferay Client Extension in the Frontend category. Overrides the two stylesheets that drive Liferay's default look and feel — Clay design tokens (`clay.css`) and the general page styles (`main.css`). Effectively a lightweight, source-controlled theme extension: no Java, no `.war`, no theme WAR development kit. Ship your compiled CSS (any bundler / preprocessor works) and Liferay swaps its defaults with yours site-wide, in real time on deploy. Add RTL variants via `clayRTLURL` and `mainRTLURL` for internationalized deployments. Point `frontendTokenDefinitionJSON` at a Clay Frontend Token Definition to expose your theme's tokens in Liferay's Style Book editor for site admins to tweak.

yaml type: themeCSS
category: Frontend
required fields: clayURL, mainURL
liferay docs: learn.liferay.com →

# description

Overrides the two stylesheets that drive Liferay's default look and feel — Clay design tokens (`clay.css`) and the general page styles (`main.css`). Effectively a lightweight, source-controlled theme extension: no Java, no `.war`, no theme WAR development kit. Ship your compiled CSS (any bundler / preprocessor works) and Liferay swaps its defaults with yours site-wide, in real time on deploy. Add RTL variants via `clayRTLURL` and `mainRTLURL` for internationalized deployments. Point `frontendTokenDefinitionJSON` at a Clay Frontend Token Definition to expose your theme's tokens in Liferay's Style Book editor for site admins to tweak.

UI extensions that render on Liferay pages or modify page appearance.

# when to use

→You're rebranding the DXP look for a tenant or product surface.
→You want to swap CSS custom properties (fonts, colors, spacing) site-wide.
→You're building a design system on top of Clay.

# how to use

01Author clay.css and main.css (any bundler / CSS pipeline works).
02Assemble both into the extension.
03Point clayURL: and mainURL: at them. Optionally add RTL variants.

# required fields

field	type	description
`clayURL`required	`string`	Replacement for `clay.css`.
`mainURL`required	`string`	Replacement for `main.css`.

# optional fields

field	type	description
`name`	`string`	Display name.
`clayRTLURL`	`string`	RTL variant of clay.css.
`mainRTLURL`	`string`	RTL variant of main.css.
`frontendTokenDefinitionJSON`	`string`	Path to `frontend-token-definition.json` for the theme designer.
`scope`	`enum(layout, controlPanel)`	`layout` = site pages (default). `controlPanel` = admin only.

# example

client-extension.yaml

my-theme:
    type: themeCSS
    name: My Theme
    clayURL: clay.css
    mainURL: main.css

# more in frontend

cd ..scaffold this type in VS Code →