Full Dark Mode with only 1 CSS PROPERTY?!

[@DesignCourse]

Do you dark mode every layout?

[@LabhamJain]

Yeah! I Love Making Themes Muhha!😘😘😘

[@DesignCourse]

@@LabhamJain It really is fun.

[@LabhamJain]

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 💥💥💥💥💥 😂😂😂😂

[@mudrank4184]

No mucg

[@ianthehunter3532]

I make it so it's unique and not too bright

[@Itschotsch]

The property is: .dark-mode { filter: invert(1) hue-rotate(180deg) }

[@АртёмКурилко-н6ч]

Thanks!

[@bayudamar8492]

Thanks, why do I need to watch 12 mins video for 1 line of code.

[@god_gaming178]

Thenks

[@fairytail6152]

Wise choice that i stopped the video then scroll through the comments

[@averageplayer8115]

Thanks

[@DevProTips]

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.

[@berenboden]

Thanks

[@creedolala6918]

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.]

🌟

[@thmsmlr]

1 line of CSS, 12 minute video 🤣

[@greenshaheen6716]

That's why i don't like his channel

[@farhan787]

1 CSS property, not 1 line

[@fauxcallingme9561]

You are el stupido

[@laoblue9302]

@@greenshaheen6716 yeah, fireship's better ;)

[@greenshaheen6716]

@@laoblue9302 yes. Brad traversy too

[@stefanschlipfinger5916]

The new Edge Browser is Chromium based 😅

[@maabed1022]

@Xero Garbage? It's pretty decent to me.

[@maabed1022]

@@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.

[@ukn4]

maabed sj calm down you guys, it’s just a meme

[@maabed1022]

​@Xero lol what gives? How's Google any different?

[@michaelbitzer7295]

@Xero lol why do you even use KZbin if you are concerned about privacy

[@minecrap5256]

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.

[@MrTHEO9911]

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

[@nagyszabolcs9451]

Thank you, just wanted to say the same, he should pin this comment lol

[@Tortuex_]

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-aru]

Neat Solution

[@Tortuex_]

@@z-aru thanks ^^

[@szegedigergely]

"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_]

@@szegedigergely good to know :)

[@iyedbouazdia3594]

@@szegedigergely So like a double no is a yes.

[@edoardoguido1688]

For images, you can also use the :not(img) selector, so that the filter does not apply for every image element!

[@tcroft]

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

[@davidfitcher2953]

0:56 when the bell hits the throat

[@Peter-A]

Edge is chromium based not IE based. Technically it's rebadged google chrome.

[@mxdanger]

Technically Edge is rebadged Chromium, such as Google Chrome is rebadged Chromium.

[@astitva5002]

almost all browsers currently are chromium based, it's just simple and open source enough to just work

[@javiarenas]

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

[@FlySoloG]

Whats your solution

[@FlySoloG]

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 .

[@HostDotPromo]

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.

[@ArtsandGadgetsStuff]

The thing I am waiting for a long time!! Thank you

[@josipmuzic2733]

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 }

[@IAmSamuelCharpentier]

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

Perhaps you might add a "data-revert" (Or something like that) to personalize the degre of invertion for specific elements

[@TheHermitHacker]

I love just how creative people can be. This is great!

[@aspiesoft4144]

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)

[@abdellahmeridja7794]

Edge is based on Chromium which means anything that works on Chrome works on Edge ... Great Video

[@birsingh5388]

10:33 looks like you are watching lots of Ed's videos these days 😂

[@blazi_0]

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 💪

[@Telladriel]

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

[@andresrivasa]

Sin Palabras Grandioso Video, Thanks!

[@RanjanKumar-bu7ws]

The firefox bug can be solved by explicitly adding background-color : white to the root pseudo class

[@sehajpreetsingh4177]

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?

[@maits18]

It works on MS Edge as the base of that browser is Chromium. Just an FYI for those who are asking

[@artaizen1613]

IE : "I'll ruin this trick.... oh also almost every css js anything you throw at me, unless.... I approve of it"

[@julianavar3836]

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.

[@rockers451]

Loved the music towards the end, haha. Great content btw!

[@dominikdorfi]

Actually the Edge Browser is based on Chromium. So showing the working example is a bit redundand.

[@MARIUTSKI13897]

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!

[@AtheistReligionIsCancer]

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

[@ic3xiii]

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.

[@andresfuenzalida869]

I noticed that you can play with the hue-rotate value and it will change a little bit the colors. Nice video!

[@aldifarzum3290]

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_music]

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??

[@otesunki]

I've used this for a long time myself. filter: invert(100%) hue-rotate(180deg)

[@ClashForYou]

Crazy, great video thanks a bunch.

[@LucXX36]

Didn't know about that property. Thanks Badboy

[@siddhantjain2402]

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.

[@R4pepeArts]

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.

[@frankiefab]

Just at the right time. Thanks

[@goldfishbrainjohn2462]

very useful! Thank you

[@williamherring]

Anything can be done with one line of code. It’s just gonna take a lotta side scrolling...

[@juanmolinas]

nice trick Gary, regards from Paraguay..

[@ayushmanbt]

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

[@michalbacinski6700]

I'm asking... Where is the support for IE11? 😂😂 I just kidding. I think is the best of last videos! Thank you Gary!

