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:
Material UI color system usage in fonts:
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