Theming
- Thomas Körbler
- Dominik Rainer
In Portrait 6.x, the theming capability was extended; you can now set the colors to your needs for Portrait. Inside the application.yml file, you can find the config section theme under application.
| Property | Default |
|---|---|---|
Logo URL Absolute or relative path to your logo, which is used in the menu and on the login page. This can be either a JPG, PNG or SVG (recommended). | logoUrl |
|
Hero URL Absolute or relative path to your hero image, which is used on the dashboard. This can be either a JPG, PNG or SVG (recommended). | heroUrl |
|
Raster Logo URL Absolute or relative path to your rasterized logo, which is used on PDF exports. This can be either a JPG or PNG. | rasterLogoUrl |
|
Highlight color Buttons, call to actions, links | highlightColor |
|
Global background color Primary background color | backgroundColor |
|
Global font color Font color for all texts inside the app | textColor |
|
Menu background color Background color of the sidebar and top menu | alternateBackgroundColor |
|
Label color Color for sub headlines and captions | labelColor |
|
Divider color Color for borders and frames | dividerColor |
|
Default configuration in the application.yml file:
application:
name: Portrait App
owner: Treskon GmbH
...
theme:
logoUrl: /icons/logo-full.svg
heroUrl: /icons/logo-hero.svg
rasterLogoUrl: /icons/logo-raster.png
highlightColor: '#f890e7'
backgroundColor: '#f0f0f0'
alternateBackgroundColor: '#ffffff'
textColor: '#3d3d3d'
labelColor: '#0bd3d3'
dividerColor: '#eaeaea'
Using your own logo
If you want to use your own logo, the best option is to upload it on the server. Proceed as following:
Upload via configuration editor
Open the configuration editor from the administration area. Navigate in the explorer to the folder /project/frontend/static/favicons. Right-click on the new folder and choose Upload....
After you uploaded the image, you should see the file inside the explorer:
Do not rename/move the folder favicons and icons itself. Only edit the content.
Restart Frontend
After you uploaded the logo image, you need to restart the frontend. You either restart the whole instance or just the frontend via docker-compose restart frontend on the server.
Reference your image in the Theme
After the frontend was restarted, the image can be used inside your theme config:
application:
theme:
logoUrl: /favicons/vice-logo.pngTheme Examples
Default
The default color theme, with the primary color being blue.
Settings:
application:
theme:
logoUrl: /icons/logo-full.svg
heroUrl: /icons/logo-hero.svg
rasterLogoUrl: /icons/logo-raster.png
highlightColor: '#357aeb'
backgroundColor: '#f8f8f8'
textColor: '#282b34'
alternateBackgroundColor: '#ffffff'
labelColor: '#989ba2'
dividerColor: '#eaeaea'
Blue
Settings:
application:
theme:
logoUrl: /icons/logo-full.svg
heroUrl: /icons/logo-hero.svg
rasterLogoUrl: /icons/logo-raster.png
highlightColor: '#2a3780'
backgroundColor: '#ffffff'
alternateBackgroundColor: '#efefef'
textColor: '#0b0b0b'
labelColor: '#2a3780'
dividerColor: '#c0c0c0'
Dark
Theme with a dark design.
Settings:
application:
theme:
logoUrl: /icons/logo-full.svg
heroUrl: /icons/logo-hero.svg
rasterLogoUrl: /icons/logo-raster.png
highlightColor: '#a6dcfc'
backgroundColor: '#1f1f1f'
alternateBackgroundColor: '#262626'
textColor: '#e0e0e0'
labelColor: '#b0b0b0'
dividerColor: '#3d3d3d'
Vice
Theme with a 80ies flair.
Settings:
application:
theme:
logoUrl: https://upload.wikimedia.org/wikipedia/commons/thumb/4/42/Miami_Vice.svg/2880px-Miami_Vice.svg.png
heroUrl: https://upload.wikimedia.org/wikipedia/commons/thumb/4/42/Miami_Vice.svg/2880px-Miami_Vice.svg.png
rasterLogoUrl: https://upload.wikimedia.org/wikipedia/commons/thumb/4/42/Miami_Vice.svg/2880px-Miami_Vice.svg.png
highlightColor: '#f890e7'
backgroundColor: '#f0f0f0'
alternateBackgroundColor: '#ffffff'
textColor: '#000000'
labelColor: '#0bd3d3'
dividerColor: '#eaeaea'
Related content
Copyright Treskon GmbH.