Themes

With themes you can change the look of the Build.One User Interface. There are two standard themes available:

playground-dark
playground-light

You can also create new themes or edit themes.

Settings

You can set colors and fonts in themes.

Clickpath

Your Gitpod environment > Explorer > src\webui\vue\src\styles/themes\<any theme folder>.

color.ts: Defines the primary and grey colors used for the Build.One User Interface.
A color is always specified as a whole palette with ten shades . The shades have the keys 50, 100, 200, 300, 400, 500, 600, 700, 800 and 900. 500 is the basic shade.
These keys can be used, for example, to darken something by using 700 instead of 500. Colors can be specified as hexadecimal value.
Example
```
const primary: Color = {
	50: '#161a46',
	100: '#262a70',
	200: '#363f9c',
	300: '#4554bf',
	400: '#5470d2',
	500: '#6c93df',
	600: '#97baed',
	700: '#c3dcf8',
	800: '#e3f0fb',
	900: '#f6f9fa',
};
```
theme.ts: Defines the name, style and icons of the theme.
name: Must be the same name as in the theme in the Build.One User Interface.
style: The style of core can be either 'dark' or 'light'. If it is set to 'dark', the style 'light' must be specified for icons.
icons: The style of icons can be either 'dark' or 'light'. If it is set to 'light', the style 'dark' must be specified for core.
Example
```
const theme: ThemePartial = {
	core: {
		name: 'playground-dark',
		style: 'dark'
	},
colors,
icons: { style: 'light'}
};
```

fonts.ts: Defines an alternative font used for the Build.one User Interface. By default, no alternative font is specified. The default font is specified in the themes.ts file in the core folder.

Example:

import { Font, Fonts } from ' @/types/theme';
import { colors } from './colors';

const primary: Font = { color: colors.primary[800] }

export const fonts: Fonts = {
	primary: {
		family: spread('"Arial", sans-serif'),
		color: theme.color.primary[900]
	}
};

If an alternative font is defined in the fonts.ts file, the information must be added to the theme.ts file of the corresponding folder as follows:

import { Theme, ThemePartial } from ' @/types/theme';
import { fonts } from ' ./fonts';
import { extend } from ' @/styles/themes/core/theme';
import { colors } from './colors';

const theme: ThemePartial = {
	core: {
		name: 'playground-dark',
		style: 'dark'
	},
fonts,
colors,
icons: { style: 'light'}
};

Change a Theme

In the simple browser go to the profile icon > Profile.
In the Grunddaten tab click in the Theme field.
Select the desired theme.
The user interface changes to the selected theme.
Click the Speichern button.

Create a New Theme

Prerequisites

To create a new theme, the following steps must be completed first.

Go to your Gitpod environment > Explorer.
Open your root themes folder. E. g. src\webui\themes.
Right click on the themes folder > click New Folder > enter the desired name.

Further Information

webpack.config.babel.js

Clickpath: Your Gitpod environment > Explorer > src\webui\webpack.config.babel.js

The following is included:

The SASS loaders for the themes:

const scssThemes = themeNames.map(name => createWebpackThemeConfig({ mode, name, defaultPlugins, baseDir: baseSrcPath, devtool: devToolOption }));

The aliases:

alias: {  '@@/themes': `${baseSrcPath}/themes`}

The web pack ThemePlugin:

new ThemePlugin({ baseSrcPath: swatSrcPath, configFilename: `${baseSrcPath}/tsconfig.json` })

The ExtraWatchWebpackPlugin:

new ExtraWatchWebpackPlugin({
  files: ['./themes/**/*.ts'],
}),

theme.config.js
Clickpath: Your Gitpod environment > Source Control > src\webui\webpack\src\config\theme.config.js.
The following is included:
```
export const config = {
  folders: {
      themes: {
          ts: 'themes',
          scss: './sass/themes/'
      }
  }
};
```

tsconfig.json

The following is included:

