Custom Dark Theme - SVG mixin icon-color Funktion funktioniert nicht

Hallo zusammen,

Bastle mir gerade ein eigenes Dark-Theme ohne Theming-App. Also völlig neu mit /themes/mytheme und der server.css.

Grundsätzlich läuft das ganze schon, nur mit den SVG Icons aus dem /core/img und die scss Styles in /core/css bereiten mir etwas Sorgen.

Einige Icons werden auf dunklen Hintergrund hell/weiss eingefärbt, in den Settings links bleiben alle schwarz.

Grundlage ist hier:
https://docs.nextcloud.com/server/latest/developer_manual/design/css.html

Nun wollte ich mal in der funktions.scss testweise mal das SVG icon-add oder icon-user definieren, das invertiert wird nach weiss. Leider klappt es nicht so ganz.

Folgendes ist in der funktions.scss ergänzt wurden:

/** Anpassung Custom
* 
 */

@mixin icon-color($icon, $dir, $color, $version: 1, $core: false)

// Liste
.icon-add {
        @include icon-color('add', 'actions', $color-white, 1, true);
        --icon-add: url('/core/img/actions/add/ffffff?v=1');
        background-image: var(--icon-add)
}
.icon-group {
        @include icon-color('group', 'actions', $color-white, 1, true);
         --icon-group: url('/core/img/actions/group/ffffff?v=1');
         background-image: var(--icon-group)
}
.icon-user {
        @include icon-color('user', 'actions', $color-white, 1, true);
        --icon-user: url('/core/img/actions/user/ffffff?v=1');
        background-image: var(--icon-user)
}

Wo liegt mein Fehler? Bin relativ neu , mit CSS kenne ich mich aber aus. Alle bisherigen Anpassungen liegen in server.css im themes.

dir ist bewusst, dass es

  1. ein dark theme direkt aus nc heraus gibt und
  2. eine dark breeze-app im appshop?

ggf magst du das ausprobieren, bevor du bei null anfängst?

Weiß ich, hab ich schon getestet. Passt mir nicht so ganz.

Mach immer ganz gerne alles unique :wink:

Versuche das erstmal selbst zu lösen, Themes ist ja fast fertig , nur das mit den schwarzen svg krieg ich nicht hin. Wird schon werden …

pack es in eine app - dann überschreibt dir das nächste update nichts…

und sprich mal mit dem breeze-dark dev… er kann glaube gar deutsch. ggf könnt ihr euch ja gegenseitig unterstützen

ich mach das erstmal fertig, dann poste ich paar Screens …

die Funktion mixin in den scss hab ich noch nicht ganz verstanden.

@mwalbeck - hier ist vielleicht ein interessanter user… vielleicht sogar ein interessierter :wink:

1 Like

Es betrifft im Prinzip nur die SVG-Icons in /settings die Black bleiben. in settings/app sind die eigenen Apps mit separaten .dark icons auch schwarz.

aktuell sehen ich da keinen Ansatz mehr.

Mich würde das auch interessieren. Ich nutze zwar “Breeze Dark”, habe aber ebenfalls das Problem, das die Icons im TopMenu weiterhin in schwarz angezeigt werden.

1 Like

Jupp, war bei mir auch so. Scheinbar doch ein Bug …

Mal sehen ob ich es lösen kann, wäre nicht schlecht wenn ein Dev sich das mal ansehen kann.

Rechts oben zu den Settings ebenfalls.
img_023

So, in meinem Fall ist das Problem gelöst.
Ich hatte noch die App “Theming” aktiviert. Die ist wohl nur bis NC 13 geeignet.

Die App habe ich schon längst entfernt, schon zu Beginn bevor ich mit meinem Custom begonnen habe.

Achja, hab die neuste Version drauf, nur zur Info.

@JimmyKater sadly I speak very little german, I’m but your neighbor to the north. So I hope English is fine.

Here are a few pointers, that can hopefully help you along.

