Light & Dark Mode with CSS Variables #3 - Manually Toggling Modes

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

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

  • @NabekenProG87
    @NabekenProG87 3 года назад +14

    Amazing tutorial. Came for darkmode, stayed for toggle button and local storage. I love it when tutors go the extra step and make it "production ready"

  • @ahmadshahzad9019
    @ahmadshahzad9019 3 года назад +2

    Making it accessible put a cherry on the already delicious cake. We need more tutorial-makers to do this so it comes naturally to learners, as if it's a requirement and must be done.

  • @divyareddy7622
    @divyareddy7622 3 года назад +4

    Thank you for your efforts. This means the world remember it!! ❤❤❤🥺

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

    So close to 800k... Awesome!

  • @ru2979
    @ru2979 3 года назад +2

    😭😭😭Thank you sir for these amazing tutorials 😘😘

  • @haroldjeshua
    @haroldjeshua 3 года назад +1

    Thanks for this, man. I also subscribed to Chris' page. U guys r osooom.

  • @hashirnouman8355
    @hashirnouman8355 3 года назад +1

    Love your videos I learned react from you helping me a lot

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

    Congrats on 800K subscribers!

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

    This is such a great tutorial. You're an awesome teacher. Thank you.

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

    amazing tutorial. just what I was looking for. Thanks guys to you both.

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

    Wow, you’re a great teacher. Instant subscribe! 🙏🏻

  • @userj-s2000
    @userj-s2000 Год назад

    Tut was great with the css, the js part couldve been simpler maybe bc its this website specific, its a cute tut none the less, learned the content state in css, that was new to me

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

    A great video, I was just researching on this, so everything become straight forward, cheers my friend :)

  • @morshedulislamriaad6496
    @morshedulislamriaad6496 3 года назад +2

    I know this is a great tutorial.

  • @kirank3368
    @kirank3368 Год назад

    Great video ❤

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

    Thank you

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

    i love this tutorial, thankyou broo

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

    With what shortcut do you change color scheme on google chrome?

  • @gadgetkh9408
    @gadgetkh9408 3 года назад

    Thank you! Hope you will plan for Fastify API with AUTH/Passport for your next tutorial.

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

    Hello Shaun, is it possible that you create a tutorial on firebase 9 ? it seems the future of serverless because everything is modulous / functional, no need to import compile/bundle everything and the file size is extremely refuced and runs much faster, hopefully Shaun create a course on this topic 🤩🤩🤩

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

    really nice😍

  • @manoj-k
    @manoj-k 3 года назад

    perfect😍 Next React full stack please...

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

    I appreciate these videos. I’m wondering if you can do a figma series? It’s becoming extremely popular.

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

    Amazing tutorial we need java crash coures

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

    Hello
    I just have a little question
    When you enter the function getCurrentTheme with the matchMedia
    After this can we put more than 2 argument, like ‘darkmode’ : ‘light mode’ : ‘bluemode’ etc
    Can we do this ?
    Thanks a lot

  • @ভোমরা
    @ভোমরা 2 года назад

    nice

  • @maxdevjs3457
    @maxdevjs3457 3 года назад

    Excellent! I have two curiosities:
    - I found out that it works on Firefox even if I do not switch the position of [color-scheme="dark"] in CSS as in the video (around 17'22"), but Chrome does not work (feels to IE... 😃)
    - I see that in a couple places it is used `${theme}` (i.e.: root.setAttribute('color-scheme', `${theme}`)), but what is in this case the difference with non interpolating the variable (having just root.setAttribute('color-scheme', theme))?
    Thank you for the great tutorial 😃🥳

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

    Bro I am in Trouble please help me Out!
    .
    I recently published an app, which uses firebase. For fetching data I use Stream builder ,but I found even without Updated on server data is loading every time on every page change(causing unnecessary billing). I want fetch data from locally. From firebase only if there is updated.

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

    We need a webpack 5 tuts!

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

    can you make an updated flutter 2 + firebase tutorial?

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

    Heey @The Net Ninja, could you provide a tutorial with the JavaScript part in Jquery form? I have been trying to make this work in JQuery, however, I am stuck. Much appreciated.

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

    will there be a lm course on nuxt?

  • @vuongqtvn
    @vuongqtvn 3 года назад

    ❤️

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

    What happened to our ninja master?! This dude voice is unfamiliar?! Did you take Shaun hostage?! We are willing to pay any amount of ransom that you demand!

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

      Haha I'll be back soon, working on a new Udemy course at the moment, nearly finished! :)

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

      @@NetNinja Damn! You responded too late! Someone called me and demanded 2 million dollars to give me the location of a remote place where I can find you. He told me when I arrive there I will see a big, red cross on the ground and I'm gonna need a shovel. I dug the ground and I found someone who is still breathing. He has a mask on so I couldn't make out his Identity. I paid 2 million dollars to find you and the question is if you are free and well who is this poor bastard that I dug out of the ground?!

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

    Bruh. If you are not planning to use the local storage value to persist the theme value for a subsequent revisit, what is the point of even using it. You are using it as a global state in this context. I have faced this exact problem and I was hoping you would have done it correctly but it seems this is yet another half baked tutorial. Far better than the other tutorials that this channel has though.

  • @systemmanager186
    @systemmanager186 3 года назад

    or you can just use react or angular with material design and be down with that in 5 min

    • @NabekenProG87
      @NabekenProG87 3 года назад

      VanillaJS is a great backup to have. If you don't know how to do it without the framework you will only do it in that framework

    • @ahmadshahzad9019
      @ahmadshahzad9019 3 года назад

      Why would I want a framework for my one-page landing-only webpage?

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

      @@ahmadshahzad9019 how after you build just a Landing Page ??

  • @user-kw9cu
    @user-kw9cu Год назад

    I don't like you style of teaching, very little explanation, just pasting lines of code and mumbling Ninja explains stuff more clearly, sorry

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

    ty so much Ninja , I hope from inside my heart that God guides you to Islam