Rise of the Dark Mode
Vložit
- čas přidán 30. 07. 2024
- In this video, we'll talk about colors one more time, but with a focus on dark mode designs.
// ✨ Try your dark mode colors on a real website:
realtimecolors.com
// ✨ Dark mode design inspirations:
www.darkmodedesign.com/
// ✨ Let's connect:
Twitter: / juxtopposed
CodePen: codepen.io/Juxtopposed
Dribbble: dribbble.com/juxtopposed
Github: github.com/juxtopposed
---
Music (support the artist):
pixabay.com/users/pumpupthemi...
---
#darkmode #webdesign #uidesign - Věda a technologie
So what do you think about going dark mode? 🤨 Let me know below!
Well I know that I avoid like the plague any website that forces me to use light mode
The benefits both in the real world and on your eyes make it an obvious choice for UI design!
I use browsers extensions to make everything dark, sometimes some style breaks but is the price for the almighty dark mode.
That could be a great video concept, or in other words, I'm bad at doing it and I would like to learn how to properly do it from you.
@@snovbird there are extensions that do this if you can’t add extensions there’s a flag on most chromium based browsers that will make any site dark mode (some sites might break and yellow and green seem to get changed even when not necessary or desired)
For me any site with a dark mode has it enabled I have a chrome flag that will force rverything else to be dark mode and certain apps if I can customize the ui are either dark mode or darker if I want it (I did this to blender)
Dark mode is fantastic but it's always good to have a light mode for users with astigmatism.
Appreciate you mentioning that! I have astigmatism and you know what really makes me like a website? Being able to read it 🥲 But I know dark mode is important too for people with light sensitivity and migraine.
I have astigmatism and dark mode looks better to me, light mode makes my eyes hurt to the point it gives me headaches.
Having astigmatism and sensitive eyes, I have never picked a light mode over dark when having the option to just go dark. The moment at 2:42 just burned my eyes.
I'd much rather struggle a little with my astigmatism when reading text than burning my eyes out lol
thank you for saying that!!
As a Full time dark mode user i welcome this trend but i think there should be a option for light mode as i feel the frustration when I can't go to dark mode and the light mode users may feel the same
Accessibility goes both ways, really.
Some people may also want to use Light Mode to wake themselves up and not get sleepy. The blue light emitting from the screen helps with that, since it resembles daylight in a way.
While Dark Mode makes your eyes adjust to the darkness much better, which can help your sleep cycle, especially with a blue light filter enabled.
I'm a lifelong dark mode user that steadily has to move towards light mode because dark mode is increasingly straining my eyes. In the evening it's still fine, but during the day, I pretty much have to use light mode now or else I won't be able to read anything. It sucks. I'm glad many applications and websites can use the current system color nowadays, and system color can switch depending on time of day.
I love dark mode when I'm in actually dark environment. It makes things easier to read for a long time.
But when I'm outside or working on my laptop on a sunny day on my balcony, I would really appreciate a light mode option.
Instead of trying to find a right angle, shadow or going inside, I just switch to light mode and I'm able to read things with zero problems.
Please, don't bash on option B, just because you personally like the option A.
I personally use dark mode but having a light mode option is also good in some situations. And dark in night and light in day also works.
Agree. I think light mode is more visible under direct sunlight as well.
Why does this have no read more option is that just me
There are snatchers anywhere, don't use any device while you're outside
I also switch between the two throughout the day. It feels right.
I refuse to make my websites have a light mode. Instead, I make a less dark version.
That was a good one lol
I literally did this with my portfolio
@@sharonye8297 lmao same. I don't even have at toggle for dark/less dark/light. its dark, take it or leave it, I don't care, the dark is better anways
I now use light mode and adjust my monitor brightness accordingly.
Crazy
It is really often overlooked that light mode is also an accessibility feature. Some people have eye impairments which makes it hard for them to read white text on dark backgrounds
You need no advice from me, but this is a sick niche you're filling in and your channel is obviously growing crazy rapidly. Design-centric advice for developers - that is good, current, thoughtful, and not focused on selling Framer, SS, Wix, etc. - is probably the least saturated of the tech/design tutorial area on YT. So thank you!!!! And keep it up :)
You and your gradient ass
Honestly... I kinda prefer light mode a lot of the time. Sure, dark mode looks all cool and stuff, but black on white is just way easier to read than white on black. I spend my working days staring at my IDE and my medication can sometimes dry my eyes and make light text on a dark background look really blurry and hard to read. You know what always helps a lot? Switching to a light theme!
Similarly, I switched a lot of websites and apps from dark back to light mode because idk, it just looks... slicker. Sharper. Better. Don't get me wrong, a well-done dark mode can look amazing, but it often feels like most websites do it badly, and making light mode look good is like 10x easier.
They did say though that just having white on black is kinda a bad approach to dark mode specifically for that reason. Personally, I made my own dark theme for my terminals that also relies on having less pure primaries/grays in addition to less starkly black and white to really kinda help take the edge off.
you captured everything I was thinking in your comment!
My IDE theme is literally a darker version of a white background, not completely white but not dark mode either. On discord I still use a dark sidebar + light text area for reading.
Yes Ella
Have you tried gruvbox?
Very important to tell people that the humanly visible difference in lightness is based on fractions not absolute values. So the difference between 5% and 15% lightness is a lot stronger than the difference between 70% and 85%. That's important if you're used to "dark color = light base color - 15% lightness" and now try "light color = dark base color + 15% lightness". It's probably more like +3-7% lightness, depending on how dark your "dark base color" is.
Also, the reason why there are gaussian blurs in dark mode is to prevent color banding on gradients which appear much easier on dark modes (everybody watching an almost-black scene in a CZcams video will have noticed that effect; there it is also caused by compression, but the effect is pretty much the same for gradients).
Additionally, it's important to mention that computer RGB colour codes are exponential and not linear in scale.
I don't know the exact ratio, but this would make 20% lightness look double as bright as 10%, while being more in actuality.
I'm all for dark mode; but light mode is important for certain e-ink displays, and I'm sure there are some other niche uses for light mode, too. It's best to support both if you can; but it's quite a bit of work to do so: when you want more than one theme, you have to build a theming engine; you can't just hard-code everything.
Dark mode works just as fine with E-ink. In fact kindle comes with dark mode.
@@sailor5853 Oh nice! The newest e-ink screens must have fixed this, then.
dark mode is amazing for e ink wtf are u on ab
@@CallyWasHereOfficial On some older e-ink devices, dark mode basically meant full refreshes every time something changed.
Apparently that's since been fixed.
semicolons are SITUATIONAL PUNCTUATION!! you overuse them!! please cut down your semicolon usage it hurts to read
Actually, it doesn't save energy if you have some sort of display that uses a backlight, because that's gonna "burn" the most energy. I'd have to turn it up so much higher when I'm outside using dark mode, so I just use light mode.
this; lcd uses the same amount of energy at 100% brightness in dark theme as it does in light theme. the "it saves battery" claim is so stupid when you consider that this only applies to the people whos display is actually able to turn off individual pixels and pretty much only when the background is #000000. i dont know why this claim got so much attention when in reality is super specific because youre just not supposed to use #000000 as the background anyway
@@lootriamost phones use OLED
Correct, but more and more phones now are switching to OLED panels so it does hold true.
@@FAB1150Not only that, but modern TVs and monitors also use various local dimming effects. If the darker sections of the area are dark enough (with little to no light parts), the display can dim or fully turn off the LEDs that aren’t needed.
@lootria most screens are OLED I dont even own LCD anymore even mY tv is OLED
Purple in dark mode is like sugar in coffee
if you don't add atleast a little bit it will be intolerable
I have astigmatism but I always prefer true black background. It's just the best.
I've just started programming my own website. And I'm just realising how helpful this channel is going to be every step of the way! Thank you
Every other landing page is a dark theme website with purple primary colour
Short, to the point and amazing editing. You've easily become one of my favorite design centric channels, keep it up!
Dark mode has no power saving benefits when used with and LCD/IPS displays, as the backlight is always on.
Some people even claim dark mode may use a bit more power on those display types as people tend to turn the brightness up so as to be more readable.
There's even evidence to suggest having a current run through the the LCD crystals to turn it "black/blocked" consumes more power, as opposed to the "white/transpaprent" state which simply turns the current off.
The only power saving benefits are on OLED type displays where each pixel is its own ligth source and even that's minimal.
A lot of LCD displays, be it computer monitors, TVs, or laptop screens, actually reduce the backlight automatically on darker scenes in order to give you better blacks so your assumption here is wrong. Yes, OLED and other LED technologies get significantly larger power savings on darker content, but they don't get the exclusivity.
And especially for OLED screens, it's not minimal. If we are talking about power savings for environmental reasons, sure that isn't saving the planet, it's unimportant compared to our collective energy consumption. But a lot of these devices are portable and battery powered and as far as battery life goes, dark themes do have a significant impact.
@@IrisNebula7023 Sorry but you're wrong.
Devices do not lower the screen brightness automatically on LCDs for dark mode as that'd make reading anything even more challenging.
You're confusing this with the following:
1) Power saving mode, typically on smartphones and laptops/tablets, when battery percentage drops below a certain threshold does lower the backlight. Dark mode or not.
2) Automatic light sensorts, be that on smartphones or large displays. Whether it's in dark mode or not.
Lowering the backlight when exclusively in dark mode makes no sense as it'd just make things more difficult to read.
@@ondrejsedlak4935 I am not wrong, I don't post walls of information when I don't know what I'm talking about. I am not confusing it with any other mode either, I know all of what you are referring too, those are different features.
For example, all Intel laptops do this by also changing the colors to be brighter while they darken the blacklight, making text appear to be the about same brightness. Yes really, it does slightly destroy color accuracy (and in some cases not so slightly), but you usually don't perceive this. You can find this in the Graphics configuration utility if it's properly installed, adjust the strength or disable it.
Also for example, TVs can even do this locally as their blacklight is often split in zones (more expensive = more zones), trying to only do this in dark areas of the image, but often actually do make everything darker. Subtitles can get darker or brighter depending on the rest of the scene and they even get decolorised every so often (in my case I use yellowish subs). Look up "local dimming" although it's not the only feature in play here, they do change the blacklight as a whole too, depending on scene. It's why you sometimes see 2 contrast ratios in specs, it's the actual panel contrast vs achievable with blacklight adjustments.
Phones don't typically do this because they want to prioritise color accuracy and readability, but then again, lots of those are actually OLED to begin with.
@@ondrejsedlak4935 Also look for other root comments saying what you did and look at their answers, you'll find lots of other people trying to explain what I'm saying as I noticed after I replied.
Dark mode doesn’t use more power than light mode because the pixels aren’t in use, most people do not turn up their brightness when using dark mode
Light mode is necessary for accessibility, btw. There are people who literally can't make out white text on a dark background. That's why disabled users got so angry at Discord removing light mode for April Fool's Day as a "joke."
Also the energy savings only apply to OLED and CRT (if anyone's still using one). LCD screens use *more* energy displaying black and the least energy displaying white.
this channel helps me make the most insufferable sites imagine.
bright pink on pure black with a gradient to cyan is what I need in my life
can we just take a moment to appreciate how cool the animations and editing are in this video?
Amazing work!
There's not a lot of cats, but I'll take it.
I have seen myself move towards more dark themed + "glassmorphic" designs over the past months and I do agree with you, there's a lot more that can be done with "dark mode" than "light mode". Something I noticed while working with dark mode is that you don't necessarily have to ever use shadows like we do on light mode for depth (and I think you touched on this in your video), when you have a dark background as a parent, all you need to do to have the child show elevation is to reduce the lightness and there's a point on that scale that you'd get to where the depth effect would naturally just show.
Really great video and like last time, I demand (just joking) more cats. 🐱
Cheers.
THANK you! I'm happy you liked the video :)
I also love dark glassmorphic designs, with just a few gradient colors as accents. I'm also a fan of Android's Material You, it looked goofy at first, but now I'm addicted to it. These 2 combined would be the ultimate UI I guess.
thats like $2 lol
@@pythonifalt That's more than you have given, so what's your point?
Damn. $1,000?
Amazing content and editing as always, love your videos. I have no doubt your channel will grow immensely.
I found this channel yesterday, my excitement when I first watched about Realtime Colors. Thank you for all your doing.
These videos are so good. As a non designer the tips all feel actionable
The quality of this video is excellent and very well designed! I imagine it must have taken a long time, it is so pleasant to watch even not being such a graphics tech or software designer. I appreciate the design engineering to make things better for everyone so thanks for this inspirational video! Hope this helps developers out there with their designs :)
I personally much prefer light mode, I don't have astigmatism, but in terms of reading comfort it is just much better for me. Yes, in dimly lit rooms it can form a wall of light, however the solution is quite simple, just use at least a night light. That being said I recognize for some people there is a strong desire for dark mode, I just don't think it should ever be the default, unless you are following the system theme.
Agreed! Hopefully the dark mode - fad will soon be over, and relegated to the gaming PCs of people that were in their late teens in 2010. Back where it came from;-)
I love how good are the animations while explaining, it's so entertaining!!
The whole point of dark mode for me is not destroying my eyes.
I like both themes and like switching between them
I just wish websites were give you the option to do so and not have one. And not have one on dark mode only, since I tend to have troubles reading white text on black background (which I just learnt is called halation!)
Maybe that's why I am more of a light mode user 🤔
Damn, this video is perfect. I'm a lead UI/UX Designer at my company and I'm gonna share this video with the other designers and devs. I'm terrible at explaining stuff and you explained all the things I've learned over the years in such a simple way! Thanks for it!
You know, you really make designing so much more intriguing than what I thought it was.Thank you
Thanks for such a clear example of how to combat astigmatism with contrast!
I have really bad astigmatism but light mode anything gives me really bad eye strain and sometimes migraines so I force darkmode anywhere I can (including my own work).
As a Developer I spend more than 8+ hours a day looking at a screen and websites etc. The halation effect gets worse the longer I spend looking at my monitors.
The first thing that can help reduce it is not having true black & white background/text which you already mentioned. The second thing that can improve it is font, line-height and letter-spacing.
Usually for websites with thin font or annoying colors I just bump up the font-size quite a bit just so that it doesn't strain my eyes too much.
It's scientifically proven that black text on white background is easier to read and have more contrast. Dark mode feels easier on the eyes, but it's actually much worse for your eye health
Yes!! Exactly. Why are poeple still spreading this desease of a UI trend?!
For me, dark mode is absolutely essential to being able to use a device. And some of the current fashions (including a couple of points in this video) are unhelpful. Still I'm grateful that it's becoming more common, and more talked about. Yet I think it's really important that light mode is achievable or those who need it. While I need dark mode with some specific characteristics; I've talked to people who have the same level of need for light mode. At the end of the day; users who have a real need for one of these, know what they need. We should be enabling them to make that decision for themselves rather than ramming our own preferences down their throats.
I finally feel noticed here. I can barely use light on dark, and without my glasses, oncoming car headlights are these big balls of light that make it almost impossible to see.
This is actually a very lovely video, I've loved every moment of it. Great freaking job 😂 😂
You’re videos are amazing. You really should have so many more subs
Please if you are a developer, and you make a dark mode: Add some color!
Love your videos! Glad I found your channel!
I actually learned web programming and web design few years ago, because my favourite infosec news sites switched to forced dark mode with waaay too dark background and I was getting helluva side effects like halation or some kind of "afterimage" (seeing blurred-text-like lines on walls for a good few seconds) and it drove me crazy even though I don't have any visual condidions execpt of myopia (like 30% of population rn, in our communities more like 80% lmao).
So yeah, using badly designes dark mode can lead to decrease of visitors or increase in number of web programmers. One of them is bad for your ad revenue, another one is good for economy I guess...
its very important to well design dark mode. Its not just about switching all to black. It can be totally different experience. Thank you for more focusing on it 😊 u are great! Love this video. ✌
As a person with astigmatism, i actually use a "automatic" light-dark mode. Light during the day, dark at night.
Pretty useful and informative video !
amazing work , keep it up
Love you sister, awesome Platinum A+ video :D. Thank you for the all info!
Amazing video! This was so helpful ❤
This video was really cool! Learned a lot of things
I need to look into how to make those "little border effects" at some point. Might be something to use when I make my portfolio more than just a simple white-on-grey MVP
Yes! Light being default was really hurting my eyes for years. The most abhorrent practice of all was, of course, "blinding white background" not only being the default, but being THE ONLY mode. I hate all these apps, MS Office included, and won't touch them with a 2-meter long pole
MS Office has Dark Mode
I love dark mode. As a writer who has to stay up late nights writing on computer screens, I hate so much that a lot of google sites don’t have it, why doesn’t google docs have it yet? It’s gotten to a point where if a website doesn’t have dark mode, and it’s late at night, I like to put my computer on inverted colors through the magnifier tool and then full screen lol
I used youtube in light mode for first 2 years and then i just checked dark mode for fun. Now i can't live without it. Yes, i'm a dark mode addict.
I hated it when you showed halation, I thought my eyes were actually acting up for a second there and tried to correct it. Absolutely spot on lmao
I do not have any medical condition, but I usually use my computer in a well lit environment with light entering from everywhere. With dark mode i have to boost the brightness to max to be able to see anything, and it starts stinging my eyes. And at that moment it does not really help with emissions or power usage because if anything it will consume more power because backlight is set to max.
Thank you for the amazing content! 🙏
Light mode is better for your eyes and better for reading (see: books), the problem is people seem to love using their phones and computers in dark rooms or at extremely high brightness, which is terrible for their eyes. The brightness of a display should be in line with the ambient lighting of the room you're in, that's why phones have auto-adjusting brightness levels (which people lock at max).
It's pretty sad regular PC screens almost never have auto brightness options
@@TRRDroid Not a general fan of auto brightness but what I dislike most is that there is a protocol called DDC to control the brightness of monitors among other settings in software but it's both implemented inconsistently and is not exposed at all. there are tools to use it however.
i dont even design i just love how you explain things. my mere curiousity is satisfied.
''You were the chosen one!''
- Light Mode
2:31 i just thought there was blooming from my screen but it was from the video
What a amazing video! Congrats!!!!
why did i not find your channel earlier.. anyways now i am here until i binge watch all of your videos
i learned more in this video than my whole software developer career about designs.
I'm trying to improve myself in UI/UX and this video helped me. Thank you madam
Great video, great channel, keep it up!
Great tips! Very helpful video.
If it's bright around you, use bright mode. If it's dark, use dark mode. That's it.
Exactly. I'm surprised by the small amount of people actually using this feature for this exact purpose.
There's daylight outside? Light Mode. It's getting dark/I want to sleep? Dark Mode (+Night Shift color filter).
I don't use it like that i stick with one side all the time
@@Celphirio dark mode + reading mode (removes blue light)
Is the goat
Honestly iam starting to think that no phone mode is the best
Yeah but most of us are too lazy to go to settings every time we're in a different environment
@@lovrito2008 almost every app has an automatic dark mode option
I noticed a while ago, that even though dark mode looks cooler, light mode gives a better and longer satsifying experience. I switched everything to light mode and I'm not going back!
The amount of flashbangs in this video when watching it at 1am is crazy dude
Love as always!
light mode is just generally better looking and more colorful and doesn't make me want to fall asleep in my chair
i may be biased as someone with astigmatism though
Exactly
The "Stop. Using. Purple." Called me out
dark mode on documents are awful i just can't read them
Beautifully done!
That's why the best solution is to design a website with a dark mode theme, but not entirely dark. Finding a middle ground makes it ideal, preventing eye strain while also considering people with astigmatism.
I use light mode everywhere I can. Change my mind.
CZcams algorithm done good this time, what a good video.. new sub here!
Great work on/in the video! How long did it take you to create whole video?
video filled with flashbangs. Ideal for night youtube lurking.
New comer and i Love the video ❤
Despise the light grey instead of black behind text, but now I know why. OLED dark mode is the next best thing
I started looking for the dark mode option on apps years ago, before it was "cool", so now, when I switched back to using mainly light mode on my phone (still dark mode on my PC tho), while seeing everyone around me slowly switch to dark mode, including some of the least tech savvy people I know, I get a feeling that's kinda hard to explain, something like "I swim against the current", or "I trod these paths before everyone else", and, of course, "I'm better than you" 🤪. Anyway, jokes aside, fascinating video.
Holy shit I finally know why staring at white text on a black background makes it so hard for me to read the text... i have astigmatism.
Very good points and animation
If you use a command prompt for anything, you're almost certainly going to end up in dark mode. MS-DOS defaults to light grey on black when you boot the computer (on colour displays, and 2/3 intensity on monochrome ones), and Windows inherits this when you open the command prompt. Most terminal programs on UNIX-likes also default to light text of some colour on a black background. I set mine to orange on black.
I love ur videos !!
The way one of the most common screen technology's LCD's work is by blocking the light the back light makes selectively. As a result, having dark mode on does not actually save any power as the screen is still making the same amount of light, the only difference is you are blocking more of it. This is not true with all displays but it is with most of them.
Pro tip: Dark mode is actually bad for your eyes. Your eyes have a much harder time focusing on light text on a dark background.
Not just that. The background lighting is also very important and usually is missing in "dark scenarios". Positively biased UI is basically what the world around us is like and that's what human eyes are optimized for.
Cool stuff you are making 👍 Very nice 💥
Alternative title: Rise of anti flashbangs every time you open youtube at 3AM
Incredible video! can you tell me where you edit it? I wanted to ask after the moment when 3 layers were transformed into 3d).
I have astigmatism. Although dark mode does look better, it is hard for me to read white text on a black background for extended periods of time. It strains my eyes and I'll see black dots for hours afterwards.
Dark mode does not help with reading. It's harder for us to see contrast with white on black than black on white, but all the other reasons stands true!
Thanks for the awesome video explaining how some of this works, I didn't realize the nuance in dark mode.
The only thing I notice in dark mode that is inferior to light mode is bold text. It doesn't pop as much as it does in light mode. Any ideas on how to make bold text pop more on dark mode?
Awesome video 🖤. How about a video on mesh gradients?
This video is a masterpiece 😍
Well made video again. Thanks.
the house icon on black is a little bit darker, you almost got me but figma color picker's got my back lol
What if you want to optimize your website/app for OLED displays with a option to enable it? Does the accessibility requirement for the contrast change since the blacks are entirely black?
"Stop using purple" felt like a personal attack lol
As a visually impaired person with photophobia, nystagmus, myopia, achromatopsia and an astigmatism, Dark Mode has been an absolute life-saver for me.
Photo what ?
@@last.journeya few seconds on the internet tells me that it's not actually a phobia, but is a sensitivity to bright light
you're afraid of lights?
@@windowsxsevenOh yes. I am in fact a vampire, and the mere mention of light has me trembling in fear…
@@abra_escapedCorrect!
Recommended contrast values for dark mode should be different. Or the formula itself.
I feel like the current formula was made with only light mode in mind.
Spotting a dark point on a white background is not the same as spotting a bright point on a black background!
This was briefly noted as "don't use a pure black background under text". But what to do with OLED themes? Or with graphics that can still burn into your retinas.
There should be an upper bound for the contrast, that gets lower with the background going darker.
So many times this is done wrong and made a bad rep to dark mode ...
Although I generally prefer dark mode, light mode does have its uses and I hate it when there is no light mode. For example, there is an entertainment lighting control software called Eos (think stage lighting) and it usually runs on lighting desks in venues and theatres, but you can also install it on a PC to use it as an offline editor or a control software. I have pre-programmed on a train before and it was a pain. There was light unavoidably hitting the display and even when turning the brightness all the way up, it was super difficult. Dark mode is the only one that makes sense when it's on a light board in a dark theatre, but when it's on a pc in an office or really anywhere, it's awful sometimes.
I have astigmatism, but i always switch to dark mode whenever possible, because I can no longer stand light mode. It's gotten to a point where I sometimes just don't use a website at all if it can't be switched to dark mode and there are alternatives.