Merge pull request #123 from nextcloud/app-dev-theming

Add theming documentation for app development

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
 -------

developer_manual/app/theming.rst

@@ -0,0 +1,35 @@
+===============
+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 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
+