Get main color of a theme in controller

asked 2022-05-20 18:00:01 +0800

softteam gravatar image softteam
130 1 8


We are using the org.zkoss.zul.theme.Themes class in the application to change the application theme with different default zk themes. And now we need to get the main color of the theme that is currently being used in the app.

Is there a way to get the main color of the theme in rgb format in the controller?

For example, from the office theme, get the main color used in this theme


delete flag offensive retag edit

3 Answers

Sort by ยป oldest newest most voted

answered 2022-05-23 17:02:19 +0800

MDuchemin gravatar image MDuchemin
2480 1 6
ZK Team

AFAIK there is no internal "get a value from theme" getter you'd be able to use for that.

If you use org.zkoss.zul.theme.Themes.getCurrentTheme() or org.zkoss.zkplus.theme.Themes.getCurrentTheme() you will be able to retrieve the theme name of the currently active theme.

From there you can make a table of "possible themes in use in our application" and match the main color from that.

Under the hood, the WcsExtendlet is the class that builds the Theme content that is being passed to the client, but it is not aware of what that content is. It just resolves the location of the current theme, build a WCS file from the already built theme jar, then pass the result to the client.

link publish delete flag offensive edit

answered 2022-05-24 16:30:12 +0800

softteam gravatar image softteam
130 1 8

ok, thanks. And would there be another way to obtain the main color that is being used in the components placed by the theme? I have been testing through javascript and also with the getStyle() method of the components, but neither returned the color being used in the components

link publish delete flag offensive edit

answered 2022-05-31 18:44:54 +0800

MDuchemin gravatar image MDuchemin
2480 1 6
ZK Team

Well, that could be done, but it depends what you are looking to obtain.

If you look at a theme generated by the theme template, for example, there is one color named @colorPrimary in the variables: https://github.com/zkoss/zkThemeTemplate/blob/master/src/archive/web/zul/less/_zkvariables.less#L49

If that's what you are looking to retrieve, it is used as the primary color for links: https://github.com/zkoss/zkThemeTemplate/blob/1337cba0f57d5328b4a9e104f0117f8fce092678/src/archive/web/js/zul/wgt/less/a.less#L6

So if you are trying to parse that value from an existing page, you could do something like this: https://zkfiddle.org/sample/1jiit73/8-Another-new-ZK-fiddle

(this is a really low level implementation, using a dummy element and outputing the value to the console.

In a real world case, you would probably do that after page init to make sure the theme has loaded, and with a server event to return the value and use it at server side)

link publish delete flag offensive edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

1 follower



Asked: 2022-05-20 18:00:01 +0800

Seen: 13 times

Last updated: May 31 '22

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More