Make Icons White about nextcloud-breeze-dark HOT 8 CLOSED

The issue is sadly not as easy as making the icons available. Currently the way some of the icons are white is all in the names. If we take a look at the activity app. The original filename for that is activity.svg, so I just placed a white activity.svg file in the theme and nextcloud used that one instead. Now for those that are currently not white, their image filenames are app.svg/app-dark.svg. That means if I place a app.svg/app-dark.svg file in the theme all seven of those black icon would get that one icon. I haven't found another practical way to change the icons so that is why they are still black.

Now it is also true that some of those icons don't have a white counterpart yet but that won't help much if the above issue isn't addressed first.

from nextcloud-breeze-dark.

This is a little confusing. What are the seven icons (or do you mean locations where the icon is used?) and would making the app.svg black and the app-dark.svg white work?
I'm not quite sure I follow what you are saying.

from nextcloud-breeze-dark.

With the seven icons I was just referring to the seven black icons in your image.

There are currently 2 ways that I know of to change icons when doing a custom theme. The first is through CSS, and a lot of the icons can be changed that way. The second way is through, lets call it icon substitution, which the icons that can't be changed through CSS use. Lets use the activity app as an example again, if we don't have any theme enabled the path to that icon would be "/apps/activity/img/activity-dark.svg". Now to change that image I take note of the last part of that path the "/img/activity-dark.svg" part. There is also a folder called "img" in the theme, so I place a file called "activity-dark.svg" in the folder, so the path is "nextcloud-breeze-dark/core/img/activity-dark.svg". Nextcloud then notices the file and it takes precedence over the default app icon.

If we take a look at the Security menu, by default it uses the password.svg from the core nextcloud theme, so the path is "/core/img/actions/password.svg". To change it I then place a icon in "nextcloud-breeze-dark/core/img/actions/password.svg".

I hope that made sense as to how the changing of the icons works, so now to the problem at hand.

The icons that haven't been changed use the icon name "app.svg" or "app-dark.svg". The means if I went to change the logging icon and placed an "app-dark.svg" in "nextcloud-breeze-dark/core/img/app-dark.svg" not only the logging icon but also the theming, monitoring and all the current black icons would be change to that icon.

A note on why there is app.svg and app-dark.svg, they have been implementing away for nextcloud to switch between the two icons depending on the background. So if you would have a light background nextcloud would use the dark icons and vice versa. I haven't seem any documentation on it yet and it doesn't seems to be fully complete yet, so that is sadly not an option.

from nextcloud-breeze-dark.

Is there anything stopping you from using CSS to change the path to say "nextcloud-breeze-dark/apps/activity(or other app)/img/app-dark.svg"?

It seems to me like nextcloud pulls the icons from apps/app name/img/(app-dark.svg/app.svg) so if we just redirected this, would the problem be resolved? It should give us the ability to theme each app? Am I missing something?

from nextcloud-breeze-dark.

Yes, sadly the source of the of the images are defined in html and not in CSS so using CSS is not an option. I just realised while writing this that it should be possible with JavaScript as a temporary solution. I'll look into it and see what I can do.

from nextcloud-breeze-dark.

I never got around to providing an update for this, but here it is:

Currently there doesn't seem to be a way to add a JavaScript file through a custom theme, only replace an existing one. From my point of view this might lead to more trouble than it's worth, since you have to ensure the file is updated with the new upstream code if that file is updated, as well as making sure it won't cause trouble for older versions of Nextcloud.

from nextcloud-breeze-dark.

Instead of replacing the icons, you could invert the colors of the original icons using the CSS invert() filter like this:

img[src*="/img/app-dark.svg"] {
  filter: invert(1);
}
img[src*="/settings/img/help.svg"] {
  filter: invert(1);
}
...

Resource: https://www.w3schools.com/CSSref/css3_pr_filter.asp

from nextcloud-breeze-dark.

I completely forgot about substring matching in CSS, so thank you. I have pushed an update for the admin and apps section to change the icons to white.

from nextcloud-breeze-dark.