Theme specific images

I believe that discourse should support uploading images that show differently per themes.
This would make it easier to create images adapted to a forums theme, example: If I was to use an image that had white text here, if the person viewing was using dark theme (or any theme with a black-ish background) they could view it perfectly fine.

However, if they were using a light theme (or any theme with a white-ish background) they could struggle or not be able to see it at all.

I beleive that Discourse should implement a way so that users can upload personalised images for each of the forums themes (if said permissions were enabled by site adminstrators).

1 Like

This is only an issue if the colors of the object(s) in the image exactly match the $secondary color of your theme since that’s used as the background for posts.

I also don’t really think users will actually take the time to edit their images to work on light / dark themes even if this feature were to be introduced.

Are you running into this a lot? If so, your use-case might benefit from some CSS additions to your themes to prevent this from happening. If you share more details about your use-case, like

  • what format you use for the images
  • some examples of what the images look like
  • a link to a page on your site where we can see this issue

then I’ll probably be able to help you with the required CSS.

Do note that when I say CSS, I don’t mean that it will fix each and every image, but it should help with a lot of them.

3 Likes

I’m only a user of a site, however as a user I believe it would be used a little bit.
Here is an example:

1 Like

Well, in this case, there’s not much we can offer you.

Prompting the users to upload different images for dark / light themes is not going to be implemented because most users won’t even bother as I described above.

Adding custom CSS won’t work in your case since you’re not an admin on the site.

If this is bothering you a lot, then please feel free to point the admin of the site you’re on to this discussion and we can advise them on what custom CSS needs to be added to fix your issue.

3 Likes

You can add a translucent backdrop behind your text to ensure it’s readable.

2 Likes