Theming support

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

CSS classes

  • .nc-theming-main-background Background in theming color
  • .nc-theming-main-text Text in theming color
  • .nc-theming-contrast Text in white/black color to be shown in front of the theming color

JavaScript

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

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

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.