Firstly, because you are using the theming folder, the sass functions that are used to interact with the svg color api, are not available to you. Luckily you can easily defined them yourself. You can simple include this file in your theme, https://github.com/nextcloud/server/blob/master/core/css/functions.scss.

Secondly, to use the sass function you only need this part:

.icon-add {
        @include icon-color('add', 'actions', $color-white, 1, true);
}

that will be compiled into:

.icon-add {
        --icon-add-ffffff: url('/svg/core/actions/add/ffffff?v=1');
         background-image: var(--icon-add-ffffff);
}

Thirdly, you may or may not have to make the background-image important for the white icon to take precedent. If you change the icon-color mixin from https://github.com/nextcloud/server/blob/master/core/css/functions.scss to the following, it should work:

@mixin icon-color($icon, $dir, $color, $version: 1, $core: false) {
	$color: remove-hash-from-color($color);
	/* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */
	$varName: "--icon-#{$dir}-#{$icon}-#{$color}";
	@if $core {
		$varName: "--icon-#{$icon}-#{$color}";
	}
	#{$varName}: url(icon-color-path($icon, $dir, $color, $version, $core));
	background-image: var(#{$varName}) !important;
}

I hope that helps. You can also check out how I’ve implemented it in the Breeze Dark theme. It’s slightly different because it’s an app, so I can use the sass functions included with Nextcloud, but the rest should still apply. https://github.com/mwalbeck/nextcloud-breeze-dark

Also som icons are still not defined by variables, as an example, to fix the icons in the top right corner you can do this:

#settings #expanddiv li a img {
	filter: invert(100%);
}
1 Like

Hello mwalbeck,

Yes the north is almost German :wink: Thanks for the way to the destination. On the path I am also straight. So my thought was not so wrong.

But your help is enormous and makes it easier for me to implement the rest of the code. When I have solved it, I will report. A thousand thanks to you. We stay in contact :slight_smile:

I already solved this with the pure css statement from you ;-). Life can be so simple …

#settings #expanddiv li a img {
	filter: invert(100%);
}
2 Likes

Hello @mwalbeck,

Doesn’t quite work, with the mixin code. In which file exactly does the code have to be put?

.icon-add {
@include icon-color(‘add’, ‘actions’, $color-white, 1, true)
}

and where exactly does the code go here?

.icon-add {
–icon-add-ffffff: url(’/svg/core/actions/add/ffffff?v=1’);
background image: var(–icon-add-ffffff);
}

I copied the functions.scss into /core/css and not into my themes/mytheme! The .scss SASS do not work in the custom themes. I have added the .icon class to the icons.scss in core/css too.

Both the functions.scss and the .icon-add should be placed somewhere in your custom theme, not in /core/css. But you are correct, you can’t use sass directly with your custom theme, but you would have to compile the sass to css beforehand. So if you aren’t using sass to write your theme, then you can’t use the mixin code.

To work around it you can directly use the svg api instead. Since the svg api is available through simple URL’s on your nextcloud instance you can use background-image on it’s own.

I would like to not that the previous URL i posted, url('/svg/core/actions/add/ffffff?v=1'); is slightly wrong and this should be used instead:

.icon-add {
    background-image: url('/svg/core/actions/add?color=ffffff');
}

That can just go into your themes/mythemes/server.css

You can have a look at this page in the Nextcloud docs, at the bottom there is a bit of information about the URL structure https://docs.nextcloud.com/server/latest/developer_manual/design/icons.html#svgcolorapi

So if you go to https://your.nextcloud.domain/svg/core/actions/user?color=000000 you would see a black user icon. The following css rule would provide a white user icons for you

.icon-user {
    background-image: url('/svg/core/actions/user?color=ffffff');
}
1 Like

@mwalbeck
do you have telegram app?

No, unfortunately this does not work with the domain, because I have a DynDNS with port. So https://topa.dyndns:555/nextcloud/

Everything you’re suggesting, I’ve already tried everything.

https://topa.dyndns:555/nextcloud/svg/core/actions/user?color=000000

Not found :frowning:

On my server I cannot find a folder with /svg ?!, where should it be. I have a dynamic Dyn address.