Light & Dark mode WITHOUT CSS!
Vložit
- čas přidán 30. 07. 2024
- The color-scheme property is a super useful property. It allows us to switch the UI elements, like form controls, scrollbars, and all that to light or dark modes, but it also has a meta tag that we can use as well, allowing us to create light and dark modes without even writing any CSS!
🔗 Links
✅ Polypane: a.paddle.com/v2/click/39438/1... (this is an affiliate link, so if you do purchase, it would also help support my channel)
✅ A really in-depth article that helped me put this video together: web.dev/color-scheme/
⌚ Timestamps
00:00 - Introduction
00:59 - The problem with the prefers-color-scheme media query
02:38 - Setting a default color-scheme
04:15 - light and dark modes with color-scheme
05:05 - Using color-scheme with prefers-color-scheme
06:22 - the color-scheme meta tag
07:33 - Setting color-scheme on individual elements
09:55 - differences between browsers
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my CZcams channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
I really hope this encourages people to include BOTH light and dark modes. It doesn't have to be perfect, but as someone who has astigmatism and finds light-text-on-dark-background to be extremely blurry (just because of how my eyes work), I get so upset when I see the trend of websites being *exclusively* dark mode, as if people are too lazy to even try to implement both. When I create my own sites, I always try to include both. Just because I personally won't use dark mode, doesn't mean others won't appreciate it, and it goes both ways, for everyone. I really really hope some people will learn from this and see how easy it is and utilize it. I really feel like every site should have at least a somewhat usable light AND dark mode option, and any tools to move society toward that point are really important.
Hello Cupcakes.. you seem like a great self learner... may i ask you some question about your preference in learning.
A: A sophisticated text with deep exposure for a subject.
B: A beautifullly designed web with moderate exposure for a subject.
C: A simple and understandable words with low exposure for a subject.
D: A project based learning with no exposure on a subject..
I hope this reach you well.I am gathering data on your answers. Thankyou for your time and have a great day!!😁
I always end up almost feeling bad about becoming lecturey on this sometimes, but it really is so important, and it leaves me feeling so helpless and angry seeing more and more software/websites go dark theme only making them useless for me, even with *massive* companies like spotify, alphabet, and adobe (in my case it is not astigmatism but it is a migraine trigger and also does not play well with my persistent migraine auras). Please anyone reading this make an effort to implement/convince your team to implement both themes in any projects you are part of, stop allowing it to be cool to hate on light theme, and make sure people know it is an accessibility issue. The contacts I have from the valley area very much have told me they have an impression that "light mode bad" is a non-insignificant factor in certain companies in the area not bothering with themes.
It is of course worth noting that similarly, light theme only can also be accessibility issue, especially for photosensitive migraine. It really is imperative to have both.
You are the reason I took the scrimba course after seeing your crash course by accident. I'm in module 6 now.. Advanced Js. You helped me understand CSS so much better. collapsing margins, flexbox, order, border-image, linear gradient, background- blend-mode and so on.. Thank you so much. 🙏
So glad that you're enjoying the course!
Can you share the course link?
@@KevinPowell it's an awesome course that I gladly recommend to anyone willing to tread the path. I'm quite good with logic so Js isn't too tough for me yet but CSS was such a problem before. I still make mistakes but now because of your lectures, I have a better understanding and can quickly and efficiently find the bug and fix it. You transformed CSS for me.
Hello desmond.. you seem like a great self learner... may i ask you some question about your preference in learning.
A: A sophisticated text with deep exposure for a subject.
B: A beautifullly designed web with moderate exposure for a subject.
C: A simple and understandable words with low exposure for a subject.
D: A project based learning with no exposure on a subject..
I hope this reach you well.I am gathering data on your answers. Thankyou for your time and have a great day!!😁
@@bebretter9027 This seems more like photography 😅. I prefer deep learning at any time, so I will go with A.
Your tutorials are simply awesome - great explanation - great structure and always something that makes my jaw drop. Thanks again, Kevin- and go on with this fantastic work!
Oh my gosh! you could use the variable stuff from last vid, have a scheme toggle and a preferred color scheme meta tag, and still keep both the css clean and the site responsive!!
Thankss
Hello jayson.. you seem like a hardworking person and a lifelong learner.. may i ask you some question about your preference in learning.
A: A sophisticated text with deep exposure for a subject.
B: A beautifullly designed web with moderate exposure for a subject.
C: A simple and understandable words with low exposure for a subject.
D: A project based learning with no exposure on a subject..
I hope this reach you well.I am gathering data on your answers. Thankyou for your time and have a great day!!😁
I love this. I don't touch the user stylesheet for the most part on my personal sites, very accessible and they look great in my opinion.
Thanks Kevin, dark mode would be my next concern of my designs.
Another amazing video from Kevin Power! :P Thanks a lot!
This looks like fun to play with. Thanks for the tip!
Hello FFA.. you seem like a great self learner😊... may i ask you some question about your preference in learning.
A: A sophisticated text with deep exposure for a subject.
B: A beautifullly designed web with moderate exposure for a subject.
C: A simple and understandable words with low exposure for a subject.
D: A project based learning with no exposure on a subject..
I hope this reach you well.I am gathering data on your answers. Thankyou for your time and have a great day!!😁
Awesome tutorial! I did think it was going to school us on how to build a visitor switcher toggle mode ha
Brilliant! Thanks for posting!
thanks man this is really helpful 🌚
Awesome! Thank you 🙏
Great video on the topic but I still prefer implementing themes(and accent colours) with JS and CSS. It's a lot more work to implement but worth it if you want super granular control.
great man ! I hate css and you really help me to get things done !
Hello dani how are you. you seem like a great self taught learner and hardworking person ... may i ask you some question about your preference in learning.
A: A sophisticated text with deep exposure for a subject.
B: A beautifullly designed web with moderate exposure for a subject.
C: A simple and understandable words with low exposure for a subject.
D: A project based learning with no exposure on a subject..
I hope this reach you well.I am gathering data on your answers. Thankyou for your time and have a great day!!😁
This is exactly what I wanted
Awesome !!!!🔥🔥
Thanks for sharing 🙏
He is so good.
How can someone be this good?
Amazing, thanks
Colour me intrigued!
A print CSS video from you would be super great!
thankyou, Kevin 👍👍
Ok Kevin, nice video here, and it has peaked my interests, but I have so many questions! You can't forget about us; the noobs, so while you might not want to go into detail, maybe have a playlist to refer to in order to get us up to speed? Possibly in the details, and refer to it, you jumped straight in and fast.
Now I do have visual studio code, loaded it up, but first, what are you editing? I see first tab is index.css. second tab is style.css
This is for chrome right? I already use darkreader but there are issues, especially with googledocs so if this is a way to take control of my browser, I would love to get into this! I had asked the other day if there was a way to get rid of the tabs section or at least make them a lot smaller. Also hoping to be able to edit sizes of things like the youtube searchbar.
Looking forward to learning more, thanks so much!
Thanks for what you teach. I only know basic HTML, self taught from Webtv signatures in history past. I use a testbed for my coding. A completely different visual from yours, LOL. I can change my page and text and link color in the body tag. If I want to change text size, color, or style, I'll do that with a font tag. I have colorful tables and nested tables and even colorful Fieldset and Label tags that I'm learning to use.
Most of what you show and do, and the tool you use is somewhat over my head, but I learn a little to have a better understanding of CSS. I use to use Xspeed and Yspeed in my body tag to have a scrolling background, but that is no more. I'd like to do that in a simple HTML way, but I think CSS would be the way to do it so my text fish can once again swim across my seamless scrolling background images that I made. And maybe have the snow fall in the story I wrote. I'm old and crippled and will never be a web designer, but what you teach helps me get more familiar with CSS and maybe one day I'll understand the setting up using the "{" or "}" or ";" and when and where to put them. I need a CSS tutorial for dummy's, written slow so I can keep up, LOL
Maybe one day I will even get to see my audioscopes and their wiggly colorful lines dance to music again, I can dream.
Hello corey.. you seem like a great self taught learner, a smart, and a hardworking person.. may i ask you some question about your preference in learning.
A: A sophisticated text with deep exposure for a subject.
B: A beautifullly designed web with moderate exposure for a subject.
C: A simple and understandable words with low exposure for a subject.
D: A project based learning with no exposure on a subject..
I hope this reach you well.I am gathering data on your answers. Thankyou for your time and have a great day!!😁
@@bebretter9027 Smart, LOL, dumb as a box of rocks in many areas. The answer is C. Thanks.
I've often found the K.I.S.S method is best for me. Sometimes we forget that we might know something that is easy for us to understand and see, but in other subjects we miss the obvious. I miss a lot, LOL, that's a part of learning. With HTML I had to look at it a few times and write it out, and I'm bad at dropping a letter in my spelling. Thankfully I mostly CCP codes to prevent that. A couple of months ago a chrome upgrade wiped out the use of my testbeds and they would destroy any page I tried to edit. I'm just now getting back to being able to some simple pages of recipes. My eyes were damaged by a pain medicine in the Army, so reading is a problem. Making pages that I can read them is good exercise for me instead of doing a "CMD +" to get a distorted page. So Keep It Simple for Stupid me is best, LOL
And who ever screwed up PDF files at chrome, I hope they get kicked by a horse, catch lice, crabs, fleas, rats, etc. If something works, leave it alone. Same goes for the autocorrect and autodelete in these text fields.
Hi Kevin! I like your all videos! They are really useful! My question will be about font-family not related with this tutorial! I have a font-family called Vivaldi / I'm using for h2 / and after published everything is fine on laptop but on mobile the font-family is set back to "default"? font-family !
I'm using VS2022 and asp net core mvc! Could you tell me how I can fix it ? Many thanks
Awesome!
Finally dark mode users won't be blinded by FOUC
Oh, good point, I didn't even think of that!
FOUC?
@@ajfalo-fi3721 FOUC stands for Flash of Unstyled Content. This situation occurs whenever a Web browser ends up showing your Web page's content without having any style information yet.
@@ajfalo-fi3721 Flash Of Unstyled Content, eg. light (white) then dark (black) a few millisec later.
Web sites often enable or load the dark mode CSS asynchronously, so the browser renders the page with default (light) style initially.
`color-scheme` can be used to make the default style dark, so there is no white flash, just black -> custom dark. It does not eliminate the FOUC though, just makes it bearable.
To eliminate the FOUC a website has to use blocking JS to set the darkmode class or use `@media (prefers-color-scheme: dark)`. That was already possible, but very few sites do it properly and `color-scheme` won't help with that.
Thank you so much for this!
Would targeting root with a dark background-color get rid of the annoying flash of white when page loads/refreshes?
Thanks again.
Yeah, having it on the meta tag should do just that!
@@KevinPowell Perfect.
Kevin, thanks for this awesome video.
I'm not sure switching to Dark Mode according to user preferences is always the best idea, though. What if you have a portfolio site and most of it is white (meaning mockup images)? It'll be a pain to look at a dark background and then immediately switch to white. The eyestrain might definitely piss people off.
Thoughts?
definitely something to consider, kind of a case-by-case deal we'd imagine
imo dark theme in your case should be greyish or dark purle-ish or maybe dark blue-ish so that visitors can vibe with it
thank you for that
Amazing content, can we handle the ico files similarly as well which are used for website icons, visible in the tabs?
I thought it was no JavaScript but it was NO CSS
That smirk 😏
thanks for this helpful video Kevin,
Is it a good practice to save the colors in localstorage and manipulate them using a toggle button to switch between my preferred light and dark colors? am setting up my colors as css variables and save them in local storage depending on what the user prefer.
For a robust and global setup I found czcams.com/video/kZiS1QStIWc/video.html by Google Chrome Devs pretty useful. The actual JS stuff starts at around 20min, although the whole video is watch-worthy :)
On a site note: Google's channel in itself is, like Kevin's Channel, a gold-mine!
That's what I do! The nice thing with this is it can prevent that flash of the other theme before the JS kicks in :)
Hello Mahmoud. you seem like a great learner, hardworking ,and a very active person in what you are doing👍.. may i ask you some question about your preference in learning.
A: A sophisticated text with deep exposure for a subject.
B: A beautifullly designed web with moderate exposure for a subject.
C: A simple and understandable words with low exposure for a subject.
D: A project based learning with no exposure on a subject..
I hope this reach you well.I am gathering data on your answers. Thankyou for your time and have a great day!!😁
Best teacher
thank you
Is there a way to use system theme as default and let user choose from dark, light or system just in case when my system is dark but I want a light website?
firefox probably depends on your theme, as I have no purple dark but pure dark gray.
...amazing
Firefox probably depends on your theme, as I have no purple dark but pure dark gray.
Interesting new feature
This doesn't change anything to my site and I have dark mode on Windows?
Can you tell us something about the new version of CSS, whether it will actually be released or fake information
There will probably never be a "CSS 4". It's been broken up into modules, so each one advances on it's own now, so we're just always getting new stuff. For example, color is working on Level 5, while grid is working on level 2.
How do you switch between the light mode and dark mode using JS? Like having a button that toggles the meta tag? is that even possible?
I looked at using JS for it awhile back. Little different, but you could use this together with the meta tag - czcams.com/video/wodWDIdV9BY/video.html
Responsively App - free open source alternative of Polypane 😉
When `color-scheme` was standardized I hoped it would change the value of `@media (prefers-color-scheme: ...)`. I was soooo disappointed. There's still no solution for defining a no-js darkmode with `@media (prefers-color-scheme: dark) {...}` and a toggleable dark mode with JS and `.dark {...}` without duplicating the color palette in the CSS. 😔
That would be pretty cool, for sure
If you push the light mode and dark mode to their own files and have your main file read variables from them then just have js toggle the link tag to switch the src attribute.
@@BlackAsLight448 you still need js
I think you can do a toggle button for light/dark mode without js, but you will need to define a secondary color palette (preferred with custom css variables). You can use input:checked + your-main-container {
--foreground-color: ...;
--background-color: ...;
...
}
The tricky part is designing the toggle button/checkbox to look like others since is not inside your-main-container. But with a custom label there is a way, I think.
@@Victor_Marius I know that what I said still needs JavaScript. My point was that instead of recreating your dark mode in JavaScript for a toggle, you can just update the value on a link tag to point to another sheet.
Please ! make a video on Javascript animation vs css animation.
Please which book do you read 🙏
OH WOW
I think I learn all my new CSS from here now. I particulary leverage on the hard work already completed by @Kelvin. He is basically my super-human framework
It's probably pretty common but my googlefoo is failing me but is there a link to the index.html you are using?
In the video description. The second link will take you to a web.dev page, and almost at the bottom is a link to a demo page with a large range of elements.
You can "view source" in your browser and pull sample HTML from there to populate an index page to play with.
@@MrMairu555 Thanks, I did see that and was doing that, however I did like what Kevin had so I was hoping for that. Failing that I probably will just do as you suggested
This is a bit of a rough draft version: codepen.io/kevinpowell/pen/XWVOXQE
I personally do not like the idea of toggle switch because every website has a different style and position of toggle switch of light and dark. For this I would like chromium to implement a generic toggle switch for each page right next to the address bar or the Dark reader extension to find and hunt for such a switch on every page and trigger it.
What is the best css framework to stick to please
I'm not really a framework person, so no real recommendations, sorry!
I want that HTML page with everything!
When I saw that intro , I said no way , he must be using a browser extension for that
bagus sekali aku suka
Doesn't do anything for mine
Polypane looks really cool. However, paying a subscription fee for a browser is… well not ideal. Maybe I can get my company to pay for it. Lol.
I wonder if similar functionality could be written in JavaScript…..
Polypane does *a lot*. It's a full on browser based on Chromium. I'd 100% see if you could get your employer to go for it, always worth the shot.
Nice that html can do it but CZcams iOS app cannot
Nice feature, but browser support is pretty much none yet (meta property is ok, but CSS one isn't).
Other than IE?, what's missing? caniuse.com/?search=color-scheme
Kevin 🎓 Thank
#EFEFEF is my favorite.
Bgcolor black
Color white
dark knight 07:02 😂
Can you explain flex? for example > flex: 0 0 25%; I dont understand the parts to that or how it works.
Really??? Did you even bother to look on his channel? 🙄🙄🙄
Hopefully this helps: czcams.com/video/u044iM9xsWU/video.html
How to get Light Dark mode without Css
step 1: create a file style.css
just kidding 😅
This feature seems to have very limited uses. I would say that it's almost useless.
It's not to use as a full styling, but to set the stage for a dark design, getting the user agent styling in the right direction.
Using it with the meta also means no bright flash if you're setting and storing a dark mode in localStorage with JS, which normally happens
Someone has said, "You can't hack NASA with HTML!".
Now what! Jokes and shame on their face :P
Ви благодарам многу.
First we get without js and now we got without html next is a dark mode without anything
"Light & Dark mode WITHOUT CSS!"
> Spends almost the entire video in the CSS file.
Like, I normally like your videos, but that just felt like a lie to get me to click. I was genuinely curious as to how you'd do it in pure HTML with no styling.
mais... tu viens d'utiliser du css là non ?🧐🤔
Too advanced for me.
Dark mode is lfe.
Any one please help me for college projects please 💖
Nice click bait
Clickbait...
Thanks a lot!