mirror of
https://github.com/nextcloud/documentation.git
synced 2026-01-03 02:09:45 +07:00
Add documentation about theming app for app developers
This commit is contained in:
@@ -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
|
||||
-------
|
||||
|
||||
35
developer_manual/app/theming.rst
Normal file
35
developer_manual/app/theming.rst
Normal file
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user