[white theme] separate dark and light files for site logo and landing page image

georg yurij Posted in Theme Development 2 years ago

How can i use 2 separate files for dark and light mode?
I want to make my logos transparent and viewable in light and dark mode, so it needs 2 separate files.
how can we implement this two files in next versions of the theme?

Thanks alot

Replies
us MAURICE TAYLOR Replied 1 year ago

I don't know a lot like some of these other folks that know how to program, but i found this for you and I hope it's helpful in that it at least get you going in the right direction. https://larsmagnus.co/blog/how-to-make-images-react-to-light-and-dark-mode

German Georg yurij Replied 2 years ago

I have noticed that there are already separate images for the light and dark theme, but the automation, as it is already built in facebook and youtube, does not work yet.

German Georg yurij Replied 2 years ago

thanks for the tip, it is definitely interesting as a transitional solution.
Since it is only the logo and the welcome image, I feel the effort with 2 images worthwhile, because a high-contrast image now looks nicer.

German Michael Zülsdorff Replied 2 years ago

The solution is now to implement posibilities, that logos and pictures of a website also following this behavior.

Well, I'm questioning whether keeping duplicate images and implementing some extra logic to display the right one is really worth it. And if it wouldn't be much simpler to have just ONE image which displays fine, both in light and dark mode? Actually, there's various examples to prove that this is not impossible.

One is the little GIF icon chosen by Arsalan in components/OssnGiphy/images/gif.png, another one is the placeholder images I'm using for members without profile picture in themes/GreenByGreen/images/nopictures/users

enter image description here


enter image description here

German Georg yurij Replied 2 years ago

That has nothing to do with the browser, its theme relevant. I only told that with the firefox plugin, to show how i switch between light/dark mode without chaning the config in OSSN. I think its the goal of every website to make them switchable between light and dark mode automaticly because it will be standard behavior of every modern website.

The solution is now to implement posibilities, that logos and pictures of a website also following this behavior.

German Michael Zülsdorff Replied 2 years ago

Yes, that's what you told already. But I don't understand which way the Firefox Dark Reader is involved? I mean, you can't be sure anyway that all of your community members are running Firefox?!?

German Georg yurij Replied 2 years ago

The Problem is, that i have 2 transparent Images one with white foreground and one with black and i want that the images are changing according to the theme mode (dark/light), at the moment i can only use one in OSSN.

German Michael Zülsdorff Replied 2 years ago

Ok, that's interesting to know - but in which way is this related to your topic? I mean, if you want the Firefox Dark Reader adapt your transparent images too, you'd better contact the develeoper of the Firefox Dark Reader.

German Georg yurij Replied 2 years ago

I´m using firefox Dark Reader Plugin, thats automaticly switch all websites to darkmode when the system is in night mode.