ZK Official Themes"
(24 intermediate revisions by 3 users not shown) | |||
Line 6: | Line 6: | ||
This is an overview of the default themes and applicable add-on themes for each ZK version. | This is an overview of the default themes and applicable add-on themes for each ZK version. | ||
− | {| | + | {| class='wikitable' | width="100%" |
! width="120" | | ! width="120" | | ||
! width="130" | ZK 6.5 | ! width="130" | ZK 6.5 | ||
Line 13: | Line 13: | ||
! width="130" | ZK 8.5 | ! width="130" | ZK 8.5 | ||
! width="130" | ZK 8.6 | ! width="130" | ZK 8.6 | ||
− | |- | + | ! width="130" | ZK 10+ |
+ | |- | ||
| Default Theme | | Default Theme | ||
| Breeze | | Breeze | ||
Line 20: | Line 21: | ||
| Iceblue | | Iceblue | ||
| Iceblue | | Iceblue | ||
− | |- | + | | Iceblue |
+ | |- valign="top" | ||
| Applicable Themes | | Applicable Themes | ||
− | | Sapphire | + | | Sapphire Silvertail |
− | Silvertail | ||
| Sapphire <br/> Silvertail <br/> Atlantic | | Sapphire <br/> Silvertail <br/> Atlantic | ||
| Sapphire <br/> Silvertail <br/>Atlantic | | Sapphire <br/> Silvertail <br/>Atlantic | ||
| Sapphire <br/>Silvertail <br/> Atlantic <br/> ZK Theme Pack | | Sapphire <br/>Silvertail <br/> Atlantic <br/> ZK Theme Pack | ||
| Iceblue Compact<br/> Sapphire <br/> Silvertail <br/> Atlantic <br/> ZK Theme Pack <br/> Theme Pack Compact | | Iceblue Compact<br/> Sapphire <br/> Silvertail <br/> Atlantic <br/> ZK Theme Pack <br/> Theme Pack Compact | ||
+ | | Iceblue Compact<br/> ZK Theme Pack <br/> Theme Pack Compact | ||
|} | |} | ||
Line 33: | Line 35: | ||
* Theme Pack Compact contains 23 compact themes. | * Theme Pack Compact contains 23 compact themes. | ||
− | = Trendy Design Themes: Breeze, Sapphire, Silvertail = | + | = Trendy Design Themes (Deprecated): Breeze, Sapphire, Silvertail = |
+ | |||
+ | {{Notice|text={{deprecatedSince|10.0.0}}, please use [https://www.zkoss.org/wiki/ZK_Developer's_Reference/Theming_and_Styling/ZK_Official_Themes#ZK_Theme_Pack ZK Theme Pack] instead.}} | ||
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. | 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. | ||
Line 46: | Line 50: | ||
<div style="clear: both"></div> | <div style="clear: both"></div> | ||
− | = Flat Design Theme: Atlantic = | + | = Flat Design Theme (Deprecated): Atlantic = |
+ | |||
+ | {{Notice|text={{deprecatedSince|10.0.0}}, please use [https://www.zkoss.org/wiki/ZK_Developer's_Reference/Theming_and_Styling/ZK_Official_Themes#ZK_Theme_Pack ZK Theme Pack] instead.}} | ||
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. | 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. | ||
Line 63: | Line 69: | ||
{{versionSince| 8.5.0}} | {{versionSince| 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. | + | ZK Theme Pack ([https://www.zkoss.org/zkthemepackdemo/ Live demo]) 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. |
− | == | + | The default Iceblue theme is available for everyone. Other themes in the Theme Pack require a Theme Pack license. |
− | To apply a theme in the theme pack, your project should include the theme pack jar: | + | |
+ | == How to Apply== | ||
+ | To apply a theme in the theme pack, your project should include the theme pack jar first: | ||
<source lang='xml'> | <source lang='xml'> | ||
<dependency> | <dependency> | ||
Line 74: | Line 82: | ||
</dependency> | </dependency> | ||
</source> | </source> | ||
+ | |||
+ | Then apply a theme according to [[ZK Developer's Reference/Theming and Styling/Switching Themes]]. | ||
== Lite themes == | == Lite themes == | ||
− | Poppy, Marigold, Olive, Aurora | + | Iceblue('''default'''), Poppy, Marigold, Olive, Aurora, Lavender |
+ | |||
+ | [[File:ZK85_Theme_Lite.png | center]] | ||
== Dark themes== | == Dark themes== | ||
Ruby, Amber, Emerald, Aquamarine, Montana, Violet | Ruby, Amber, Emerald, Aquamarine, Montana, Violet | ||
+ | |||
+ | |||
+ | [[File:ZK85_Theme_Dark.png | center]] | ||
== Mix-match == | == Mix-match == | ||
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 | ||
+ | |||
+ | [[File:ZK85_Theme_Mix.png | center]] | ||
== Accessibility-ready themes== | == Accessibility-ready themes== | ||
{{versionSince| 9.5.0}} | {{versionSince| 9.5.0}} | ||
− | + | These themes conform to the WCAG2-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 [https://www.zkoss.org/wiki/ZK_Developer%27s_Reference/Accessibility Developer's Reference/Accessibility] for more information. | |
− | |||
− | |||
− | + | [[File:Wcag blue.png | left | thumb | 269px | WCAG (Blue)]] | |
+ | [[File:Wcag_navy.png | left | thumb | 269px | WCAG Navy]] | ||
+ | [[File:Wcag_purple.png | left | thumb | 269px | WCAG Purple]] | ||
− | < | + | <div style="clear: both"></div> |
− | < | ||
− | |||
− | + | = ZK Theme Pack Compact = | |
− | + | {{versionSince| 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. | 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 [https://www.zkoss.org/wiki/Small_Talks/2018/November/New_Features_of_ZK_8.6.0#Refresh_Theme_without_Code_Change_-_Compact_Theme 8.6 New Features]. | Learn more at [https://www.zkoss.org/wiki/Small_Talks/2018/November/New_Features_of_ZK_8.6.0#Refresh_Theme_without_Code_Change_-_Compact_Theme 8.6 New Features]. | ||
+ | |||
+ | Iceblue_c, the compact version of the Iceblue theme is freely available for everyone. The rest of the compact themes require a Theme Pack license. | ||
= Installation = | = Installation = | ||
Line 115: | Line 124: | ||
# Download the preferred theme.jar file or obtain by maven. | # Download the preferred theme.jar file or obtain by maven. | ||
#* Default theme (Breeze or Iceblue) - built-in theme, no need to download and register. | #* Default theme (Breeze or Iceblue) - built-in theme, no need to download and register. | ||
− | #* Sapphire, Silvertail, Atlantic - from [http://github.com/zkoss/zkthemes/releases github] | + | #* Sapphire, Silvertail, Atlantic (Deprecated since 10.0.0) - from [http://github.com/zkoss/zkthemes/releases github] |
− | #* ZK Theme Pack - download from [https://www.zkoss.org/download/premium#zktheme premium downloads] or [https://www.zkoss.org/wiki/ZK_Installation_Guide/ | + | #* ZK Theme Pack - download from [https://www.zkoss.org/download/premium#zktheme premium downloads] or [https://www.zkoss.org/wiki/ZK_Installation_Guide/Maven_Setup#PE_.2F_EE_.28premium_users_only.299 ZK EE maven repository]. |
# Place theme.jar file under "'''projectName/WEB-INF/lib'''" folder. | # Place theme.jar file under "'''projectName/WEB-INF/lib'''" folder. | ||
# Apply preferred theme by a library property in '''zk.xml''' file under "'''projectName/WEB-INF'''" folder | # Apply preferred theme by a library property in '''zk.xml''' file under "'''projectName/WEB-INF'''" folder | ||
Line 190: | Line 199: | ||
=== Compact Theme Name === | === Compact Theme Name === | ||
− | Append the name with '''_c''' | + | Append the name with '''_c''' gives you the theme name of the compact variant. For example: |
Line 196: | Line 205: | ||
= Switching Themes = | = 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 [https://www.zkoss.org/wiki/ZK_Developer%27s_Reference/Theming_and_Styling | + | 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 [https://www.zkoss.org/wiki/ZK_Developer%27s_Reference/Theming_and_Styling/Switching_Themes Switching Themes] |
− | |||
= Customizing a Theme = | = Customizing a Theme = | ||
Line 206: | Line 214: | ||
=Version History= | =Version History= | ||
− | + | ||
− | {| | + | {| class='wikitable' | width="100%" |
! Version !! Date !! Content | ! Version !! Date !! Content | ||
|- | |- | ||
− | | | + | | 10.0.0 |
− | | | + | | Jan 17, 2023 |
− | | | + | | Deprecate Breeze, Sapphire, Silvertail, and Atlantic |
|} | |} | ||
{{ZKDevelopersReferencePageFooter}} | {{ZKDevelopersReferencePageFooter}} |
Latest revision as of 07:04, 29 May 2024
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 | ZK 10+ | |
---|---|---|---|---|---|---|
Default Theme | Breeze | Breeze | Breeze | Iceblue | 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 |
Iceblue Compact ZK Theme Pack Theme Pack Compact |
- Theme pack contains 23 themes.
- Theme Pack Compact contains 23 compact themes.
Trendy Design Themes (Deprecated): Breeze, Sapphire, Silvertail
Notice: Deprecated Since 10.0.0, please use ZK Theme Pack instead.
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.
Flat Design Theme (Deprecated): Atlantic
Notice: Deprecated Since 10.0.0, please use ZK Theme Pack instead.
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.
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 (Live demo) 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.
The default Iceblue theme is available for everyone. Other themes in the Theme Pack require a Theme Pack license.
How to Apply
To apply a theme in the theme pack, your project should include the theme pack jar first:
<dependency>
<groupId>org.zkoss.themepack</groupId>
<artifactId>theme-pack</artifactId>
<version>${zk.version}</version>
</dependency>
Then apply a theme according to ZK Developer's Reference/Theming and Styling/Switching Themes.
Lite themes
Iceblue(default), Poppy, Marigold, Olive, Aurora, 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
These themes conform to the WCAG2-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.
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.
Iceblue_c, the compact version of the Iceblue theme is freely available for everyone. The rest of the compact themes require a Theme Pack license.
Installation
- 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 (Deprecated since 10.0.0) - from github
- ZK Theme Pack - download from premium downloads or ZK EE maven repository.
- Place theme.jar file under "projectName/WEB-INF/lib" folder.
- 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
- iceblue
- amber
- aquamarine
- aurora
- blueberryandraspberry
- cardinal
- cheeseandwine
- deepsea
- emerald
- gardensalad
- lavender
- macaron
- marigold
- material
- montana
- mysteriousgreen
- office
- olive
- poppy
- ruby
- spaceblack
- violet
- winterspring
- zen
- wcag
- wcag_navy
- wcag_purple
Compact Theme Name
Append the name with _c 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
Version | Date | Content |
---|---|---|
10.0.0 | Jan 17, 2023 | Deprecate Breeze, Sapphire, Silvertail, and Atlantic |