Dark theme fixes

[jancborchardt]

Before:

After:

Please review @danxuliu @nextcloud/designers :)

[jancborchardt]

Fixed some additional things, and there’s also further issues which someone else needs to check out though:

• All icons in the sidebar which are on a background should be white, not black
  
• Same for the create conversation menu
  
• And for the share menu (it is correct in the share dialog itself, and for the other icons)
  
• Password protect icon should be white
  

[nickvergessen]

I'm not sure which share menu you are talking about?
If you talk about the "add participant" menu, that was fixed too by me, but I didnt tick it, since im not sure.

On the password thingy I don't know what's wrong. we use the correct class:

spreed/css/style.scss

Line 532 in 95e69a3

@include icon-black-white('no-password', 'spreed', 1);

spreed/js/views/callinfoview.js

Line 51 in 79632c1

' <span class="button {{#if hasPassword}}icon-password"{{else}}icon-no-password{{/if}}"></span>' +

Also once a password is set, it works as expected too.

[nickvergessen]

Okay, found the problem. The regex in https://github.com/nextcloud/server/blob/20519434879dd0ee9278d0871d92e9c11295adfd/lib/private/Template/IconsCacher.php#L188 doesn't match if there is a transformation as well:
https://regex101.com/r/booyc4/1

I removed the transformation for now and adjusted the viewport, I guess it still looks the same, at least I couldn't see a difference. but maybe you @jancborchardt or @skjnldsv know more?

[skjnldsv]

@nickvergessen which icon are we talking about?
Also: yes we then need to adapt the regex :)
Could you help?

[nickvergessen]

The image is in 2ee1b41

I'm very bad at regexes, especially with look-ahead and stuff, but I can try

[nickvergessen]

Right, fixed in the server with nextcloud/server#13650

But also fixed in the app by adding fill="#000" because the actual color replacement works then. so will be fixed with either next release

[jancborchardt]

Looks all good with your fixes @nickvergessen, thanks a lot! :) 👍 (Can’t Approve my own pull request ;)

[nickvergessen]

/backport to stable15

[backportbot-nextcloud]

backport to stable15 in #1452

[danxuliu]

Since 95e69a3 non-avatar icons are shown in black instead of white with the normal theme. Is that intended?

Conversation list:

Create conversation:

Add participant:

[nickvergessen]

Yes had to, the other apps do this since a long time already, i tried to block it because i think white looks more beautiful, but on dark mode nothing is visible otherwise

[jancborchardt]

Hmm, @nickvergessen I agree with you that white looks more beautiful (and is in line with our placeholder images with the initial).

On dark mode it should also be white – we probably need to add an exception in the dark theme so that icons in these circles are never inverted. (We have the same issue for icons in primary buttons, like for creating a new user in the user management. Icons in primary buttons should also be white in both normal and dark theme.)

@skjnldsv @juliushaertl what do you think? A rule in the color inversion to skip the icons inside other forms (at least if it’s standards like these avatar-like elements, or primary buttons) would probably be good?