Theming
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 Instance
After you uploaded the logo image, you need to restart the whole instance via https://admin.demo.cluster.portraitapp.co.
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.png
Theme 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:
Â
Dark
Theme with a dark design.
Settings:
Â
Vice
Theme with a 80ies flair.
Â
Settings:
Â
Â