Stream icons not visible in dark theme

[jancborchardt]

When you use the dark theme, the Activity stream looks like this (same in the file sidebar):

That’s because they are loaded in the <img> tag. Ideally it should be changed to use a class on the header like icon-… so it’s used as background-image and will automatically be adjusted to the theme color. Colored icons will stay like they are.

Documentation on that at: https://docs.nextcloud.com/server/latest/developer_manual/design/css.html#scss-icons-mixins

cc @nextcloud/designers

[nickvergessen]

The problem is a bit bigger, we send the images also to the desktop/mobile clients and they are part of the public API, while a CSS class is not part of the public API.

Also that would mean that ALL apps providing activities would need to load their CSS code on the files app and activity app.

Is the information "dark-theme" available via php code? then we can advice all the activity providers to read the property and send a white/black image accordingly.

[jancborchardt]

Oooh, good point. Then maybe easiest is to just add the activity stream icons to the dark theme css so they get inverted only on the server.

For that I would only need a class on each action block like "action-add" or "action-share" (or does that exist already?) so that we can avoid inverting the colored icons like add and delete. :)

[nickvergessen]

Use the css filter .activity-section .activity-icon > img.monochrome or .activity-section .activity-icon.monochrome img to add filter: invert(100%) and I will make sure it's applied correctly. Just tell me which one you use.

[jancborchardt]

@nickvergessen cool, thanks! I’ll use .activity-section .activity-icon.monochrome img, fixed in nextcloud/server@b8827ce