Files
nextcloud-docs/developer_manual/basics/front-end/theming.rst
2024-07-02 21:38:02 +02:00

40 lines
1.1 KiB
ReStructuredText

===============
Theming support
===============
.. sectionauthor:: Julius Härtl <jus@bitgrid.net>
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 :ref:`cssvars`.
JavaScript
----------
When the theming app is enabled, it provides the **OCA.Theming** object. It can
be used to handle themed instances differently.
.. code-block:: javascript
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.