Light & Dark mode WITHOUT CSS!

Поділитися
Вставка
  • Опубліковано 11 вер 2024

КОМЕНТАРІ • 123

  • @yaycupcake
    @yaycupcake 2 роки тому +34

    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.

    • @bebretter9027
      @bebretter9027 2 роки тому

      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!!😁

    • @tcmax7837
      @tcmax7837 2 роки тому +5

      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.

  • @desmondodion9046
    @desmondodion9046 2 роки тому +59

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

    • @KevinPowell
      @KevinPowell  2 роки тому +9

      So glad that you're enjoying the course!

    • @_asadbaig
      @_asadbaig 2 роки тому +2

      Can you share the course link?

    • @desmondodion9046
      @desmondodion9046 2 роки тому +1

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

    • @bebretter9027
      @bebretter9027 2 роки тому

      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!!😁

    • @desmondodion9046
      @desmondodion9046 2 роки тому +1

      @@bebretter9027 This seems more like photography 😅. I prefer deep learning at any time, so I will go with A.

  • @jaysonbunnell8097
    @jaysonbunnell8097 2 роки тому +18

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

    • @triminhtruong251
      @triminhtruong251 2 роки тому +1

      Thankss

    • @bebretter9027
      @bebretter9027 2 роки тому

      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!!😁

  • @UteBescht
    @UteBescht 2 роки тому +4

    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!

  • @lucienchu9649
    @lucienchu9649 2 роки тому +1

    Thanks Kevin, dark mode would be my next concern of my designs.

  • @GroudFrank
    @GroudFrank 2 роки тому +3

    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.

  • @microcolonel
    @microcolonel 2 роки тому

    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.

  • @zachjensz
    @zachjensz 2 роки тому +7

    Finally dark mode users won't be blinded by FOUC

    • @KevinPowell
      @KevinPowell  2 роки тому +1

      Oh, good point, I didn't even think of that!

    • @ajfalo-fi3721
      @ajfalo-fi3721 2 роки тому

      FOUC?

    • @aldyreal
      @aldyreal 2 роки тому +3

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

    • @Gregorius421
      @Gregorius421 2 роки тому

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

  • @tnixc6356
    @tnixc6356 2 роки тому +7

    I thought it was no JavaScript but it was NO CSS

  • @rafaqf6659
    @rafaqf6659 2 роки тому

    Another amazing video from Kevin Power! :P Thanks a lot!

  • @abdellatif.x8127
    @abdellatif.x8127 2 роки тому +2

    thanks man this is really helpful 🌚

  • @balmaraz96
    @balmaraz96 2 роки тому

    A print CSS video from you would be super great!

  • @colubrinedeucecreative
    @colubrinedeucecreative 2 роки тому

    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!

  • @TheCocoaDaddy
    @TheCocoaDaddy 2 роки тому

    Brilliant! Thanks for posting!

  • @solomonobihan9465
    @solomonobihan9465 2 роки тому

    He is so good.
    How can someone be this good?

  • @Mr-Corey-June
    @Mr-Corey-June 2 роки тому +1

    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.

    • @bebretter9027
      @bebretter9027 2 роки тому

      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!!😁

    • @Mr-Corey-June
      @Mr-Corey-June 2 роки тому

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

  • @Soferking
    @Soferking 2 роки тому +1

    great man ! I hate css and you really help me to get things done !

    • @bebretter9027
      @bebretter9027 2 роки тому

      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!!😁

  • @bySterling
    @bySterling 2 роки тому

    Awesome tutorial! I did think it was going to school us on how to build a visitor switcher toggle mode ha

  • @D7460N
    @D7460N 2 роки тому +6

    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.

    • @KevinPowell
      @KevinPowell  2 роки тому +7

      Yeah, having it on the meta tag should do just that!

    • @D7460N
      @D7460N 2 роки тому +1

      @@KevinPowell Perfect.

  • @FFAs
    @FFAs 2 роки тому

    This looks like fun to play with. Thanks for the tip!

    • @bebretter9027
      @bebretter9027 2 роки тому

      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!!😁

  • @rohitdoestech
    @rohitdoestech 2 роки тому

    This is exactly what I wanted

  • @thedapperfoxtrot
    @thedapperfoxtrot 2 роки тому

    Colour me intrigued!

  • @devanshnigam5172
    @devanshnigam5172 7 місяців тому

    Amazing content, can we handle the ico files similarly as well which are used for website icons, visible in the tabs?

  • @GiorgioBeltrammi
    @GiorgioBeltrammi 2 роки тому

    Thanks a lot!

  • @lvekua
    @lvekua 2 роки тому

    Awesome! Thank you 🙏

  • @whatthefunction9140
    @whatthefunction9140 2 роки тому

    That smirk 😏

  • @schwetang
    @schwetang 2 роки тому +1

    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?

    • @SunroseStudios
      @SunroseStudios 2 роки тому

      definitely something to consider, kind of a case-by-case deal we'd imagine

    • @MudasirKhan-qn3md
      @MudasirKhan-qn3md 2 роки тому +3

      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

  • @nicolasmayorga8288
    @nicolasmayorga8288 2 роки тому

    Amazing, thanks

  • @fit_nr
    @fit_nr 2 роки тому

    thankyou, Kevin 👍👍

  • @kodosensei
    @kodosensei 2 роки тому

    Awesome !!!!🔥🔥

  • @alvaroprietovideos
    @alvaroprietovideos 2 роки тому

    Thanks for sharing 🙏

  • @Gregorius421
    @Gregorius421 2 роки тому +3

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

    • @KevinPowell
      @KevinPowell  2 роки тому +2

      That would be pretty cool, for sure

    • @BlackAsLight448
      @BlackAsLight448 2 роки тому +1

      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.

    • @Victor_Marius
      @Victor_Marius 2 роки тому

      @@BlackAsLight448 you still need js

    • @Victor_Marius
      @Victor_Marius 2 роки тому +1

      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.

    • @BlackAsLight448
      @BlackAsLight448 2 роки тому

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

  • @_viy
    @_viy Рік тому

    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?

  • @hjetwd
    @hjetwd 2 роки тому

    Responsively App - free open source alternative of Polypane 😉

  • @abhisek330
    @abhisek330 2 роки тому +1

    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.

  • @bobhearinger
    @bobhearinger 10 місяців тому

    This doesn't change anything to my site and I have dark mode on Windows?

  • @valeriousmonk654
    @valeriousmonk654 2 роки тому

    Best teacher

  • @kyletoub8201
    @kyletoub8201 2 роки тому

    Firefox probably depends on your theme, as I have no purple dark but pure dark gray.

  • @exam-star582
    @exam-star582 2 роки тому

    thank you for that

  • @MMH94MMH
    @MMH94MMH 2 роки тому +1

    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.

    • @2eanimation
      @2eanimation 2 роки тому

      For a robust and global setup I found ua-cam.com/video/kZiS1QStIWc/v-deo.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!

    • @KevinPowell
      @KevinPowell  2 роки тому +1

      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 :)

    • @bebretter9027
      @bebretter9027 2 роки тому

      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!!😁

  • @mohammadmahdialvansaz8001
    @mohammadmahdialvansaz8001 2 роки тому

    Awesome!

  • @attilaguba856
    @attilaguba856 2 роки тому

    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

  • @The-Dev-Ninja
    @The-Dev-Ninja 2 роки тому

    thank you

  • @trbry.
    @trbry. 2 роки тому

    firefox probably depends on your theme, as I have no purple dark but pure dark gray.

  • @ThanHtutZaw3
    @ThanHtutZaw3 2 роки тому +4

    How to get Light Dark mode without Css
    step 1: create a file style.css
    just kidding 😅

  • @DeepThinker193
    @DeepThinker193 2 роки тому

    ...amazing

  • @osawereao
    @osawereao 2 роки тому +2

    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

  • @MrPeepa
    @MrPeepa 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?

    • @KevinPowell
      @KevinPowell  2 роки тому

      I looked at using JS for it awhile back. Little different, but you could use this together with the meta tag - ua-cam.com/video/wodWDIdV9BY/v-deo.html

  • @iamTazim9
    @iamTazim9 2 роки тому

    Can you tell us something about the new version of CSS, whether it will actually be released or fake information

    • @KevinPowell
      @KevinPowell  2 роки тому +1

      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.

  • @chaython
    @chaython 2 роки тому

    Doesn't do anything for mine

  • @precisionchoker
    @precisionchoker 2 роки тому

    When I saw that intro , I said no way , he must be using a browser extension for that

  • @HaniiPuppy
    @HaniiPuppy 8 місяців тому +1

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

  • @favouritejome
    @favouritejome 2 роки тому

    Interesting new feature

  • @soundbase2309
    @soundbase2309 2 роки тому

    Please which book do you read 🙏

  • @ivanjermakov
    @ivanjermakov 2 роки тому +2

    Nice feature, but browser support is pretty much none yet (meta property is ok, but CSS one isn't).

    • @KevinPowell
      @KevinPowell  2 роки тому +1

      Other than IE?, what's missing? caniuse.com/?search=color-scheme

  • @eqprog
    @eqprog 2 роки тому

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

    • @KevinPowell
      @KevinPowell  2 роки тому

      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.

  • @GrawlCore
    @GrawlCore 2 роки тому

    OH WOW

  • @jkibble98
    @jkibble98 2 роки тому

    It's probably pretty common but my googlefoo is failing me but is there a link to the index.html you are using?

    • @MrMairu555
      @MrMairu555 2 роки тому

      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.

    • @jkibble98
      @jkibble98 2 роки тому +1

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

    • @KevinPowell
      @KevinPowell  2 роки тому +1

      This is a bit of a rough draft version: codepen.io/kevinpowell/pen/XWVOXQE

  • @BHNative
    @BHNative 2 роки тому

    I want that HTML page with everything!

  • @gr81matt
    @gr81matt 2 роки тому

    #EFEFEF is my favorite.

  • @sample1801
    @sample1801 2 роки тому

    Please ! make a video on Javascript animation vs css animation.

  • @user-ms8ei9le7x
    @user-ms8ei9le7x 2 роки тому

    Kevin 🎓 Thank

  • @thesoftwareengineersjourney
    @thesoftwareengineersjourney 2 роки тому

    What is the best css framework to stick to please

    • @KevinPowell
      @KevinPowell  2 роки тому +1

      I'm not really a framework person, so no real recommendations, sorry!

  • @fillionomar2195
    @fillionomar2195 2 роки тому

    Nice that html can do it but UA-cam iOS app cannot

  • @roshanlalsahu7846
    @roshanlalsahu7846 2 роки тому +1

    dark knight 07:02 😂

  • @ScottDaniels1977
    @ScottDaniels1977 2 роки тому +1

    This feature seems to have very limited uses. I would say that it's almost useless.

    • @KevinPowell
      @KevinPowell  2 роки тому

      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

  • @tommykreator
    @tommykreator 2 роки тому

    bagus sekali aku suka

  • @technicalghimire126
    @technicalghimire126 2 роки тому

    Bgcolor black
    Color white

  • @richardc4215
    @richardc4215 2 роки тому

    Can you explain flex? for example > flex: 0 0 25%; I dont understand the parts to that or how it works.

    • @MrMairu555
      @MrMairu555 2 роки тому

      Really??? Did you even bother to look on his channel? 🙄🙄🙄

    • @KevinPowell
      @KevinPowell  2 роки тому

      Hopefully this helps: ua-cam.com/video/u044iM9xsWU/v-deo.html

  • @alnahian2003
    @alnahian2003 2 роки тому

    Someone has said, "You can't hack NASA with HTML!".
    Now what! Jokes and shame on their face :P

  • @hmehrzad3962
    @hmehrzad3962 5 місяців тому

    First we get without js and now we got without html next is a dark mode without anything

  • @victorautheman8007
    @victorautheman8007 2 роки тому

    mais... tu viens d'utiliser du css là non ?🧐🤔

  • @htmlenjoyer8285
    @htmlenjoyer8285 2 роки тому

    Ви благодарам многу.

  • @pranavnyavanandi9710
    @pranavnyavanandi9710 2 роки тому

    Too advanced for me.

  • @kirayamato6128
    @kirayamato6128 2 роки тому +1

    Nice click bait

  • @theaviary238
    @theaviary238 2 роки тому

    Dark mode is lfe.

  • @sonali1422
    @sonali1422 2 роки тому +1

    Any one please help me for college projects please 💖

  • @Kasiux
    @Kasiux 2 роки тому +1

    Clickbait...