[@lunarorbit]

Why would you be surprised that it works in Edge? It's basically the same browser as Chrome now.

[@neerajmalhotra8277]

You can also use :not(.inverted) psudo selector to ignore inverted class.

[@alex-suciu]

since you are on windows, you can use windows button and V, when paste. it will enable copy clipboard. 😎

[@TheFlexy95]

The new edge is based on chrome 😅 so it’s using webkit Now. Good vid anyway 👍🏼

[@ownadi]

Chrome doesn’t use webkit

[@TheFlexy95]

@@ownadi You're right, it uses 'blink' now, in the past chrome used Webkit :P

[@outofboundsbro]

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?

[@balus143]

Nice video.. learnt something cool feature.. ✌️

[@frmcf]

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?

[@guypersson]

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.

[@simontrichereau136]

You should not do the js loop to add a new class, you can use the css selector ".dark-mode .inverted {" instead

[@LisekLucek]

I think that it's not working in Firefox because body in it may be actualy transparent instead of white.

[@LisekLucek]

Maybe if you set body background to #fff it will work.

[@yadneshkhode3091]

Awesome dude !!!! keep it up

[@Populartiktox]

that is really cool dude

[@ryanmmbale8993]

Hi I loved the content. But again how do we fix that issue of about fire fox not giving dark background

[@k4m924_]

Катюха - красава 😘

[@kvdhar5041]

Awesome quick demo. Could you share the Bulma video you mentioned at 2:26

[@BlueJDev]

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

[@termidesign]

its perfect, thanks

[@shivammakwan6409]

You are the linode!

[@IAmOxidised7525]

Edge is chrome with windows label, so yes it will work with it

[@dankmemes4068]

you could just invert the black and white, find and replace swap

[@yannisgoogleapps9249]

Isn't the JS and CSS on Chrome the same as on MS Edge? They both are based on Chromium, right?

[@soniablanche5672]

why not select the body with document.body instead of whatever you did

[@PossessWithin]

Here is what you're looking for @3:52 :root{ filter: invert(100%)}

[@XavierChanth]

Last time I checked Edge had better support than firefox, and its based on the same engine as chrome.

[@justingolden21]

Instead of applying it twice, you could just apply it once to all elements EXCEPT the ".invert" class elements, using ":not(.invert)"

[@Anton-cv2ti]

Nope. You would be reverting the color multiple times for nested elements, making a for a real schwifty color scheme.

[@justingolden21]

@@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.

[@ABMedia83]

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)

[@AtheistReligionIsCancer]

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

[@ABMedia83]

@@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.

[@aravindhhere]

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

[@dae2530]

Firefox has default white background in HTML tag. Edge is based on Chrome, so...

[@bySterling]

Amazing!

[@Misfit-nd3zk]

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

[@TheBash52]

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👍

[@Bradford1040]

Contact Dropbox support! They could use the help for their Android app lol, Good video BTW, very informative!

[@simonwillover4175]

It doesn't work on text shadows, font color, border colors , or gradients though.

[@joepvandijk]

Tip: If you create a file called css/main.css it'll create a folder named css with a file called main.css

[@kevkong]

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

[@druiznyc]

You could still make this one line if you used the :not() selector. .dark-mode :not(img):not(.inverted){ filter: invert(100%) }

[@guilhermeraposo6080]

Why not .dark-mode:not(img):not(button *)

[@CreativeB34ST]

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-ek6vo]

Thank you thank you thank you 😭😭😭😭❤️❤️❤️❤️❤️ you saved me ❤️❤️❤️❤️😭😭😭😭🌸🌸🌸

[@Xiaoxooooo]

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!

[@LuckSeventy]

He just found out an article, calm down

[@fredrikstrm-larsen7803]

What if you used brightness(10%) on the last "boxes" or the images where invert() doesn't look good?

[@pexeixv]

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.

[@aethar5519]

“It works in edge!” 👀 Edge being built in chromium

[@gabrielflorin7505]

and if i have a background img in the body tag haw can i invert that img to look normaly?

[@androiddeveloper3222]

sir when i open dropdown menu and i used marquee text marquee text shown over dropdown how can i solve it

[@billionbd]

He even remembered his own code. Seriously.

[@ayushmanbt]

For the .inverted could not we do .dark .inverted{ .... } Instead of using javascript to apply that

[@jodorgu8640]

Just read an article on CSS Tricks on something similar

[@rubikspixel]

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 👎🏻

[@DesignCourse]

Right, like I said in the video, it could be useful for a really simple page, or just prototyping.

[@simontrichereau136]

Or you can change the color of each element with JS... There's plenty of solutions but one line css is really faster...

[@TheTrollzica]

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

[@madhavm9870]

This like the Game-changer video. MY landing page went from OK to Mind-blowing, for me atleast( P.S. I'm an amateur)

[@junehanabi1756]

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.

[@dotsvg8482]

I honestly can't tell if this is a joke or not

[@jokinglimitreached1503]

@@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.

[@dotsvg8482]

@@jokinglimitreached1503 Yeah, fair enough

[@junehanabi1756]

@@dotsvg8482 it's not a joke, what joking limit reached said

[@xenon-x54]

Very useful !!!!!!!!!!!!!