Это видео недоступно.
Сожалеем об этом.
Full Dark Mode with only 1 CSS PROPERTY?!
HTML-код
- Опубликовано: 9 сен 2020
- Visit linode.com/desi... for a $20 credit on your new linode account.
designcourse.com - Learn UI/UX from Scratch with my new service (coming soon)
-- Today, we're going to see if you really can create a dark mode version of your site with only 1 line of css. This video was inspired by Ekaterina Vujasinović, who wrote this article on the subject: dev.to/ekateri... (Give her a follow!).
Let's get started!
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
My site: designcourse.com
My personal FB account: logodesi...
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Coursetro.com.
Come to my discord server or add me on social media and say Hi!
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
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 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.
🌟
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 RUclips 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
0:56 when the bell hits the throat
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.
For images, you can also use the :not(img) selector, so that the filter does not apply for every image element!
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
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 .
The thing I am waiting for a long time!! Thank you
Perhaps you might add a "data-revert" (Or something like that) to personalize the degre of invertion for specific elements
Anything can be done with one line of code. It’s just gonna take a lotta side scrolling...
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.
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
Actually the Edge Browser is based on Chromium. So showing the working example is a bit redundand.
The firefox bug can be solved by explicitly adding background-color : white to the root pseudo class
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
}
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
I love just how creative people can be. This is great!
I noticed that you can play with the hue-rotate value and it will change a little bit the colors. Nice video!
IE : "I'll ruin this trick.... oh also almost every css js anything you throw at me, unless.... I approve of it"
10:33 looks like you are watching lots of Ed's videos these days 😂
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
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?
Edge is based on Chromium which means anything that works on Chrome works on Edge ... Great Video
Loved the music towards the end, haha. Great content btw!
You can also use :not(.inverted) psudo selector to ignore inverted class.
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.
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.
Why would you be surprised that it works in Edge? It's basically the same browser as Chrome now.
Didn't know about that property. Thanks Badboy
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.
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 💪
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.
I've used this for a long time myself.
filter: invert(100%) hue-rotate(180deg)
Sin Palabras
Grandioso Video, Thanks!
since you are on windows, you can use windows button and V, when paste. it will enable copy clipboard. 😎
you could just invert the black and white, find and replace swap
Crazy, great video thanks a bunch.
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)
What if you used brightness(10%) on the last "boxes" or the images where invert() doesn't look good?
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.
Edge is chrome with windows label, so yes it will work with it
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.
Just at the right time. Thanks
why not select the body with document.body instead of whatever you did
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.
Last time I checked Edge had better support than firefox, and its based on the same engine as chrome.
sir when i open dropdown menu and i used marquee text marquee text shown over dropdown how can i solve it
It doesn't work on text shadows, font color, border colors , or gradients though.
Firefox has default white background in HTML tag. Edge is based on Chrome, so...
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 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
that is really cool dude
nice trick Gary, regards from Paraguay..
Nice video.. learnt something cool feature.. ✌️
How about a toggle switch button? Sun and Moon. Where I can find it?
Awesome dude !!!! keep it up
Hi I loved the content. But again how do we fix that issue of about fire fox not giving dark background
You should not do the js loop to add a new class, you can use the css selector ".dark-mode .inverted {" instead
and if i have a background img in the body tag haw can i invert that img to look normaly?
very useful! Thank you
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?
You are the linode!
Great, thank you! Has anyone figured out how to make this work across all browsers please?
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
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??
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
Isn't the JS and CSS on Chrome the same as on MS Edge? They both are based on Chromium, right?
Here is what you're looking for @3:52
:root{ filter: invert(100%)}
Из пальца высосал 12 минут
Пока костыли пишешь для исправления инвертирования, на выходе столько же кода, как при стандартных подходах выйдет
Just read an article on CSS Tricks on something similar
The javascript code doesnt seem to work
For the .inverted could not we do
.dark .inverted{
....
}
Instead of using javascript to apply that
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 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
Why not .dark-mode:not(img):not(button *)
why not use the :not() option in CSS?
Please share, how to make skeleton screen on wordpress 🙏
Awesome quick demo.
Could you share the Bulma video you mentioned at 2:26
Катюха - красава 😘
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.
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
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
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...
You could still make this one line if you used the :not() selector. .dark-mode :not(img):not(.inverted){ filter: invert(100%) }
Amazing!
Tip: If you create a file called css/main.css it'll create a folder named css with a file called main.css
“It works in edge!”
👀 Edge being built in chromium
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?
He even remembered his own code. Seriously.
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👍
its perfect, thanks
body:not(.force-light){
.....
}
How to fix It for Firefox
Edge is running on Chromium Engine so anything work on Google Chrome works on Edge.
Thank you thank you thank you 😭😭😭😭❤️❤️❤️❤️❤️ you saved me ❤️❤️❤️❤️😭😭😭😭🌸🌸🌸