diff --git a/developer_manual/app/index.rst b/developer_manual/app/index.rst index b74cee5dd..b7cad020c 100644 --- a/developer_manual/app/index.rst +++ b/developer_manual/app/index.rst @@ -23,6 +23,7 @@ js css l10n + theming schema database configuration @@ -101,6 +102,7 @@ The app's presentation layer: * :doc:`js` * :doc:`css` * :doc:`l10n` +* :doc:`theming` Storage ------- diff --git a/developer_manual/app/theming.rst b/developer_manual/app/theming.rst new file mode 100644 index 000000000..575a7ccbc --- /dev/null +++ b/developer_manual/app/theming.rst @@ -0,0 +1,35 @@ +=============== +Theming support +=============== + +.. sectionauthor:: Julius Härtl + +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. + +.. 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 +