{
  "compilerOptions": {
      "target": "ES6",
      "module": "ESNext",
      "strict": false,
      "jsx": "preserve",
      "moduleResolution": "node",
      "skipLibCheck": true,
      "esModuleInterop": true,
      "allowSyntheticDefaultImports": true,
      "forceConsistentCasingInFileNames": true,
      "useDefineForClassFields": true,
      "sourceMap": true,
      "baseUrl": ".",
      "allowJs": true,
      "typeRoots": [
          "node_modules/@types",
          "../Akioma/swat-webui/dist/clapi/typings"
      ],
      "paths": {
          "@@/config/types": [ "./config.types.ts" ],
          "@@/config": [ "./config.js" ],
          "@@/themes/*": [
              "./themes/*"
          ],
          "@@/themes": [
              "./themes"
          ],
          "@/*": [
              "../Akioma/swat-webui/vue/src/*"
          ],
          "vue-utils/*": [
              "../Akioma/swat-webui/vue-utils/src/*"
          ]
      },
      "lib": [
          "esnext",
          "dom",
          "dom.iterable",
          "scripthost"
      ]
  },
  "include": [
      "themes/**/*.ts", -> muss hinzugefügt werden
      "src/**/*.ts",
      "src/**/*.tsx",
      "src/**/*.vue",
      "src/**/*.d.ts",
      "tests/**/*.ts",
      "tests/**/*.tsx"
  ],
  "exclude": [
      "node_modules"
  ],
  "ts-node": {
      "require": [
          "tsconfig-paths/register"
      ],
      "compilerOptions": {
          "module": "CommonJS"
      }
  }
}

Step 1: Create a new theme in the Build.One Interface.

In main menu in the simple browser go to Manage > Grunddaten > uiThemes.
Go to the … FAB button on the bottom right and click the + button.
Enter a name in the Key field and a description in the Description field.
In the Kennzeichen drop-down field select 'system'.
Click the Ok button.
In the main menu go to Deliver > CI/CD.
Click the Export Base Changes button.

Step 2: Add the new theme in the Pro-Code Area.

Go to your Gitpod environment > Explorer.
The Changes area in the Source Control panel shows that changes have been made to the listentry.uiThemes.xml. These were triggered from the actions in Step 1.
Open src\webui\akioma\sass\themes.
Right click on the themes folder and click New Folder.
Enter the same name as for the new theme you created in the Build.One User Interface.
Copy the files from one of the other themes folders and paste them in the new folder.
Delete the content in the just copied file _theme.scss.
Open src\webui\themes.
Right click on the styles/themes folder and click New Folder.
Enter the same name as for the new theme you created in the Build.One User Interface.
Copy the files from one of the other themes folder and paste them in the new folder.
Open the just copied file theme.ts and change the name parameter for the name of the new theme.
Open src\webui\webpack\config\themes.config.js and add the name of the new file in the module.exports array.

Run the compile with the following command:

cd ${GITPOD_REPO_ROOT}/src/webui && yarn build:watch-continue

After the build, clear the browser cache and hard reload the Build.One browser tab.
The changes made by the new theme are visible.

Add a New Logo to a Theme

Upload the desired logo by dragging and dropping it to the desired folder in your Gitpod environment.
Go to your Gitpod environment > Explorer.
Open src\webui\akioma\sass\themes\<the desired themes folder>\_legacy.scss.
Change the $logo URL with an URL to the desired logo.
Save the changes.

Edit the colors of a theme

Go to your Gitpod environment > Explorer.
Open src\webui\vue\src\styles/themes\ the folder of the theme that you want to edit.
Open the color.ts file.
Change the primary color with a new palette of ten shades in hexadecimal values.
Save the changes.

Edit the font of a theme

Go to your Gitpod environment > Explorer.
Open src\webui\vue\src\styles/themes the folder of the theme that you want to edit.
Select the font.ts file.

Add the following code:

import { Font, Fonts } from ' @/tympes/theme';
import { colors } from './colors';

const primary: Font = { color: colors.primary[800] }

export const fonts: Fonts = {
	primary: {
		family: spread('"Inter", sans-serif'),
		color: theme.color.primary[900]
	}
};

Change the font '”Inter”, sans-serif' of the example with the desired font.
Save the changes.

In this section:

Helpcenter