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 💥💥💥💥💥 😂😂😂😂
@mudrank41844 жыл бұрын
No mucg
@ianthehunter35324 жыл бұрын
I make it so it's unique and not too bright
@Itschotsch4 жыл бұрын
The property is: .dark-mode { filter: invert(1) hue-rotate(180deg) }
@АртёмКурилко-н6ч4 жыл бұрын
Thanks!
@bayudamar84924 жыл бұрын
Thanks, why do I need to watch 12 mins video for 1 line of code.
@god_gaming1784 жыл бұрын
Thenks
@fairytail61524 жыл бұрын
Wise choice that i stopped the video then scroll through the comments
@averageplayer81154 жыл бұрын
Thanks
@DevProTips4 жыл бұрын
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.
@berenboden4 жыл бұрын
Thanks
@creedolala69184 жыл бұрын
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.
@ceptember.2 жыл бұрын
🌟
@thmsmlr4 жыл бұрын
1 line of CSS, 12 minute video 🤣
@greenshaheen67164 жыл бұрын
That's why i don't like his channel
@farhan7874 жыл бұрын
1 CSS property, not 1 line
@fauxcallingme95614 жыл бұрын
You are el stupido
@laoblue93024 жыл бұрын
@@greenshaheen6716 yeah, fireship's better ;)
@greenshaheen67164 жыл бұрын
@@laoblue9302 yes. Brad traversy too
@stefanschlipfinger59164 жыл бұрын
The new Edge Browser is Chromium based 😅
@maabed10224 жыл бұрын
@Xero Garbage? It's pretty decent to me.
@maabed10224 жыл бұрын
@@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.
@ukn44 жыл бұрын
maabed sj calm down you guys, it’s just a meme
@maabed10224 жыл бұрын
@Xero lol what gives? How's Google any different?
@michaelbitzer72954 жыл бұрын
@Xero lol why do you even use KZbin if you are concerned about privacy
@minecrap52564 жыл бұрын
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.
@MrTHEO99114 жыл бұрын
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
@nagyszabolcs94514 жыл бұрын
Thank you, just wanted to say the same, he should pin this comment lol
@Tortuex_4 жыл бұрын
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* .
@z-aru4 жыл бұрын
Neat Solution
@Tortuex_4 жыл бұрын
@@z-aru thanks ^^
@szegedigergely4 жыл бұрын
"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) }"
@Tortuex_4 жыл бұрын
@@szegedigergely good to know :)
@iyedbouazdia35944 жыл бұрын
@@szegedigergely So like a double no is a yes.
@edoardoguido16884 жыл бұрын
For images, you can also use the :not(img) selector, so that the filter does not apply for every image element!
@tcroft4 жыл бұрын
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
@davidfitcher29534 жыл бұрын
0:56 when the bell hits the throat
@Peter-A4 жыл бұрын
Edge is chromium based not IE based. Technically it's rebadged google chrome.
@mxdanger4 жыл бұрын
Technically Edge is rebadged Chromium, such as Google Chrome is rebadged Chromium.
@astitva50024 жыл бұрын
almost all browsers currently are chromium based, it's just simple and open source enough to just work
@javiarenas4 жыл бұрын
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
@FlySoloG4 жыл бұрын
Whats your solution
@FlySoloG4 жыл бұрын
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 .
@HostDotPromo4 жыл бұрын
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.
@ArtsandGadgetsStuff4 жыл бұрын
The thing I am waiting for a long time!! Thank you
@josipmuzic27333 жыл бұрын
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 }
@IAmSamuelCharpentier4 жыл бұрын
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
4 жыл бұрын
Perhaps you might add a "data-revert" (Or something like that) to personalize the degre of invertion for specific elements
@TheHermitHacker4 жыл бұрын
I love just how creative people can be. This is great!
@aspiesoft41444 жыл бұрын
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)
@abdellahmeridja77944 жыл бұрын
Edge is based on Chromium which means anything that works on Chrome works on Edge ... Great Video
@birsingh53884 жыл бұрын
10:33 looks like you are watching lots of Ed's videos these days 😂
@blazi_03 жыл бұрын
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 💪
@Telladriel4 жыл бұрын
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
@andresrivasa4 жыл бұрын
Sin Palabras Grandioso Video, Thanks!
@RanjanKumar-bu7ws4 жыл бұрын
The firefox bug can be solved by explicitly adding background-color : white to the root pseudo class
@sehajpreetsingh41774 жыл бұрын
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?
@maits184 жыл бұрын
It works on MS Edge as the base of that browser is Chromium. Just an FYI for those who are asking
@artaizen16134 жыл бұрын
IE : "I'll ruin this trick.... oh also almost every css js anything you throw at me, unless.... I approve of it"
@julianavar38364 жыл бұрын
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.
@rockers4514 жыл бұрын
Loved the music towards the end, haha. Great content btw!
@dominikdorfi4 жыл бұрын
Actually the Edge Browser is based on Chromium. So showing the working example is a bit redundand.
@MARIUTSKI138974 жыл бұрын
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!
@AtheistReligionIsCancer4 жыл бұрын
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
@ic3xiii4 жыл бұрын
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.
@andresfuenzalida8694 жыл бұрын
I noticed that you can play with the hue-rotate value and it will change a little bit the colors. Nice video!
@aldifarzum32904 жыл бұрын
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.
@robin_miller_music3 жыл бұрын
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??
@otesunki4 жыл бұрын
I've used this for a long time myself. filter: invert(100%) hue-rotate(180deg)
@ClashForYou4 жыл бұрын
Crazy, great video thanks a bunch.
@LucXX364 жыл бұрын
Didn't know about that property. Thanks Badboy
@siddhantjain24024 жыл бұрын
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.
@R4pepeArts4 жыл бұрын
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.
@frankiefab4 жыл бұрын
Just at the right time. Thanks
@goldfishbrainjohn24624 жыл бұрын
very useful! Thank you
@williamherring4 жыл бұрын
Anything can be done with one line of code. It’s just gonna take a lotta side scrolling...
@juanmolinas4 жыл бұрын
nice trick Gary, regards from Paraguay..
@ayushmanbt4 жыл бұрын
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
@michalbacinski67004 жыл бұрын
I'm asking... Where is the support for IE11? 😂😂 I just kidding. I think is the best of last videos! Thank you Gary!
@lunarorbit4 жыл бұрын
Why would you be surprised that it works in Edge? It's basically the same browser as Chrome now.
@neerajmalhotra82774 жыл бұрын
You can also use :not(.inverted) psudo selector to ignore inverted class.
@alex-suciu4 жыл бұрын
since you are on windows, you can use windows button and V, when paste. it will enable copy clipboard. 😎
@TheFlexy954 жыл бұрын
The new edge is based on chrome 😅 so it’s using webkit Now. Good vid anyway 👍🏼
@ownadi4 жыл бұрын
Chrome doesn’t use webkit
@TheFlexy954 жыл бұрын
@@ownadi You're right, it uses 'blink' now, in the past chrome used Webkit :P
@outofboundsbro4 жыл бұрын
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?
@balus1434 жыл бұрын
Nice video.. learnt something cool feature.. ✌️
@frmcf4 жыл бұрын
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?
@guypersson2 жыл бұрын
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.
@simontrichereau1364 жыл бұрын
You should not do the js loop to add a new class, you can use the css selector ".dark-mode .inverted {" instead
@LisekLucek4 жыл бұрын
I think that it's not working in Firefox because body in it may be actualy transparent instead of white.
@LisekLucek4 жыл бұрын
Maybe if you set body background to #fff it will work.
@yadneshkhode30914 жыл бұрын
Awesome dude !!!! keep it up
@Populartiktox3 жыл бұрын
that is really cool dude
@ryanmmbale89932 жыл бұрын
Hi I loved the content. But again how do we fix that issue of about fire fox not giving dark background
@k4m924_4 жыл бұрын
Катюха - красава 😘
@kvdhar50414 жыл бұрын
Awesome quick demo. Could you share the Bulma video you mentioned at 2:26
@BlueJDev4 жыл бұрын
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
@termidesign4 жыл бұрын
its perfect, thanks
@shivammakwan64094 жыл бұрын
You are the linode!
@IAmOxidised75254 жыл бұрын
Edge is chrome with windows label, so yes it will work with it
@dankmemes40683 жыл бұрын
you could just invert the black and white, find and replace swap
@yannisgoogleapps92493 жыл бұрын
Isn't the JS and CSS on Chrome the same as on MS Edge? They both are based on Chromium, right?
@soniablanche56724 жыл бұрын
why not select the body with document.body instead of whatever you did
@PossessWithin4 жыл бұрын
Here is what you're looking for @3:52 :root{ filter: invert(100%)}
@XavierChanth4 жыл бұрын
Last time I checked Edge had better support than firefox, and its based on the same engine as chrome.
@justingolden214 жыл бұрын
Instead of applying it twice, you could just apply it once to all elements EXCEPT the ".invert" class elements, using ":not(.invert)"
@Anton-cv2ti4 жыл бұрын
Nope. You would be reverting the color multiple times for nested elements, making a for a real schwifty color scheme.
@justingolden214 жыл бұрын
@@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.
@ABMedia834 жыл бұрын
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)
@AtheistReligionIsCancer4 жыл бұрын
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
@ABMedia834 жыл бұрын
@@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.
@aravindhhere4 жыл бұрын
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
@dae25304 жыл бұрын
Firefox has default white background in HTML tag. Edge is based on Chrome, so...
@bySterling4 жыл бұрын
Amazing!
@Misfit-nd3zk3 жыл бұрын
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
@TheBash524 жыл бұрын
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👍
@Bradford10404 жыл бұрын
Contact Dropbox support! They could use the help for their Android app lol, Good video BTW, very informative!
@simonwillover41754 жыл бұрын
It doesn't work on text shadows, font color, border colors , or gradients though.
@joepvandijk4 жыл бұрын
Tip: If you create a file called css/main.css it'll create a folder named css with a file called main.css
@kevkong4 жыл бұрын
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
@druiznyc4 жыл бұрын
You could still make this one line if you used the :not() selector. .dark-mode :not(img):not(.inverted){ filter: invert(100%) }
@guilhermeraposo60804 жыл бұрын
Why not .dark-mode:not(img):not(button *)
@CreativeB34ST4 жыл бұрын
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.
@Sakura-ek6vo3 жыл бұрын
Thank you thank you thank you 😭😭😭😭❤️❤️❤️❤️❤️ you saved me ❤️❤️❤️❤️😭😭😭😭🌸🌸🌸
@Xiaoxooooo4 жыл бұрын
Holy mother cow! This is golden! Why is this great master of master teacher still havent got 1M sub?? Come on guys lets reach this great man sub to 69M!
@LuckSeventy4 жыл бұрын
He just found out an article, calm down
@fredrikstrm-larsen78034 жыл бұрын
What if you used brightness(10%) on the last "boxes" or the images where invert() doesn't look good?
@pexeixv4 жыл бұрын
Hey Gary, please make a tutorial in InstaFeed.js or something similar to make an Instagram feed widget on HTML websites. There are tons of videos on how to do it in Wordpress. Please teach me how to do it in HTML.
@aethar55194 жыл бұрын
“It works in edge!” 👀 Edge being built in chromium
@gabrielflorin75053 жыл бұрын
and if i have a background img in the body tag haw can i invert that img to look normaly?
@androiddeveloper32223 жыл бұрын
sir when i open dropdown menu and i used marquee text marquee text shown over dropdown how can i solve it
@billionbd4 жыл бұрын
He even remembered his own code. Seriously.
@ayushmanbt4 жыл бұрын
For the .inverted could not we do .dark .inverted{ .... } Instead of using javascript to apply that
@jodorgu86404 жыл бұрын
Just read an article on CSS Tricks on something similar
@rubikspixel4 жыл бұрын
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 👎🏻
@DesignCourse4 жыл бұрын
Right, like I said in the video, it could be useful for a really simple page, or just prototyping.
@simontrichereau1364 жыл бұрын
Or you can change the color of each element with JS... There's plenty of solutions but one line css is really faster...
@TheTrollzica4 жыл бұрын
You can also use CSS variables and change them with JavaScript See how to do that: stackoverflow.com/questions/41370741/how-do-i-edit-a-css-variable-using-js
@madhavm98703 жыл бұрын
This like the Game-changer video. MY landing page went from OK to Mind-blowing, for me atleast( P.S. I'm an amateur)
@junehanabi17564 жыл бұрын
And there you go, this video reverses years of work in teaching ametures that a dark mode requires careful planning of color palettes and can't be simply inverted. Well, all that work was for nothing. Years of trying to teach people who want a fast and cheap shortcut to dark mode gone, fast and cheap shortcut wins. This isn't how dark mode is made, this is an eight year old who learned ms paint can invert colors to create new colors kind of mistake. When I saw the thumbnail, my first reaction was... He can't meant an invert filter.... No way... That's a super common rookie move and one of the very first lessons you lean in web design because it's one of the very first questions that get asked. My second thought was a new line that somehow tells the browser to apply sensible dark mode defaults, I can totally see that happening... Clicks on video... Sees it's indeed the ridiculously common newbie solution of a simple invert except by an experienced KZbinr and css designer to an audience who are still learning and don't know this is downright terrible and harmful advice... I'm appalled.
@dotsvg84824 жыл бұрын
I honestly can't tell if this is a joke or not
@jokinglimitreached15034 жыл бұрын
@@dotsvg8482 The video is bad - it teaches newbies that a dark theme is simply an invert, which is FALSE, very false. Dark theme colors need to be specifically chosen. The video needed to say multiple times that this is a quick hack, and only to be used for testing.
@dotsvg84824 жыл бұрын
@@jokinglimitreached1503 Yeah, fair enough
@junehanabi17564 жыл бұрын
@@dotsvg8482 it's not a joke, what joking limit reached said