Custom CSS: customize your CSS to better fit your Theming needs

Allow admins to add custom CSS to their Nextcloud instance from inside the Theming settings.

Use theming color values

Admin can use CSS custom properties to make use of the variables that are available from the default.css variables file file:

Example:

#element {
  color: var(--color-primary);
}

How can I recover if my customized CSS code has broken the user interface?

The css configuration is stored in the app config database table, but you can use the occ config:app:* commands to obtain, modify or reset it as well. e.g.

occ config:app:get theming_customcss customcss
occ config:app:set theming_customcss customcss --value "body { background-color: red; }"
occ config:app:delete theming_customcss customcss

Usage via occ command

Examples:

occ config:app:get theming_customcss customcss
occ config:app:set theming_customcss customcss --value "body { background-color: red; }"
occ config:app:delete theming_customcss customcss

Note:

• If your CSS contains single or double quotes, make sure they are properly escaped so the shell does not break the command.

occ config:app:set theming_customcss customcss --value '.app-navigation-personal li[data-section-id="workflow"] { display:none } '