Solution Building: theme and logo customization
🖼️ Logo Configuration (logo)
Add additional property under fe-core configuration in moduleConfiguration. Logos can also be configured via base64-encoded images. This allows the UI to show custom branding without bundling new static files.
{
"logo": {
"value": "data:image/png;base64,iVBORw0KGgoAAAANSUhEU...",
"disableTextLogo": true
}
}Note: Supported formats: svg+xml, jpeg, png
Logo Fields:
Property | Description |
|---|---|
| Base64-encoded string of the main logo |
| (Optional) Do not show |
Note: If logo.value is not provided, the default openIMIS logo will be used instead.🎨 Theme & Logo Configuration
To customize the appearance of your openIMIS frontend, you can define a theme and optionally a logo configuration in your module settings either on database level or django admin panel (table moduleConfiguration).
🧹 JSON Configuration Structure
Theme Configuration (theme)
To override the default theme colors, provide a theme object under the fe-core module configuration. Below is the full structure with all supported properties:
{
"theme": {
"name": "defaultBlue",
"primaryColor": "#004E96",
"errorColor": "#801a00",
"whiteColor": "#ffffff",
"backgroundColor": "#e4f2ff",
"headerColor": "#BCD4E6",
"greyColor": "grey",
"selectedTableRowColor": "rgba(0, 0, 0, 0.08)",
"hoveredTableRowColor": "rgba(0, 0, 0, 0.12)",
"toggledButtonColor": "#999999",
"lockedBackgroundPattern": "repeating-linear-gradient(45deg, #D3D3D3 1px, #D3D3D3 1px, #fff 10px, #fff 10px)"
}
}Description of Properties:
Property | Description |
|---|---|
| Optional name identifier for the theme |
| Main brand color used in headers, buttons, text, etc. |
| Used to highlight errors or critical UI elements |
| Used for contrasting text and background elements |
| General background color for the app |
| Header background color |
| Used for subdued UI elements (e.g., disabled text) |
| Background for selected table rows |
| Background for hovered table rows |
| Background for toggled/active state buttons |
| Background pattern used for locked (readonly) UI elements |
Note: If theme is not provided, the default openIMIS theme will be used instead.
🖼️ Logo Configuration (logo)
Add additional property under fe-core configuration in moduleConfiguration. Logos can also be configured via base64-encoded images. This allows the UI to show custom branding without bundling new static files.
{
"logo": {
"value": "data:image/png;base64,iVBORw0KGgoAAAANSUhEU...",
"disableTextLogo": true
}
}Note: Supported formats: svg+xml, jpeg, png
Logo Fields:
Property | Description |
|---|---|
| Base64-encoded string of the main logo |
| (Optional) Do not show |
Note: If logo.value is not provided, the default openIMIS logo will be used instead.
✅ Example GraphQL Response from module configuration GQL
{
"moduleConfigurations": [
{
"module": "fe-core",
"config": "{\"theme\":{...}, \"logo\":{...}}"
}
]
}✅ Example of possible configurations (theme):
✅ Example of possible configurations (logo):
Did you encounter a problem or do you have a suggestion?
Please contact our Service Desk
This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License. https://creativecommons.org/licenses/by-sa/4.0/