{"id":21399540,"url":"https://github.com/zkoss/zkthemetemplate","last_synced_at":"2025-10-09T08:07:54.983Z","repository":{"id":8942993,"uuid":"57024592","full_name":"zkoss/zkThemeTemplate","owner":"zkoss","description":"The ZK Theme Template is served as the base theme, allowing developers to extend and customize ZK themes as needed.","archived":false,"fork":false,"pushed_at":"2025-10-08T03:30:30.000Z","size":1467,"stargazers_count":11,"open_issues_count":1,"forks_count":27,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-10-08T05:37:35.502Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"Less","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zkoss.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":"contributing.md","funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2016-04-25T08:25:24.000Z","updated_at":"2025-09-17T07:12:10.000Z","dependencies_parsed_at":"2023-02-16T03:30:59.386Z","dependency_job_id":"9e6c17d9-1300-4a7c-ac8a-243ffa3df63a","html_url":"https://github.com/zkoss/zkThemeTemplate","commit_stats":null,"previous_names":[],"tags_count":73,"template":false,"template_full_name":null,"purl":"pkg:github/zkoss/zkThemeTemplate","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zkoss%2FzkThemeTemplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zkoss%2FzkThemeTemplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zkoss%2FzkThemeTemplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zkoss%2FzkThemeTemplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zkoss","download_url":"https://codeload.github.com/zkoss/zkThemeTemplate/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zkoss%2FzkThemeTemplate/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279001097,"owners_count":26082990,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-09T02:00:07.460Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-22T15:15:07.840Z","updated_at":"2025-10-09T08:07:54.977Z","avatar_url":"https://github.com/zkoss.png","language":"Less","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ZK Theme Template\n[ZK](https://github.com/zkoss/zk) is a highly productive open source Java framework for building amazing enterprise web and mobile applications. The **ZK Theme Template** provides a base theme that developers can extend to create custom ZK themes. It comes with continuous/incremental compile and live-reload features to minimize the turn-around time when developing a theme. \n\nIf you just want to adjust the look of specific components rather than all of them, please read [ZK Style Customization Guide](https://www.zkoss.org/wiki/ZK_Style_Customization_Guide).\n\nWe assume you're already familiar with [Less](http://lesscss.org/).\n\n# Build Steps\n## Building prerequisites\n\n[Require Node.js](https://nodejs.org/en/download/) \\\u003e= 10.16\n\nCheck version with `node -v`\n\n## Fork\nfork this repository to another git repository, so this will make it easier to merge bug fixes from the original repository and migrate to the new version in the future.\n\n## Initialize a custom theme\n* initialize the project with a theme name. \n\n`./init.sh`\n\n* install [zkless-engine](https://github.com/zkoss/zkless-engine).\nThe LESS processor customized for ZK.\n\n`npm install`\n  \n\n## build jar file\n`mvn clean package`\n\nIt will compile `.less` files and package the source into jar. The jar file will be at `target/___THEME_NAME___.jar`\n\n# How to Customize a Theme\nThis project contains the default theme (`iceblue`) .less files. \nThe suggested steps:\n1. Switch to a theme as a base theme\n2. Add a new `.less` file to override the existing variables.\n\n## switch to compact profile (since 9.5.0)\n1. Open [`src/archive/web/zul/less/_zkvariables.less`](src/archive/web/zul/less/_zkvariables.less)\n2. Modify `@themeProfile` to `compact`.\n``` less\n@themeProfile:                 \"compact\";\n@themePalette:                 \"iceblue\";\n```\n3. now the theme uses the compact profile.\n\n## Switch to a theme of [Theme Pack](https://www.zkoss.org/zkthemepackdemo/)\nThe [theme pack](https://www.zkoss.org/zkthemepackdemo/) contains extra 23 themes, you can choose one theme that is closer to your target theme as a base theme and start to customize it. So that it can save some efforts for you.\n(**Notice**: you need to purchase ZK EE or theme pack to access the theme pack source code.)\n\n1. Download Theme Pack source jar at [the premium repository](https://maven.zkoss.org/repo/zk/ee/org/zkoss/themepack/): [THEME_NAME]-[VERSION]-sources.jar\n2. Get theme color palette less at `source.jar/palettes/*.less`\n2. Copy the theme less to `zkThemeTemplate/src/archive/web/zul/less/colors`. \u003cbr/\u003e\nFor example, `montana.less`\n3. prepend `_` at the file name \u003cbr/\u003e\nFor example, `_montana.less`\n4. Specify the theme name at `src/archive/web/zul/less/_zkvariables.less`\n```less\n@themePalette:                 \"montana\";\n```\n\n## Add New .less\nWe suggest you customize a theme by overriding existing variables instead of modifying the variable value directly. So that you can easily merge the future changes from the original repository and easily differentiate the customized style and default styles. The steps are:\n1. create a new `.less` file and add those variables you want to override.\n2. import the new `.less` file in `_header.less` at the bottom to override the previous one like:\n```less\n@import \"_zkvariables.less\"; // variables needed for ZK\n@import \"_zkmixins.less\";\n\n@import \"_mytheme.less\" // your new theme variables\n```\n\n\n## preview custom theme\n* compile run preview app\n`mvn test exec:java@preview-app`\n* open a simple preview page in a browser: http://localhost:8080\n* add your own pages containing the components to preview under `/preview/web`\n\n\n## continuous compile/watch less files\nin a separate console:\n\n`npm run zklessc-dev`\n\n\n# How to use `___THEME_NAME___.jar`:\n\n1. Put `___THEME_NAME___.jar` in `WEB-INF/lib`, then `___THEME_NAME___.jar`\n    will become your default theme if there is no other theme.\n\n2. Now you can also dynamically switch between different themes by\n    cookie or library property\n  -  Use library-property\n     ```\n        \u003c!-- in WEB-INF/zk.xml --\u003e\n        \u003clibrary-property\u003e \n            \u003cname\u003eorg.zkoss.theme.preferred\u003c/name\u003e\n            \u003cvalue\u003e___THEME_NAME___\u003c/value\u003e\n        \u003c/library-property\u003e \n     ```\n\n\n  - Use cookie to switch theme, add a cookie\n    ```\n    zktheme=___THEME_NAME___\n    ```\nIt does not require a server restart, but user has to refresh the browser.\n\nPlease refer to [ZK Developer's Reference/Theming and Styling/Switching Themes](https://www.zkoss.org/wiki/ZK_Developer%27s_Reference/Theming_and_Styling/Switching_Themes).\n\n# Use cases\n## Change primary color\n`src/archive/web/zul/less/_zkvariables.less` \u003e `@colorPrimary`\n\n## Change base font\n`src/archive/web/zul/less/_zkvariables.less` \u003e `@baseFontSize`, `@baseTitleFontFamily`, `@baseContentFontFamily`\n\n## Change margin and padding\nDifferent components have different margin and padding, search \"margin\" and \"padding\" among all `.less` files.\n\n\n# Customize Previous Themes\n\n## breeze\ncheck out the branch `breeze` of this repository\n\n## atlantic \nvisit https://github.com/zkoss/atlantic and follow the readme.\n\n## silvertail, sapphire\nvisit https://github.com/zkoss/zkthemes and follow the readme.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzkoss%2Fzkthemetemplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzkoss%2Fzkthemetemplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzkoss%2Fzkthemetemplate/lists"}