Light & Dark Mode toggle using Tailwind CSS & Alpine JS

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

КОМЕНТАРІ • 25

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

    Such clear thinking and tutorials, thank you Shruti!

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

      Thanks for the comment Mauricio 😊🙌

  • @abusaadwachu2850
    @abusaadwachu2850 3 роки тому +1

    Shurti has done it again...good work

    • @Thirus
      @Thirus  3 роки тому

      Thank you!

  • @kieran2347
    @kieran2347 3 роки тому +1

    Yet another great video! Thanks, Shruti!

    • @Thirus
      @Thirus  3 роки тому

      Welcome :)

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

    Would we need to add this every page on our project? Like suppose we have 2 pages, we need all these in both those pages.
    And I think the dark mode value will continue to follow on next page too.

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

      Yes, it needs to be on each page. And yes, the preference is saved.

  • @sornt
    @sornt 3 роки тому +1

    Great!!

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

    Thanks for the great tutorial! Awesome. Could you share how to keep darkmode(or light) over different page? becuase when I click other menu, it changed to light mode from dark. :-)

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

      Hi, I’ve shown exactly that towards the end of the tutorial using localStorage.

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

    Hi, Thanks for your sharing, How can I change my logo image when I use dark mode toggled ? Thanks again...!

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

      Using Tailwind css:
      .\!logo-light {
      content: url("logo-light.png") !important;
      .dark .dark\:\!logo-dark {
      content: url("logo-dark.png") !important;
      }

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

      @@PriyanshuCK Thank very much....!

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

    u change my mind about women instructor

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

    Hi. i've got a problem.
    in localstorage the darkMode set to true, but whenever i reload the page the page gone light for some milisecond then get dark

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

      Oh! Try this solution - stackoverflow.com/a/59628913
      Haven’t tried it myself, but it might help.

    • @StefanSchmalhaus
      @StefanSchmalhaus 11 місяців тому

      @@Thirus This Stackoverflow solution is a completely different approach and cannot be applied to your script. Maybe you can do a follow-up video on how to improve your solution.

  • @govindsaini8085
    @govindsaini8085 3 роки тому +1

    Hi mam I m facing the pb of display I want to show in lg screen of image and mobile devices I want to show hidden of image "hidden md:block " I used but doesn't work show this kind of pb how to solve mam if possible as soon as reply for this question

    • @Thirus
      @Thirus  3 роки тому

      Have you tried inspecting the element in browser?
      You will have to share screenshots of your code for me to understand why it’s not working. DM me on Twitter @shrutibalasa

  • @mariooviedo4298
    @mariooviedo4298 3 роки тому

    Hi, I hope you can help me, when I try to add to the switch button (or another type of button xd) it doesn't run and the console in the browser shows me this message "ReferenceError: isDark is not defined" :c I follow all of your instructions

    • @Thirus
      @Thirus  3 роки тому

      I will need to look at your code to help. DM me on Twitter twitter.com/shrutibalasa

    • @mariooviedo4298
      @mariooviedo4298 3 роки тому +1

      @@Thirus Thanks! I fixed it yesterday, I was trying to use an old version of AlpineJS haha thanks anyway, good video!

    • @Thirus
      @Thirus  3 роки тому

      Great to know it’s solved :)