Light/Dark Theme Toggle using HTML CSS & JavaScript

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

КОМЕНТАРІ • 74

  • @hils1015
    @hils1015 Рік тому +3

    So quick and straight to the point and very well done video. Thank you!

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

    You make JavaScript easy to understand and create projects

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

    Awesome explanation bro

  • @fedestock77
    @fedestock77 2 місяці тому

    Hi, thank you fOr this video. Is there a way to integrate this to Wordpress?

  • @williamkakooza4603
    @williamkakooza4603 5 місяців тому +1

    Thank you😊

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

    Thanks for sharing!, i really help me in my project

  • @parodimiguelangel2889
    @parodimiguelangel2889 Рік тому +1

    awesome and useful, thank you!! it really helped me in my project

  • @lorefort
    @lorefort Рік тому +1

    Brilliant! Thank you.

  • @hayksedrakyan1086
    @hayksedrakyan1086 Рік тому +1

    Thanks my brother

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

    Tell me buddy, what theme do you have installed? I like the color of the syntax in your javascript. Write down what plugin?

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

    Thank you!
    Good way of explaining.
    New subscriber

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

    pls put link you get in bootstrap because I can't find it.Thank You

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

    Thanks a bunch!
    Very helpful.

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

    It's helped ❤

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

    The code ran except of the background colour which you mentioned.Can you help by saying what might went wrong?

  • @cypherecon5989
    @cypherecon5989 9 місяців тому

    When I try translate(-50%, -50%) it does not work. This brings it somehwat in the middle: Do you know why?
    i{
    font-size: 50px;
    position: absolute;
    cursor: pointer;
    top: 50%;
    bottom: 50%;
    transform: translate(1500%, 50%);
    }

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

    good content like always ! ✨👑

  • @mrunknown_811
    @mrunknown_811 4 місяці тому

    thank you

  • @dapolcio3405
    @dapolcio3405 Рік тому +1

    This is good for two elements website. If you wanna use it for complex site it's useless.

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

    help me when i toogle to dark mode my body part text are all white but navbar text are in black color so i cant see them how to fix that

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

      Hi bro, what's the error message ??

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

      @@CodeCreativeYT when i turn dark mode my navbar brand and link are also black and i cannot see them in dark mode

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

    Thanks I like your content sir

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

    How do we implement the local storage here? Thanks

    • @syjosephian8197
      @syjosephian8197 Місяць тому

      const DarkMode = document.querySelector(".toggle");
      const enabledarkmode = ()=>{
      document.body.classList.add("darkmode");
      localStorage.setItem("darkmode","active");
      };
      const disabledarkmode = () => {
      document.body.classList.remove("darkmode");
      localStorage.setItem("darkmode",null);
      };
      localStorage.getItem("darkmode") === "active" ? enabledarkmode() : "";
      DarkMode.addEventListener("click",()=>{
      localStorage.getItem("darkmode") === "active" ? disabledarkmode() : enabledarkmode();
      });

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

    thank you bro

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

    I love yoy ❤‍🔥

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

    Is it possible in android?

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

    good one

  • @PeriklesPeriklesoglu
    @PeriklesPeriklesoglu Рік тому +1

    thanks

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

    good job

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

    great

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

    How do I make it permanent change? I mean I want the change should be saved and when I refresh or reopen the page it should open with the new theme.

    • @oxy-5313
      @oxy-5313 Рік тому

      You can use localstorage

    • @MKSundaram
      @MKSundaram Рік тому +1

      @@oxy-5313 Do you have any tutorial on how to use localstorage for this purpose?

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

    Thanks

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

    Its showing cannot read property of toggle

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

    sir can i download your JavaScript book, in your github?

  • @w1nro-z5o
    @w1nro-z5o 8 місяців тому

    is it working

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

    ❤❤

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

    Do we have to always toggle to get dark mode?

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

    hy dear its not working ,it show error in js and when i click to switch in drak mode no js apply even i follow all your step and source code but its not working. tell me what i should i do now

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

      Hi, bro. ok when you like your javascript file from html
      what you have to do is like this below

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

      this way they will load the js first then next html, ok

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

  • @Quiz_19
    @Quiz_19 6 місяців тому

    in my code i used src to change image but the code is note working

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

    Where bi moon img?

  • @the.element.rosado
    @the.element.rosado Рік тому

    JS looks complicated until you explain each line of code. 🙌🏼
    Create a VS Code Extension of you Pseudo coding…

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

    written same code but its not working i tried for the second time but no

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

      Hi, can you show me your error message please?

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

    When reload it returns to light mode🥲

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

    Jarvis ka source code de do bhai please

  • @umiddev007
    @umiddev007 Рік тому +1

    help me ,pleace

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

    help me, it doesn't work 🤦🏾‍♂

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

    He

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

    😓😓wtf

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

    It really work on all break point..?? 🥲🥲