SCSS

Since the version 12 of Nextcloud, we support SCSS natively. You can migrate your files by simply renaming your .css files to .scss. The server will automatically compile, cache and and serve it. The priority goes to the scss file. So having two file with the same name and a scss & css extension will ensure a retro compatibility with <12 versions as scss files will be ignored by the server.

CSS variables

Since Nextcloud 14 app developers should use CSS4 variables for using the values that Nextcloud defines. This way you can be sure that the theming and accessibility app can dynamically adjust the values to their needs.

A list of available variables is available in the server repo: https://github.com/nextcloud/server/blob/master/core/css/css-variables.scss

Scss icons mixins

Since nextcloud 14, we added some scss mixins and functions to add and manage svg icons.

This function need to be use to add a background-image. It create a list of every icons used in nextcloud and create an associated list of variables. This allow us to revert the colours of the svgs when using the dark theme.

/**
* SVG COLOR API
*
* @param string $icon the icon filename
* @param string $dir the icon folder within /core/img if $core or app name
* @param string $color the desired color in hexadecimal
* @param int $version the version of the file
* @param bool [$core] search icon in core
*
* @returns string the url to the svg api endpoint
*/
@mixin icon-color($icon, $dir, $color, $version: 1, $core: false)

// Examples
.icon-menu {
        @include icon-color('menu', 'actions', $color-white, 1, true);
        // --icon-menu: url('/svg/core/actions/menu/ffffff?v=1');
        // background-image: var(--icon-menu)
}
.icon-folder {
        @include icon-color('folder', 'files', $color-black);
        // --icon-folder: url('/svg/files/folder/000000?v=1');
        // background-image: var(--icon-folder)
}

More informations about the svg color api.

The icon-black-white mixin is a shortand to the icon-color function but it generates twwo set of icons with the suffixe -white and without (default black).

/**
* Create black and white icons
* This will add a default black version of and an additional white version when .icon-white is applied
*/
@mixin icon-black-white($icon, $dir, $version, $core: false)

// Examples
@include icon-black-white('add', 'actions', 1, true);

// Will result in
.icon-add {
        @include icon-color('add', 'actions', $color-black, 1, true);
}
.icon-add-white,
.icon-add.icon-white {
        @include icon-color('add', 'actions', $color-white, 1, true);
}