最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

css - How to deal with logo color on dark mode?

programmeradmin2浏览0评论

I'm trying to add a dark mode on my website via prefers-color-scheme webkit. However, my logo is all black, while my header is white. On dark mode it should be the other way around. My logo is in PNG and I thought it wouldn't be a bad idea to somehow upload two logos with different selectors and hide one via CSS on light mode, and the other one on dark mode. My question is: is there any way to do it?

If no, does anyone have any other ideas how could I achieve what I need?

EDIT:

I'm trying to do exactly the same thing as this guy: ;t

However, his logo is a simple text so he can easily change its color via CSS. Mine is in PNG and I'm not able to do this.

I'm trying to add a dark mode on my website via prefers-color-scheme webkit. However, my logo is all black, while my header is white. On dark mode it should be the other way around. My logo is in PNG and I thought it wouldn't be a bad idea to somehow upload two logos with different selectors and hide one via CSS on light mode, and the other one on dark mode. My question is: is there any way to do it?

If no, does anyone have any other ideas how could I achieve what I need?

EDIT:

I'm trying to do exactly the same thing as this guy: https://www.youtube/watch?v=eY4M7HtP9LA&t

However, his logo is a simple text so he can easily change its color via CSS. Mine is in PNG and I'm not able to do this.

Share Improve this question asked Jul 3, 2020 at 11:31 kacper3355kacper3355 772 silver badges9 bronze badges 3
  • Hi kacper! This question is off-topic for Wordpress Development as it's about content and css/html/graphics and nothing specific to Wordpress. You may want to find a different StackExchange site to post it. – mozboz Commented Jul 3, 2020 at 11:53
  • Sorry, my bad - should I delete the question? I've already received an answer. – kacper3355 Commented Jul 3, 2020 at 12:19
  • I'd say leave it, I guess moderators will delete it if they feel like it ;-) – mozboz Commented Jul 3, 2020 at 12:20
Add a comment  | 

1 Answer 1

Reset to default 2
  1. Apply filter: invert(1) in dark mode if your logo is simple enough (in shades of grey).

  2. Overlay your dark mode logo on top of your normal logo and change the opacity.
    This is what we do. Our logo consists of two lines of text, one of them is black and the other is colored. We have the same logo in two containers overlaid one above the other (position: absolute), but one container is half the height of the logo to only cover the first line of text and it has the invert filter applied. When switching to dark mode (with a cool transition), the inverted logo (one white line of text) is revealed.

  3. Use SVG.

发布评论

评论列表(0)

  1. 暂无评论