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

🌐 Non-english support đŸ‡©đŸ‡Ș Deutsch (german)
1

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.

img_021
img_021394×843 25.5 KB

2

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?

3

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 


4

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

5

ich mach das erstmal fertig, dann poste ich paar Screens 


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

6

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

1 Like
7

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.

8

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
9

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

10

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

11

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.

12

@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

13

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
14

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:

15

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


img_024
img_024703×452 19.4 KB 

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

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.

17

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
18

@mwalbeck
do you have telegram app?

19

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.

20

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.