ZK Official Themes

Overview

This is an overview of the default themes and applicable add-on themes for each ZK version.

	ZK 6.5	ZK 7.0	ZK 8.0	ZK 8.5
Default Theme	Breeze	Breeze	Breeze	Iceblue
Applicable Themes	Sapphire, Silvertail	Sapphire, Silvertail, Atlantic	Sapphire, Silvertail, Atlantic	Sapphire, Silvertail, Atlantic, ZK Theme Pack (23 Themes)

Trendy Design Themes: Breeze, Sapphire, Silvertail

Trendy design emphasizes on gradient background, rounded corners and shadow effects. Breeze is a greyish based theme that supports desktop and tablet, sapphire is a blueish based theme that supports desktop only and silvertail is a silverish based theme that also support desktop only.

See below to take a quick view at the look and feel of Breeze, Sapphire and Silvertail, click image to view original size.

Breeze

Sapphire

Silvertail

Flat Design Theme: Atlantic

On the contrary, flat design replaces skeuomorphism (gradient background, rounded corner and shadow effect) with simplicity and visual clarity to communicate. It is easy to create and customize a new theme based on this design. Atlantic is a blueish based theme that supports both desktop and tablets.

See below to take a quick view at the look and feel of Atlantic, click image to view original size.

Atlantic

Not to Import Google Font

Please refer to ZK Configuration Reference/zk.xml/The Library Properties/org.zkoss.theme.atlantic.useGoogleFont.disabled

ZK Theme Pack: 23 themes

 since 8.5.0

ZK Theme Pack contains 23 modern themes, including lite themes, dark themes and mix-match themes. These themes are designed for ZK 8.5 and later versions and are compatible with ZK 8.5's default Iceblue theme.

Lite themes: Poppy, Marigold, Olive, Aurora, Iceblue(default), Lavender

Dark themes: Ruby, Amber, Emerald, Aquamarine, Montana, Violet

Mix-match: Cheese and Wine, Winter Spring, Blueberry and Raspberry, Macaron, Deep Sea, Garden Salad, Zen, Mysterious Green, Cardinal, Space Black, Office and Material

You can find below some selected screenshots from ZK Theme Pack.

Lite

Dark

Mix-matched

Installation

1. Download the preferred theme.jar file or obtain by maven.
   • Default theme (Breeze or Iceblue) - built-in theme, no need to download and register.
   • Sapphire, Silvertail, Atlantic - from github
   • ZK Theme Pack - download from premium downloads or ZK EE maven repository.
2. Place theme.jar file under "projectName/WEB-INF/lib" folder.
3. Apply preferred theme by a library property in zk.xml file under "projectName/WEB-INF" folder

<!-- zk.xml -->
<library-property>
    <name>org.zkoss.theme.preferred</name>
    <value>sapphire</value> <!-- or silvertail, atlantic, deepsea, gardensalad etc. -->
</library-property>

Theme Artifact

	  <dependency>
	  	<groupId>org.zkoss.theme</groupId>
	  	<artifactId>breeze</artifactId>
	  	<version>${zk.version}</version>
	  </dependency>
	  <dependency>
	  	<groupId>org.zkoss.theme</groupId>
	  	<artifactId>atlantic</artifactId>
	  	<version>${zk.version}</version>
	  </dependency>
	  <dependency>
	  	<groupId>org.zkoss.theme</groupId>
	  	<artifactId>sapphire</artifactId>
	  	<version>${zk.version}</version>
	  </dependency>
	  <dependency>
	  	<groupId>org.zkoss.theme</groupId>
	  	<artifactId>silvertail</artifactId>
	  	<version>${zk.version}</version>
	  </dependency>
	  <dependency>
	  	<groupId>org.zkoss.themepack</groupId>    <!-- >=8.6.1   -->
	  	<!--<groupId>org.zkoss.theme</groupId>--> <!-- <=8.6.0.1 -->
	  	<artifactId>theme-pack</artifactId>
	  	<version>${zk.version}</version>
	  </dependency>

All Theme Names of Theme Pack

1. iceblue
2. amber
3. aquamarine
4. aurora
5. blueberryandraspberry
6. cardinal
7. cheeseandwine
8. deepsea
9. emerald
10. gardensalad
11. lavender
12. macaron
13. marigold
14. material
15. montana
16. mysteriousgreen
17. office
18. olive
19. poppy
20. ruby
21. spaceblack
22. violet
23. winterspring
24. zen

Switching Themes

You can include multiple themes in the same application and allow your end users to choose their preferred themes. For more information please refer to Switching Themes

Customizing a Theme

To build a custom theme based on a standard ZK theme, read Customize a standard theme.

Also, reference Theming and Styling.

Version History

Version	Date	Content