Wait I've Mind Bowling Idea For Figma... Open Your Prototype (design) Then Open Devtools With Menu Bar Of Browser Select HTML tag click element style paste this... boom 💥💥💥💥💥 😂😂😂😂
The real tip is to use: html, img, video, { filter: invert(1) hue-rotate(180deg) } That way everything is inverted, but images and embedded content don't get messed up.
This seems to only invert the unwanted stuff. What you can do is html { filter:invert(1) } then on a separate line img, video, { filter: invert(1)}. I thought the images and videos needed something like invert(0) to "uninvert" but it turns out they just need to be 'double inverted' to return to normal.
@@MuhammadHosny0 Exactly! And to be completely honest , the channel's owner sounded a bit condescending when he mentioned edge's compatibility. Albeit, I think it came from a place of ignorance rather that dumb hatred.
Yeah just recently complete moved to edge, it just feels faster and smoother than chrome and now I can import passwords, settings and extensions. I was sold
Maybe a simple ".dark-mode::not(.inverted)" would work? It would only invert and change the hue of the elements that are not tagged with the "inverted" class (if I keep the same name than in your example). That would allow to *remove any JavaScript* (except for the enter switch in this case) and *keep it all CSS based* and *only within one single line* .
"filter" is applied to the ".dark-mode" container itself, so whatever there is inside that, gets inverted, you cannot exclude elements like that. However, you can reverse the effect by re-applying it like ".dark-mode, .dark-mode .inverted { filter: invert(1) hue-rotate(180deg) }"
This is actually really interesting, you could try just applying that class to all img tags instead of manually adding an inverted class. The hue rotate is a really clever way of bypassing dodgy inversions which is cool
So you’re telling me that in order to keep some things unchanged, the way you recommend is to change them, then applying a script to loop trough each element that has a given class, to then reapply the same change you did in the first place so that it comes back to original? That seems efficient
This solution by @Tortuex in the comments seems like the best: Maybe a simple ".dark-mode::not(.inverted)" would work? It would only invert and change the hue of the elements that are not tagged with the "inverted" class (if I keep the same name than in your example). That would allow to remove any JavaScript (except for the enter switch in this case) and keep it all CSS based and only within one single line .
Hey i just thought of two things u might want to know 1. You probably already know, but, you can press the new file button and write css/style.css. This will quickly create the necessary folders as well as the file. 2. I didn't personally test this, but I feel like it should work. Why even do a for each loop in javascript for reversing the css filter property, why not just in the css write .dark-mode .invert { // That invert css line }
JS noob here. Gary, I assume when you double invert, you are wasting CPU cycles. Is there a better way to do it? Or is this method just a quick and dirty hack?
This video was so helpful for me . Dark mode is headache to implement with css and javascript. But this method can be very very useful and effective with some extra work 💪
I'm a complete noob in css, so please don't hammer me if this is wrong! Could you do it as, for example: html { filter: invert(1) hue-rotate(180deg) img, etc, etc, etc { filter: invert(1) hue-rotate(180deg) } } on the basis that img is a child of (and so relative to) html, therefore automatically switching it back for all img tags?? Or is that completely wrong??
4 ปีที่แล้ว +4
Perhaps you might add a "data-revert" (Or something like that) to personalize the degre of invertion for specific elements
I know this isnt what the video is about, but you should write `e = e ?? window.event` I'm not sure if `??=` is wildly supported yet, but we worked hard for the `??` operator.
Heyyy I noticed you have a bass and guitar hanging on your wall. I am new to this channel so I don't know if you answered this. But as a fellow musician who is trying to start his freelance web dev business. What music do you like to play and how often do you play?
Can you make the video about your setup device and application you are use for make your youtube video ? I was so admire with each video your make. Its like so smooth and i cant find the bad thing in every 1 second in video.
Well, Microsoft Edge is actually a repackaged Chromium browser (the open-source version of Google Chrome) so everything that works in Chrome should technically work in Edge too.
Lmao I could see the fear in his eyes when he wrote that one line that all viewers will click off the video cause they got what they came for. Gotta pump up that watch time tho
I used .dark-mode, .dark-mode *.inverted{ filter: invert(1) hue-rotate(180deg); } instead of doing it in the js on my layout to optimize it a little bit. Great video!
W3C f..ed things up from back when they implemented functionality in CSS via :hover... I swear, you can build a fully functional site without javascripot in many cases, because functionality has been built into both HTML and CSS. Think about tags like / and css like pointer-event: also
After seeing this video, I made a small JavaScript to automate the idea :) you can find the source code on github: github.com/AspieSoft/toggle-darkmode-js Simply add the script (and jQuery), and everything runs automatically. It auto detects the brightness of each color, and detects "prefers-color-scheme" to set the right mode (including live updates)
I can see the use of this for very quick mockups, as you and the original blog post said. In the real world, though, how do you design 'dark mode' implementations? I've never done one, but I'd imagine CSS custom properties are the way forward, right?
hmm a bit finicky in converting solid yellows and greens on logos and backgrounds back to the original (using Chrome 85). needed to put more effort in excluding these images, svgs, and component with yellow and green background colors from the application of the filter effect. as said in the video, if you are not strict with brand colors, this will suffice. if your CSS framework supports dark mode, I think that's better.
i have a doubt, which is apart from this Context, but garry, can you explain, how you bring your speaking thumbnail to the footer of the video, without a square background, but your body shaped crop... I need this badly, Pls HELP
This method is very slow on lower-end computers. I tried it on a laptop with an Intel i3-6100U, 4GB RAM (running an Arch-based distro) and the smoothness of my bare bones website went from smooth to choppy. Maybe I'll do something else for it.
The new Microsoft Edge is actually really good right now. Microsoft realized they're bad at making their own browsers so they implemented made one built upon Chromium. It should have same compatibilities as Chrome itself.
I have previously used inverted for my own profile page... But using this methode turns out to be a bit heavier for the computer as it is calculating realtime. That's why I had to ditch this method for the favour of performance. Otherwise it is cool for quick demo. For me the problem turned out to be the scroll became sluggish
Just to nit pick, .dark-mode .inverted{ filter....} Would work better than foreach'ing, as you are already adding the class to elements. Great snippet though, didn't know about this one. Thx
That's a nice trick, but I wouldn't use it on the regular. For me, it's not that hard to make a web page in Dark Mode. (It probably also help's that I use Sass to develop my stylesheet)
Wouldn't it be easier in the long run to use CSS variables? My thinking is, that it should be very rare that you need more than three different colors, and can you not just define them at the very top? It is a neat trick nevertheless, and I would assume it will be used not necessarily for dark mode, but for those pages where you need a dark background to put other content on top, for example image galleries
@@AtheistReligionIsCancer Yes true, CSS variable's are useful, and you shouldn't need more than three colors. I mainly use Sass now to Structure my CSS file. I do the Sass stuff on the local machine and just upload the css file to server once I compile it.
Or you could use css variables and switch the colour palette correctly (either with a theme switch or prefers-color-scheme), this hue rotation is just messy 👎🏻
The fact that I can not find a single comment pointing out that JS for toggle the "inverted" class is not necessary at all and could be solved using CSS selectors, everyone stopped watching after the trick was revealed :D
@@Anton-cv2ti you're saying in the case there's a parent and child that both have the invert class? There's no reason for the child to have that class then.
Do you dark mode every layout?
Yeah! I Love Making Themes Muhha!😘😘😘
@@LabhamJain It really is fun.
Wait I've Mind Bowling Idea For Figma... Open Your Prototype (design) Then Open Devtools With Menu Bar Of Browser Select HTML tag click element style paste this... boom 💥💥💥💥💥 😂😂😂😂
No mucg
I make it so it's unique and not too bright
The property is:
.dark-mode {
filter: invert(1) hue-rotate(180deg)
}
Thanks!
Thanks, why do I need to watch 12 mins video for 1 line of code.
Thenks
Wise choice that i stopped the video then scroll through the comments
Thanks
The real tip is to use:
html, img, video, {
filter: invert(1) hue-rotate(180deg)
}
That way everything is inverted, but images and embedded content don't get messed up.
Thanks
This seems to only invert the unwanted stuff. What you can do is html { filter:invert(1) } then on a separate line
img, video, { filter: invert(1)}.
I thought the images and videos needed something like invert(0) to "uninvert" but it turns out they just need to be 'double inverted' to return to normal.
🌟
1 line of CSS, 12 minute video 🤣
That's why i don't like his channel
1 CSS property, not 1 line
You are el stupido
@@greenshaheen6716 yeah, fireship's better ;)
@@laoblue9302 yes. Brad traversy too
The new Edge Browser is Chromium based 😅
@Xero Garbage? It's pretty decent to me.
@@MuhammadHosny0 Exactly! And to be completely honest , the channel's owner sounded a bit condescending when he mentioned edge's compatibility. Albeit, I think it came from a place of ignorance rather that dumb hatred.
maabed sj calm down you guys, it’s just a meme
@Xero lol what gives? How's Google any different?
@Xero lol why do you even use TH-cam if you are concerned about privacy
By the way, the new microsoft edge is based on chromium . This means that everything that works in chrome (including extensions) works in edge aswell.
Yeah just recently complete moved to edge, it just feels faster and smoother than chrome and now I can import passwords, settings and extensions. I was sold
Thank you, just wanted to say the same, he should pin this comment lol
Maybe a simple ".dark-mode::not(.inverted)" would work?
It would only invert and change the hue of the elements that are not tagged with the "inverted" class (if I keep the same name than in your example).
That would allow to *remove any JavaScript* (except for the enter switch in this case) and *keep it all CSS based* and *only within one single line* .
Neat Solution
@@z-aru thanks ^^
"filter" is applied to the ".dark-mode" container itself, so whatever there is inside that, gets inverted, you cannot exclude elements like that. However, you can reverse the effect by re-applying it like ".dark-mode, .dark-mode .inverted { filter: invert(1) hue-rotate(180deg) }"
@@szegedigergely good to know :)
@@szegedigergely So like a double no is a yes.
It's great to see this. I have been managing a dark / light mode and it can be a bit if a pain to manage. But it's a really great feature for users.
This is actually really interesting, you could try just applying that class to all img tags instead of manually adding an inverted class. The hue rotate is a really clever way of bypassing dodgy inversions which is cool
The thing I am waiting for a long time!! Thank you
So you’re telling me that in order to keep some things unchanged, the way you recommend is to change them, then applying a script to loop trough each element that has a given class, to then reapply the same change you did in the first place so that it comes back to original? That seems efficient
Whats your solution
This solution by @Tortuex in the comments seems like the best:
Maybe a simple ".dark-mode::not(.inverted)" would work?
It would only invert and change the hue of the elements that are not tagged with the "inverted" class (if I keep the same name than in your example).
That would allow to remove any JavaScript (except for the enter switch in this case) and keep it all CSS based and only within one single line .
For images, you can also use the :not(img) selector, so that the filter does not apply for every image element!
0:56 when the bell hits the throat
Hey i just thought of two things u might want to know
1. You probably already know, but, you can press the new file button and write css/style.css. This will quickly create the necessary folders as well as the file.
2. I didn't personally test this, but I feel like it should work. Why even do a for each loop in javascript for reversing the css filter property, why not just in the css write
.dark-mode .invert {
// That invert css line
}
I love just how creative people can be. This is great!
Sin Palabras
Grandioso Video, Thanks!
Loved the music towards the end, haha. Great content btw!
JS noob here.
Gary, I assume when you double invert, you are wasting CPU cycles. Is there a better way to do it?
Or is this method just a quick and dirty hack?
Didn't know about that property. Thanks Badboy
Edge is chromium based not IE based.
Technically it's rebadged google chrome.
Technically Edge is rebadged Chromium, such as Google Chrome is rebadged Chromium.
almost all browsers currently are chromium based, it's just simple and open source enough to just work
This video was so helpful for me . Dark mode is headache to implement with css and javascript.
But this method can be very very useful and effective with some extra work 💪
Don’t be surprised it works in Edge as it is a mere ms copy of Chrome. Safari would be a great place to check if it works, along with mobile browsers
Edge is based on Chromium which means anything that works on Chrome works on Edge ... Great Video
I'm a complete noob in css, so please don't hammer me if this is wrong! Could you do it as, for example:
html {
filter: invert(1) hue-rotate(180deg)
img, etc, etc, etc {
filter: invert(1) hue-rotate(180deg)
}
}
on the basis that img is a child of (and so relative to) html, therefore automatically switching it back for all img tags?? Or is that completely wrong??
Perhaps you might add a "data-revert" (Or something like that) to personalize the degre of invertion for specific elements
IE : "I'll ruin this trick.... oh also almost every css js anything you throw at me, unless.... I approve of it"
Just at the right time. Thanks
Crazy, great video thanks a bunch.
The firefox bug can be solved by explicitly adding background-color : white to the root pseudo class
I know this isnt what the video is about, but you should write `e = e ?? window.event` I'm not sure if `??=` is wildly supported yet, but we worked hard for the `??` operator.
Actually the Edge Browser is based on Chromium. So showing the working example is a bit redundand.
I noticed that you can play with the hue-rotate value and it will change a little bit the colors. Nice video!
10:33 looks like you are watching lots of Ed's videos these days 😂
very useful! Thank you
Heyyy I noticed you have a bass and guitar hanging on your wall. I am new to this channel so I don't know if you answered this. But as a fellow musician who is trying to start his freelance web dev business. What music do you like to play and how often do you play?
Can you make the video about your setup device and application you are use for make your youtube video ? I was so admire with each video your make. Its like so smooth and i cant find the bad thing in every 1 second in video.
Anything can be done with one line of code. It’s just gonna take a lotta side scrolling...
It works on MS Edge as the base of that browser is Chromium. Just an FYI for those who are asking
Well, Microsoft Edge is actually a repackaged Chromium browser (the open-source version of Google Chrome) so everything that works in Chrome should technically work in Edge too.
Lmao I could see the fear in his eyes when he wrote that one line that all viewers will click off the video cause they got what they came for. Gotta pump up that watch time tho
Why would you be surprised that it works in Edge? It's basically the same browser as Chrome now.
that is really cool dude
Nice video.. learnt something cool feature.. ✌️
I used .dark-mode, .dark-mode *.inverted{ filter: invert(1) hue-rotate(180deg); } instead of doing it in the js on my layout to optimize it a little bit. Great video!
W3C f..ed things up from back when they implemented functionality in CSS via :hover... I swear, you can build a fully functional site without javascripot in many cases, because functionality has been built into both HTML and CSS. Think about tags like / and css like pointer-event: also
nice trick Gary, regards from Paraguay..
You are the linode!
Awesome dude !!!! keep it up
I don't know if it's already fixed, but in Mozilla Firefox, the body background is fixed by manually adding a background to the body.
After seeing this video, I made a small JavaScript to automate the idea :)
you can find the source code on github: github.com/AspieSoft/toggle-darkmode-js
Simply add the script (and jQuery), and everything runs automatically.
It auto detects the brightness of each color, and detects "prefers-color-scheme" to set the right mode (including live updates)
I can see the use of this for very quick mockups, as you and the original blog post said. In the real world, though, how do you design 'dark mode' implementations? I've never done one, but I'd imagine CSS custom properties are the way forward, right?
Isn't the JS and CSS on Chrome the same as on MS Edge? They both are based on Chromium, right?
hmm a bit finicky in converting solid yellows and greens on logos and backgrounds back to the original (using Chrome 85). needed to put more effort in excluding these images, svgs, and component with yellow and green background colors from the application of the filter effect. as said in the video, if you are not strict with brand colors, this will suffice. if your CSS framework supports dark mode, I think that's better.
The new edge is based on chrome 😅 so it’s using webkit Now.
Good vid anyway 👍🏼
Chrome doesn’t use webkit
@@ownadi You're right, it uses 'blink' now, in the past chrome used Webkit :P
You can also use :not(.inverted) psudo selector to ignore inverted class.
Amazing!
its perfect, thanks
i have a doubt, which is apart from this Context, but garry, can you explain, how you bring your speaking thumbnail to the footer of the video, without a square background, but your body shaped crop... I need this badly, Pls HELP
I've used this for a long time myself.
filter: invert(100%) hue-rotate(180deg)
since you are on windows, you can use windows button and V, when paste. it will enable copy clipboard. 😎
I think that it's not working in Firefox because body in it may be actualy transparent instead of white.
Maybe if you set body background to #fff it will work.
You should not do the js loop to add a new class, you can use the css selector ".dark-mode .inverted {" instead
This method is very slow on lower-end computers. I tried it on a laptop with an Intel i3-6100U, 4GB RAM (running an Arch-based distro) and the smoothness of my bare bones website went from smooth to choppy. Maybe I'll do something else for it.
The new Microsoft Edge is actually really good right now. Microsoft realized they're bad at making their own browsers so they implemented made one built upon Chromium. It should have same compatibilities as Chrome itself.
Last time I checked Edge had better support than firefox, and its based on the same engine as chrome.
Awesome quick demo.
Could you share the Bulma video you mentioned at 2:26
I have previously used inverted for my own profile page... But using this methode turns out to be a bit heavier for the computer as it is calculating realtime. That's why I had to ditch this method for the favour of performance. Otherwise it is cool for quick demo.
For me the problem turned out to be the scroll became sluggish
Hey i need a help, i want to make checkbox which toggles dark mode, how can i use this property , i will be waiting for the response, Thank You
Катюха - красава 😘
I'm asking... Where is the support for IE11? 😂😂 I just kidding. I think is the best of last videos! Thank you Gary!
you could just invert the black and white, find and replace swap
Just to nit pick, .dark-mode .inverted{ filter....} Would work better than foreach'ing, as you are already adding the class to elements. Great snippet though, didn't know about this one. Thx
Hi I loved the content. But again how do we fix that issue of about fire fox not giving dark background
why not select the body with document.body instead of whatever you did
Edge is chrome with windows label, so yes it will work with it
Tip: If you create a file called css/main.css it'll create a folder named css with a file called main.css
What if you used brightness(10%) on the last "boxes" or the images where invert() doesn't look good?
Firefox has default white background in HTML tag. Edge is based on Chrome, so...
Very useful !!!!!!!!!!!!!
That's a nice trick, but I wouldn't use it on the regular. For me, it's not that hard to make a web page in Dark Mode. (It probably also help's that I use Sass to develop my stylesheet)
Wouldn't it be easier in the long run to use CSS variables?
My thinking is, that it should be very rare that you need more than three different colors, and can you not just define them at the very top?
It is a neat trick nevertheless, and I would assume it will be used not necessarily for dark mode, but for those pages where you need a dark background to put other content on top, for example image galleries
@@AtheistReligionIsCancer Yes true, CSS variable's are useful, and you shouldn't need more than three colors. I mainly use Sass now to Structure my CSS file. I do the Sass stuff on the local machine and just upload the css file to server once I compile it.
Or you could use css variables and switch the colour palette correctly (either with a theme switch or prefers-color-scheme), this hue rotation is just messy 👎🏻
Right, like I said in the video, it could be useful for a really simple page, or just prototyping.
Or you can change the color of each element with JS... There's plenty of solutions but one line css is really faster...
Why not just use css's ":not(.invertproof)" instead of js to keep anything you dont want to get inverted?
Thanks for the content btw👍
The Music in background uffff
The fact that I can not find a single comment pointing out that JS for toggle the "inverted" class is not necessary at all and could be solved using CSS selectors, everyone stopped watching after the trick was revealed :D
hello sir, is your UI design course out?
“It works in edge!”
👀 Edge being built in chromium
Edge is running on Chromium Engine so anything work on Google Chrome works on Edge.
sir when i open dropdown menu and i used marquee text marquee text shown over dropdown how can i solve it
Why not .dark-mode:not(img):not(button *)
Awesome Awesome stuff
nice one..
and if i have a background img in the body tag haw can i invert that img to look normaly?
Here is what you're looking for @3:52
:root{ filter: invert(100%)}
Из пальца высосал 12 минут
Пока костыли пишешь для исправления инвертирования, на выходе столько же кода, как при стандартных подходах выйдет
He even remembered his own code. Seriously.
You could still make this one line if you used the :not() selector. .dark-mode :not(img):not(.inverted){ filter: invert(100%) }
It doesn't work on text shadows, font color, border colors , or gradients though.
very helpful
Instead of applying it twice, you could just apply it once to all elements EXCEPT the ".invert" class elements, using ":not(.invert)"
Nope. You would be reverting the color multiple times for nested elements, making a for a real schwifty color scheme.
@@Anton-cv2ti you're saying in the case there's a parent and child that both have the invert class? There's no reason for the child to have that class then.
Good content
Contact Dropbox support! They could use the help for their Android app lol,
Good video BTW, very informative!