ZK Official Themes"

From Documentation
Line 83: Line 83:
 
Cheese and Wine, Winter Spring, Blueberry and Raspberry, Macaron, Deep Sea, Garden Salad, Zen, Mysterious Green, Cardinal, Space Black, Office and Material
 
Cheese and Wine, Winter Spring, Blueberry and Raspberry, Macaron, Deep Sea, Garden Salad, Zen, Mysterious Green, Cardinal, Space Black, Office and Material
  
  since 9.5.0
 
 
== Accessibility-ready themes==  
 
== Accessibility-ready themes==  
 
   since 9.5.0
 
   since 9.5.0

Revision as of 04:04, 28 September 2020



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 ZK 8.6
Default Theme Breeze Breeze Breeze Iceblue Iceblue
Applicable Themes Sapphire

Silvertail

Sapphire
Silvertail
Atlantic
Sapphire
Silvertail
Atlantic
Sapphire
Silvertail
Atlantic
ZK Theme Pack
Iceblue Compact
Sapphire
Silvertail
Atlantic
ZK Theme Pack
Theme Pack Compact
  • Theme pack contains 23 themes.
  • Theme Pack Compact contains 23 compact 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

 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.

Include Required Dependency

To apply a theme in the theme pack, your project should include the theme pack jar:

        <dependency>
            <groupId>org.zkoss.themepack</groupId>
            <artifactId>theme-pack</artifactId>
            <version>${zk.version}</version>
        </dependency>

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

Accessibility-ready themes

 since 9.5.0

WCAG (Blue), WCAG Navy, WCAG Purple.

These themes offers WCAG 2 compliant contrast level and focus styles. Note that for WCAG compliance, in addition to using a WCAG theme, you will also need to include the za11y (zk-accessibility) module to your project. Read Developer's Reference/Accessibility for more information.



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

Lite

ZK85 Theme Lite.png

Dark

ZK85 Theme Dark.png

Mix-matched

ZK85 Theme Mix.png

ZK Theme Pack Compact

 since 8.6.0

The breeze-compatible compact variant for ZK Theme Pack Theme is introduced since 8.6.0 allowing developers to upgrade their existing breeze/sapphire/silvertail-themed applications to a modern theme with the minimum code change. Each theme in the theme pack has a corresponding compact theme. The compact themes have smaller font size, padding, margin, but keep the same color design. it's more suitable for migrating from an old theme like breeze without breaking the page layout. Learn more at 8.6 New Features.

Accessibility-Ready Themes

 since 9.5.0

Accessibility-ready high contrast themes are included in the Theme Pack and Theme Pack Compact. The themes are: WCAG (Blue), WCAG Navy, WCAG Purple, where each has a corresponding compact theme. These themes offers WCAG 2 compliant contrast level and focus styles.

Note that for WCAG compliance, in addition to using a WCAG theme, you will also need to include the za11y (zk-accessibility) module to your project.

Installation

  1. Download the preferred theme.jar file or obtain by maven.
  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
  25. wcag
  26. wcag_navy
  27. wcag_purple

Compact Theme Name

Append the name with _c it gives you the theme name of the compact variant. For example:


iceblue ---> iceblue_c

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

Last Update : 2020/09/28


Version Date Content
     



Last Update : 2020/09/28

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.