Listen to Lesson

Updating Clarity's Theme

Themes serve as the foundation of Liferay site styling, including typography, color schemes, and more. Clarity wants to implement a unique digital experience for distributor pages. In this article, you'll achieve this by modifying their existing theme.

Exercise: Adding a Frontend Token Definition to Clarity's Theme

Here, you'll add a new frontend token to Clarity's theme CSS client extension and redeploy it to your instance.

In your course workspace, navigate to the exercises/module-6/ folder.
Move the frontend-token-definitions.json file to the client-extensions/clarity-theme/src/ folder.
This file contains all the Dialect theme's frontend tokens. Since deploying frontend tokens overwrites existing tokens within the instance's current theme, you'll include the new token within this file.
Go to the client-extensions/clarity-theme/src/ folder and open the frontend-token-definitions.json file with a text editor or IDE.
Locate the second-to-last closing curly brace (}).

Add a comma after the curly brace:

            [... additional fields omitted ...]
			"label": "tabs",
			"name": "tabs"
		},
	]
}

Insert a new line below the curly brace and add this code snippet:

{
	"frontendTokenSets": [
		{
			"frontendTokens": [
				{
					"defaultValue": "var(--color-neutral-5)",
					"editorType": "ColorPicker",
					"label": "Body Secondary Background",
					"mappings": [
						{
							"type": "cssVariable",
							"value": "body-secondary-background"
						}
					],
					"name": "bodySecondaryBackground",
					"type": "String"
				}
			],
			"label": "body",
			"name": "body"
		}
	],
	"label": "Clarity Distributor Styles",
	"name": "clarity-distributor-styles"
}

Ensure the code resembles this:

			[... additional fields omitted ...]
			"label": "tabs",
			"name": "tabs"
		},
		{
			"frontendTokenSets": [
				{
					"frontendTokens": [
						{
							"defaultValue": "var(--color-neutral-5)",
							"editorType": "ColorPicker",
							"label": "Body Secondary Background",
							"mappings": [
								{
									"type": "cssVariable",
									"value": "body-secondary-background"
								}
							],
							"name": "bodySecondaryBackground",
							"type": "String"
						}
					],
					"label": "body",
					"name": "body"
				}
			],
			"label": "Clarity Distributor Styles",
			"name": "clarity-distributor-styles"
		}
	]
}

Save the file.
Within the client-extensions/clarity-theme/ folder, open the client-extension.yaml file with a text editor or IDE.
Under the clarity-theme definition block, add this line below the clayURL property:
```
frontendTokenDefinitionJSON: src/frontend-token-definition.json
```
This property sets the location of the frontend token definitions for the client extension.

Ensure the file resembles this:

assemble:
    - from: build/buildTheme/img
      into: static/img
clarity-theme:
    clayURL: css/clay.css
    frontendTokenDefinitionJSON: src/frontend-token-definition.json
    mainURL: css/main.css
    name: Clarity Theme CSS
    type: themeCSS

Save the file.
Now that you've implemented the new frontend tokens to the client extension, you can deploy it to your Liferay instance.
Open a terminal and navigate to the client-extensions/clarity-theme/ folder in your course workspace.
Run this command to build and deploy the client extension:
```
blade gw clean deploy
```

Verify it deploys successfully.

2025-01-24 14:08:34.676 INFO [fileinstall-directory-watcher][BundleStartStopLogger:68] STARTED claritytheme_7.4.13 [1463]

With the client extension deployed, you can now check the new frontend token.

In your Liferay instance, open the Site Menu (), expand Design, and click Style Books.
Click New to start creating a new style book.
For Name, enter Token Verification and click Save.
In the right side bar's drop-down menu, select Clarity Distributor Styles.
Verify that the Body Secondary Background token is present.

NOTE
The Token Verification style book is for verification purposes only and won't be leveraged in the following exercises. Therefore, you can safely discard it. You'll explore style books in more detail in the next lesson.

Now Clarity can use the new token to modify their website's background color via style books.

Conclusion

With theme CSS client extensions, you can implement customized styling and frontend tokens for your theme. This simplifies customization and enhances your website's look and feel.

Next, you'll learn about how you can centralize style management with Liferay's style books.