1 Context:
In this task, we will generate our own theme and adjust the colors.
2 Result:
3 Step by step guide:
- 👋 Type the following command into the Gitpod (Pro-Code Workspace) console → 5 files should be generated (Three scss files and two ts files)
b1 generate theme testtheme- 👋 Navigate to the webui source folder by executing the following commands:
cd src
cd webui- 👋 Now execute the following command two times → Ignore the error with the exit code 1
yarn build:dev- 👋 Now go into the Build.One Low-Code Workspace and navigate to “Manage” → “Themes”
- 👋 Click the “+” button on the FAB in the bottom right corner to create a new theme
- 👋 Make sure the “Key” is exactly like the name of the theme you generated in step 1
- 👋 Fill in a short description
- 👋 Set “Kennzeichen” to System
- 👋 Select “Ok” to save your theme
- 👋 Go back to your Pro-Code Workspace and execute the following command to recompile your frontend
cd ${GITPOD_REPO_ROOT}/src/webui && yarn && yarn build:dev- 👋 Now execute a hard reload of your browser and empty the cache
- 👋 Go to the user logo in the top right corner and select the option “Profile”
- 👋 Search for your theme in the “Grunddaten” panel and select it
- 👋 Go back to your Pro-Code Workspace and go to /workspace/repo/src/webui/themes/testtheme/colors.ts
- 👋 Change the color code of 300, 600 and 900 to the following hex code #88C6A5
- 👋 Press “Strg+S” and execute the following code in the console:
cd ${GITPOD_REPO_ROOT}/src/webui && yarn build:watch-continue- 👋 Now execute a hard reload of your browser and empty the cache once more
4 Explanation:
Through the first command in the console, a script is executed in the background that copies the base theme and makes it ready for editing. This creates 5 files. The theme can be customized in the two TypeScript files. The second console command compiles the generated files and makes them usable. Each object is divided into three layers that can be styled and modified individually. Almost everything that is possible with HTML, CSS, and TypeScript can be customized.
