Theming support

The Nextcloud theming app offers some tools for app developers to ensure that apps also match the themed look.

CSS variables

There are a lot of CSS variables available, see CSS variables.

JavaScript

When the theming app is enabled, it provides the OCA.Theming object. It can be used to handle themed instances differently.

if(OCA.Theming) {
  $('.myapp-element').animate({backgroundColor:OCA.Theming.color});
}

The following information is available:

• OCA.Theming.color Main color

• OCA.Theming.inverted Will be true on bright theming colors to get contrast with text

• OCA.Theming.name Instance name

• OCA.Theming.slogan Instance slogan

• OCA.Theming.url Instance web address

Icons

The theming app will automatically generate favicons and home screen icons for each app by using the icon img/app.svg inside of the app folder. Any custom favicon set by an app will only be visible when the theming app is disabled.