CSS
While the recommended way to develop the user interface is using Vue with the Nextcloud provided components, Nextcloud also provides CSS variables and classes to style components to have a consistent look.
CSS variables
It is strongly recommended to use the Nextcloud provided CSS variables for styling components. This way you can be sure that the theming and accessibility app can dynamically adjust the values. Doing so also allows users to enforce dark or light theme, high contrast or other theming related options.
Primary color variables
The primary color is the main accent color that can be configured by the administrator or the user (if user theming is enabled).
Variable |
Example |
Usage |
|---|---|---|
|
|
Primary color configured by user |
|
|
Text color to be used on |
|
|
Variant of |
|
|
Light variant of |
|
|
Text color to be used on |
|
|
Variant of |
|
|
Accessibility adjusted variant of |
|
|
Text color to be used on |
|
|
Less contrast version of |
|
|
Variant of |
|
|
Light variant of |
|
|
Text color to be used on |
|
|
Variant of |
|
|
Filter to invert icons placed on primary color backgrounds if the primary color is bright |
|
|
Filter to invert icons placed on primary color backgrounds if the primary color is dark |
Background variables
Variable |
Example |
Usage |
|---|---|---|
|
|
The background color of the |
|
|
Text color to be used directly on the background (e.g. header menu) |
|
|
Background image used on the |
|
|
Filter to invert (bright) icons placed directly on the body background (app menu) |
General color variables
Variable |
Example |
Usage |
|---|---|---|
|
|
Main text color |
|
|
Brighter text color that still fulfills accessibility requirements |
|
|
|
|
|
Main background color |
|
|
RGB variant of |
|
|
Background color used for blurred background, see |
|
|
Background color for hover effects |
|
|
Can be used e.g. to colorize selected table rows |
|
|
Should only be used for elements, not as a text background! Otherwise it will not work for accessibility. |
|
|
Default element border color |
|
|
Darker version of the border color |
|
|
Brightest possible border color for accessibility |
|
|
Color for input placeholders |
|
|
Darker version of |
|
|
Color for scrollbars |
|
|
Color for the loading spinner (the bright part of it) |
|
|
Color for the loading spinner (the dark part of it) |
|
|
Color for box shadow effects in RGB notation |
|
|
Color for box shadow effects |
|
|
Filter to invert (dark) icons (e.g. set if the color theme is dark) |
|
|
Filter to invert (bright) icons (e.g. set if the color theme is bright) |
State colors variables
Variable |
Example |
Usage |
|---|---|---|
|
|
Color to mark favorites, can be used to color e.g. a star icon for favorites |
|
|
Element color to show error state, this should not be used for text |
|
|
RGB variant of |
|
|
Element color for hover effects of |
|
|
Text color to show error state |
|
|
Element color to show warning state, this should not be used for text |
|
|
RGB variant of |
|
|
Element color for hover effects of |
|
|
Text color to show warning state |
|
|
Element color to show success state, this should not be used for text |
|
|
RGB variant of |
|
|
Element color for hover effects of |
|
|
Text color to show success state |
|
|
Element color to show info state, this should not be used for text |
|
|
RGB variant of |
|
|
Element color for hover effects of |
|
|
Text color to show info state |
Element structure variables
Variable |
Example |
Usage |
|---|---|---|
|
|
Animation time for snappy CSS transitions |
|
|
Animation time for more complex transitions |
|
|
Breakpoint for mobile responsive layout (e.g. if app navigation should be always visible) |
|
|
Filter to be used on elements with background blur (e.g. app navigation) |
|
|
Font used for Nextcloud user interface |
|
|
Font size for normal text |
|
|
Line height for normal text, for accessibility this should always be |
|
|
Foundation of all spacing sizes used on Nextcloud which are multiples of the baseline size |
|
|
Border width for interactive elements such as text fields and selects |
|
|
Border width for interactive elements when focussed (adjusted for accessibility) |
|
|
Default border radius |
|
|
Larger border radius |
|
|
Even larger border radius for elements which should be look rounded |
|
|
Border radius for pill-style elements |
|
|
Border radius of interactive elements such as buttons, input, navigation and list items. |
|
|
Default size (width and height) for interactive elements like buttons |
|
|
Larger size for the main UI elements |
|
|
Smallest possible size of interactive elements, used by tertiary actions like filter chips |
|
|
Border radius of the body container |
|
|
Margin of the body container |
|
|
Height of the main app navigation bar |
|
|
Width of the in-app navigation sidebar |
|
|
Minimum width of the app sidebar on small screens |
|
|
Maximum width of the app sidebar on wide screens |
CSS classes
There are some predefined classes for public use to ease developing an application for Nextcloud.
CSS class |
Usage |
|---|---|
|
Hides an element visually from the page but keeps it in the accessibility tree |
|
Hides an element completely from the page (also removed from the accessibility tree) |
|
Make content of the element bold emphasize |
|
Center align the elements text |
|
Clear float left |
|
Clear float right |
|
Clear float on both |
|
Float left |
|
Float right |
|
Make an element an inline block |