Conversation icon background color stays after switching OS dark/light mode

[juliushaertl]

How to use GitHub

• Please use the 👍 reaction to show that you are affected by the same issue.
• Please don't comment if you have no relevant information to add. It's just extra noise for everyone subscribed to this issue.
• Subscribe to receive notifications on status change and new comments.

---

Steps to reproduce

1. Have OS in light mode
2. Have talk open
3. Switch to OS in dark mode

Also happens the other way round

Expected behaviour

The background of the conversation icons in the left sidebar changes

This is how it looks after a page reload:

Actual behaviour

The background stays

Reproduced on our instance

[nickvergessen]

the image is cached in browser cache and the URL can not change. Press ctrl+f5 or wait max. 24h

[SystemKeeper]

the image is cached in browser cache and the URL can not change. Press ctrl+f5 or wait max. 24h

But we do have different endpoints for that: https://github.com/nextcloud/spreed/blob/ca1ad2d43c525256fccce4f8940ece4436e935f8/docs/avatar.md?plain=1#L70-L92

The check is also correctly working:

https://github.com/nextcloud/spreed/blob/ca1ad2d43c525256fccce4f8940ece4436e935f8/src/utils/isDarkTheme.js#L32-L32

But the conversation list does not take that into account

Used here:

https://github.com/nextcloud/spreed/blob/ca1ad2d43c525256fccce4f8940ece4436e935f8/src/components/ConversationIcon.vue#L220

But I guess since isDarkTheme is the fixed result of a function call, and therefore not reactive, it changes only after a reload.

[DorraJaouad]

Currently, we are updating the theme based on a CSS variable '--background-invert-if-dark' . Since CSS variables can't change without reloading the page, this means the theme check will only happen on load.

https://github.com/nextcloud/spreed/blob/cd20ba221b582ba95bdbad7e70221eb71569ddc5/src/utils/isDarkTheme.js#L32

[nickvergessen]

While it is not perfect, I would say it's an acceptable draw back for an edge case.