Inject scss in a theme


#1

Is there a simple way to inject more scss than changing the variables (https://docs.nextcloud.com/server/12/developer_manual/core/theming.html#changing-the-default-colours)?

I had a quick look at how the theming app does it, but didn’t fully understand it yet.

Would be cool if you could just place a server.scss in /core/css in your theme’s folder. But this doesn’t work. Can I somehow trigger the scss build from my theme?


Eigene Theme (Changing the default colours)
#2

Do not use scss files in themes. It doesn’t work. You have to use the file defaults.php which is at the root of your theme.
In defaults.php, you must add this bloc with yours colors :

public function getScssVariables() {
	return [
		'color-main-text' 		=>	'#1c1c1c',
		'color-main-background'	=>	'#ffffff',
		'color-primary' 		=>	'#eedd22',
		'color-primary-text' 	=>	'#ffffff',
		'color-error' 			=>	'#e9322d',
		'color-warning' 		=>	'#ffcc44',
		'color-success' 		=>	'#46ba61'
	];	
}

#3

Thanks for your answer. I assumed that you can only use the variables in the defaults.php.
I ended up using SCSS as a preprocessor in the deployment flow of the theme.

But, since you can use SCSS in apps, there might also be a way to use it in themes. I’ll have a closer look, once I find the time :slight_smile:


#4

since i’m not into it anyways… i wanted to bring this app to your attention as well, though.
it might be helpful.

if not - just forget this posting :wink:

–> https://apps.nextcloud.com/apps/theming_customcss


#5

Did you find a way to do what you wanted?


#6

Here is a quick hack to workaround the fact that SCSS cannot be overridden in a theme:

  • find a .css that is loaded in the page for which you want to inject CSS. For instance /apps/files_versions/css/versions.css is always loaded and suitable to inject CSS that needs to be set everywhere.
  • create a corresponding file in your theme (for instance apps/files_versions/css/versions.css) and add the desired CSS.

It will be a pain to maintain CSS living in unrelated files


#7

Unfortunately not…

As a solution I added local sass files and a build step to compile the sass into one server.css during deployments of the theme. If you don’t have automated deployment set up, of course, you can do this as a manual step before uploading your theme.

It’s not really a solution, just a minor improvement I ended up with :wink: