This is an absolute no-brainer method of converting an already developed website to support dark mode.
Without further ado let's get into it! 👾
C...
For further actions, you may consider blocking this person and/or reporting abuse
This is very amazing, I'm surprised to realize to know that achieving dark mode on one's site is simpler than I thought
Well, they say a magician should never reveal his tricks. Maybe I am just a bad one 😂😀
if you want full greyscale dark mode then use
invert(1) greyscalle(1)
Yes, but the only downside to it is that even the images go greyscale
Would that be such a bad thing? I've always thought having them do that would be pretty cool.
Oh! yes, it would be. I once worked for a client where the dark mode had everything greyscaled. It was awesome 😎 It's just that not every UX would work better that way. So it has to be informed decision
Yeah agreed.
Excellent! Changing themes also can be made with Yogurt Framework based on a web browser or app settings. Read Theme Auto.
And to force the page theme to turn into either
dark
orlight
.Hello!
That is amazing simple decision!
Great! Thank you very much.
But it is also converted all my background images...
Is it exist any option for filter them?
Yeah. You have to apply invert filter again on images to re-colorize them and turn back the hue a whole of 180deg.
We can do that by selecting all images so
I think he was referring to CSS background-image not img's
I get it. Well, there are a couple of ways we can achieve that too. If it is just a div with a background-image set. Then applying filter would not be a problem there, but if that element has some content then the filter might affect it all too. So we might have to check for specialized solutions.
There is a beautiful article on css-tricks regarding the same css-tricks.com/apply-a-filter-to-a....
Hope that helps 😀
Yes, correct.
I found only the way to add extra "non-dark-mode" class to turn them back...
Excellent! Could you please share the JavaScript code to toggle between themes as well?
Please check out the post-
Dark Mode - Unmistified! 🐱👤
Akhil Arjun ・ Aug 3 ・ 3 min read
I am writing a post for the javascript side of it too. Will post it today itself 🙂
Someone likely mentioned this already, but there seems to be a "gotcha" with Firefox and Edge.
Firefox appears to not apply the filter to the
background-color
of thehtml
orbody
element.And Edge (not that I actually care) wont apply the filter to
body
but will tohtml
So these wont work
Cross-Browser Workaround
Put all your stuff in a wrapper element just under the
body
.Hey there !
I'm posting this to warn you about the general visual hierarchy of any app using this no-brainer method.
Your components should never be darker than your background, see this tweet for any references.
twitter.com/steveschoger/status/11...
While I can see some uses cases when this method is simple yet effective, it would strongly suggest anyone reading this to dive into Custom CSS properties and setting up colors scheme by hand, especially when you have a strong color identity and things can spice a little bit by naively inverting those ( accessibility and design issues ).
What's the performance impact of that filter on different browsers and platforms?
It would be a very lomg converstaion. But since we are using transition property on the html block element we can go ahead and add
will-change: transform
property to it too.This will force it into GPU rendering the page and thereby making it smooth
There is a long awesome post in Smashing Magazine for this
smashingmagazine.com/2016/12/gpu-a...
Hope this helps
Fantastic!
I shared it on my twitter account (putting credits).
Let me know if there's a copy right problem.
Thank you, peace.
Hey nopes. Have at it bro 😎✌
Voila!
This is a wonderful post.
Thanks mate 👍
Awesome trick! Thanks Akhil. ☺️
You are welcome 🕺
Well, there are a couple of ways we can achieve that too.
If it is just a div with a background-image set. Then applying filter would not be a problem there, but if that element has some content then the filter might affect it all too. So we might have to check for specialized solutions.
There is a beautiful article on css-tricks regarding the same css-tricks.com/apply-a-filter-to-a....
Hope that helps 😀
I have to try this asap! However most of my theme elements are already dark, would turn white with inversion!!!!!!!!!!! husseinkizz.ml any work around?
nice! how about emojis tho
Wonderful !!!
This is amazing!
Nice demo, to prevent the image temporarily being inverted and avoid having an extra class you can replace the second one with a :not filter
Thats cool! Thanks for that tip ❤️
Awesome! Would love to use this technique in my portfolio!
Cool. Do drop me a link to your portfolio once done. Would love to see it 👾🕺
Great post! My profile pic looks like a demon but i see your tip about filtering the images. Nice work!
Haha 😅. Do let me know once you are done with it. I would love to see the result 😊
That's really cool. The only thing I noticed is that everything gets really dim as you scroll. When you stop scrolling the brightness picks back up
I dont know if that is because of the filter, or just browser settings. I will take a look at it 😊
It's amazing:)
I'll try at my site!
Do let me know how it goes! 😍
Wonderful post, mate
Glad you liked it !! 🕺
This is wonderful. So simple. Thank you
Am glad it helps 😊
I'm trying
Thanks 👍
Do let me know how it goes 🙂
I have used it in a demo application i am. Building for another PWA tutorial
akhilarjun.github.io/news-peek/
Check it out for implementation of the dark mode 👍
Not working well in Firefox desktop