Theme Customization

WD supports theme customization. It is possible to embed a custom themes library (further CTL) into the WD. CTL may be represented as a git repository.

Color system

WD adheres Material UI color system, where a set of colors is defined and used across all the UI elements including fonts. In this system, the primary and secondary colors are typically selected to represent your brand.

Material UI color system usage in UI elements:

Dashboard

Material UI color system usage in fonts:

Dashboard

Theme structure

WD theme is represented as a JavaScript object, each key of which describes some element on the page:

  "HEADER": {},
  "BREADCRUMBS": {},
  "DASHBOARD": {},
  "WIDGET": {},
  "SIDEBAR": {},
  "FOOTER": {},
  "PAGE_404": {},
  "METADATA": {},
  "MULTI_SERIES_CHART": {},
  "TABLE": {},
  "PRIMARY_BUTTON": {},
  "CHECKBOX": {},
  ...
}

The default WD theme structure looks as follows:

├── colors.js
├── elements/
├── index.js
├── pageLayout/
├── styles/
└── widgets/

colors.js file contains all the theme colors which are inherited and used throughout the whole app. elements directory contains theme definitions for such UI elements as buttons, popup dialogs, inputs, etc. pageLayout directory contains theme definitions for page layout elements: header, footer, sidebar, dashboard, etc. styles directory is supposed to contain CSS files used to change widgets’ style. Some widgets (currently, it’s Endpoint configuration only) can be styled using CSS styles only, while others use values from both colors.js file and styles folder. widgets directory contains theming definitions for the widgets available in WD such as Gauge, Endpoint list, etc. For custom widgets it is possible to create styling definitions as well by adding custom section to the WD theme object described above.

How to embed custom theme

To be able to use custom themes, CTL repository should be mounted into the WD Kubernetes pod into the /usr/src/kaa-dashboard/externalThemes directory.

The expected CTL repository structure is as follows:

└── theme1/
└── theme2/
└── theme3/

How to use custom theme

After CTL is mounted into the WD Kubernetes pod the custom themes are available for selection in the WD configuration in the info section:

info:
  theme: theme1