Inject scss in a theme

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?

1 Like

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'
	];	
}
1 Like

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:

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

1 Like

Did you find a way to do what you wanted?

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

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:

1 Like

Yes, use this:

with this to get all text in blue:

:root {
--color-main-text: #2980B9;
}

Tested in NC18

1 Like

@kolja Thanks for this brilliant tip! :slight_smile:
Though, as the theming app has become more and more advanced, I stopped using my own theme… :flushed: Too lazy to enable it again after each update :joy:

Yea, i do it in the same way.
Maybe we find a place, where we ca share our custom CSS content?

These are (maybe) all of the SCSS values:

  :root {
    --color-main-text: #222;
    --color-main-background: #fff;
    --color-main-background-translucent: rgba(255, 255, 255, 0.97);
    --color-background-hover: #f5f5f5;
    --color-background-dark: #ededed;
    --color-background-darker: #dbdbdb;
    --color-primary: #2980b9;
    --color-primary-light: #eaf2f8;
    --color-primary-text: #fff;
    --color-primary-text-dark: #ededed;
    --color-primary-element: #2980b9;
    --color-primary-element-light: #55a5d9;
    --color-error: #e9322d;
    --color-warning: #eca700;
    --color-success: #46ba61;
    --color-text-maxcontrast: #989898;
    --color-text-light: #484848;
    --color-text-lighter: #6f6f6f;
    --image-logo: url('/cloud/index.php/apps/theming/image/logo?v=8');
    --image-login-background: url('/cloud/core/img/background.png?v=8');
    --image-logoheader: url('/cloud/core/img/logo/logo.png?v=8');
    --image-favicon: url('/cloud/index.php/apps/theming/image/favicon?v=8');
    --color-loading-light: #ccc;
    --color-loading-dark: #444;
    --color-box-shadow: rgba(77, 77, 77, 0.5);
    --color-border: #ededed;
    --color-border-dark: #dbdbdb;
    --border-radius: 3px;
    --border-radius-large: 10px;
    --border-radius-pill: 100px;
    --font-face: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
    --animation-quick: 100ms;
    --animation-slow: 300ms;
}
1 Like