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.


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

if(OCA.Theming) {

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

  • Instance name

  • OCA.Theming.slogan Instance slogan

  • OCA.Theming.url Instance web address


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.