Theming

Owned by Thomas Körbler
Oct 04, 2024
3 min read

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

 

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

/icons/logo-full.svg

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

/icons/logo-hero.svg

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

/icons/logo-raster.png

Highlight color

Buttons, call to actions, links

highlightColor

#357aeb

Global background color

Primary background color

backgroundColor

#f8f8f8

Global font color

Font color for all texts inside the app

textColor

#282b34

Menu background color

Background color of the sidebar and top menu

alternateBackgroundColor

#ffffff

Label color

Color for sub headlines and captions

labelColor

#989ba2

Divider color

Color for borders and frames

dividerColor

#eaeaea

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.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:

 

Â