Light & Dark mode WITHOUT CSS!

Поделиться
HTML-код
  • Опубликовано: 29 сен 2024

Комментарии • 123

  • @ThanHtutZaw3
    @ThanHtutZaw3 2 года назад +4

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

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

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

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

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

  • @alnahian2003
    @alnahian2003 2 года назад

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

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

  • @tnixc6356
    @tnixc6356 2 года назад +7

    I thought it was no JavaScript but it was NO CSS

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

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

  • @desmondodion9046
    @desmondodion9046 2 года назад +58

    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 года назад +8

      So glad that you're enjoying the course!

    • @_asadbaig
      @_asadbaig 2 года назад +1

      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.

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

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

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

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

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

  • @kirayamato6128
    @kirayamato6128 2 года назад +1

    Nice click bait

  • @devanshnigam5172
    @devanshnigam5172 7 месяцев назад

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

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

  • @hmehrzad3962
    @hmehrzad3962 5 месяцев назад

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

  • @bobhearinger
    @bobhearinger 10 месяцев назад

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

  • @abdellatif.x8127
    @abdellatif.x8127 2 года назад +2

    thanks man this is really helpful 🌚

  • @victorautheman8007
    @victorautheman8007 2 года назад

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

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

  • @lucienchu9649
    @lucienchu9649 2 года назад +1

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

  • @fillionomar2195
    @fillionomar2195 2 года назад

    Nice that html can do it but RUclips iOS app cannot

  • @chaython
    @chaython 2 года назад

    Doesn't do anything for mine

  • @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 - ruclips.net/video/wodWDIdV9BY/видео.html

  • @soundbase2309
    @soundbase2309 2 года назад

    Please which book do you read 🙏

  • @technicalghimire126
    @technicalghimire126 2 года назад

    Bgcolor black
    Color white

  • @GiorgioBeltrammi
    @GiorgioBeltrammi 2 года назад

    Thanks a lot!

  • @htmlenjoyer8285
    @htmlenjoyer8285 2 года назад

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

  • @gr81matt
    @gr81matt 2 года назад

    #EFEFEF is my favorite.

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

  • @theaviary238
    @theaviary238 2 года назад

    Dark mode is lfe.

  • @kyletoub8201
    @kyletoub8201 2 года назад

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

  • @nicolasmayorga8288
    @nicolasmayorga8288 2 года назад

    Amazing, thanks

  • @roshanlalsahu7846
    @roshanlalsahu7846 2 года назад +1

    dark knight 07:02 😂

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

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

  • @exam-star582
    @exam-star582 2 года назад

    thank you for that

  • @user-ms8ei9le7x
    @user-ms8ei9le7x 2 года назад

    Kevin 🎓 Thank

  • @whatthefunction9140
    @whatthefunction9140 2 года назад

    That smirk 😏

  • @The-Dev-Ninja
    @The-Dev-Ninja 2 года назад

    thank you

  • @DeepThinker193
    @DeepThinker193 2 года назад

    ...amazing

  • @GrawlCore
    @GrawlCore 2 года назад

    OH WOW

  • @rafaqf6659
    @rafaqf6659 2 года назад

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

  • @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 ruclips.net/video/kZiS1QStIWc/видео.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!!😁

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

  • @hjetwd
    @hjetwd 2 года назад

    Responsively App - free open source alternative of Polypane 😉

  • @trbry.
    @trbry. 2 года назад

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

  • @precisionchoker
    @precisionchoker 2 года назад

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

  • @bySterling
    @bySterling 2 года назад

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

  • @balmaraz96
    @balmaraz96 2 года назад

    A print CSS video from you would be super great!

  • @sample1801
    @sample1801 2 года назад

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

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

  • @BHNative
    @BHNative 2 года назад

    I want that HTML page with everything!

  • @thedapperfoxtrot
    @thedapperfoxtrot 2 года назад

    Colour me intrigued!

  • @tommykreator
    @tommykreator 2 года назад

    bagus sekali aku suka

  • @fit_nr
    @fit_nr 2 года назад

    thankyou, Kevin 👍👍

  • @solomonobihan9465
    @solomonobihan9465 2 года назад

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

  • @TheCocoaDaddy
    @TheCocoaDaddy 2 года назад

    Brilliant! Thanks for posting!

  • @alvaroprietovideos
    @alvaroprietovideos 2 года назад

    Thanks for sharing 🙏

  • @favouritejome
    @favouritejome 2 года назад

    Interesting new feature

  • @rohitdoestech
    @rohitdoestech 2 года назад

    This is exactly what I wanted

  • @lvekua
    @lvekua 2 года назад

    Awesome! Thank you 🙏

  • @pranavnyavanandi9710
    @pranavnyavanandi9710 2 года назад

    Too advanced for me.

  • @kodosensei
    @kodosensei 2 года назад

    Awesome !!!!🔥🔥

  • @valeriousmonk654
    @valeriousmonk654 2 года назад

    Best teacher

  • @mohammadmahdialvansaz8001
    @mohammadmahdialvansaz8001 2 года назад

    Awesome!

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

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

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

  • @Kasiux
    @Kasiux 2 года назад +1

    Clickbait...

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

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

  • @sonali1422
    @sonali1422 2 года назад +1

    Any one please help me for college projects please 💖

  • @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: ruclips.net/video/u044iM9xsWU/видео.html