Simple Dark-Light theme with VanillaJs Vaishnav on December 09, 2020 Dark mode designs and functionality that enable to toggle between Dark and Light theme is trending UI/UX Design🔥. So, here's the guide to create Si... Read full post Submit Preview Dismiss Collapse Expand casiimir casiimir casiimir Follow Front-End Developer Location Sicily, Italy Education Philosophical Sciences Work Master's degree at University of Palermo Joined Sep 26, 2020 • Dec 9 '20 • Edited on Dec 9 • Edited Dropdown menu Copy link Hide Nice done, I love it! Can I suggest three more lines of javascript? :D ... let isLight = true; ... function modeSwitch() { ... isLight = !isLight; isLight ? toggle.innerText = "🌞" : toggle.innerText = "🌚"; } Enter fullscreen mode Exit fullscreen mode Collapse Expand Sergii Shymko Sergii Shymko Sergii Shymko Follow Director of Engineering, eCommerce Architect, Magento 2 Co-founder Location Austin, TX Work Director of Engineering Joined Mar 6, 2020 • Aug 18 '21 • Edited on Aug 18 • Edited Dropdown menu Copy link Hide The ternary expression can be simplified to the following: toggle.innerText = isLight ? "🌞" : "🌚" Enter fullscreen mode Exit fullscreen mode Collapse Expand Vaishnav Vaishnav Vaishnav Follow Frontend Developer | Building @Peerlist.io | Location India Education Computer Science and Engineering Work Peerlist.io Joined Apr 23, 2020 • Dec 10 '20 Dropdown menu Copy link Hide Hey. I updated pen according to your suggestions. Thanks 🤩. Collapse Expand casiimir casiimir casiimir Follow Front-End Developer Location Sicily, Italy Education Philosophical Sciences Work Master's degree at University of Palermo Joined Sep 26, 2020 • Dec 10 '20 • Edited on Dec 10 • Edited Dropdown menu Copy link Hide Really? I'm honored! :D Vaishnav Vaishnav Vaishnav Follow Frontend Developer | Building @Peerlist.io | Location India Education Computer Science and Engineering Work Peerlist.io Joined Apr 23, 2020 • Dec 10 '20 • Edited on Dec 12 • Edited Dropdown menu Copy link Hide Yep. I'm still learning and I love to share what learned hoping it would be helpful for someone.😄 casiimir casiimir casiimir Follow Front-End Developer Location Sicily, Italy Education Philosophical Sciences Work Master's degree at University of Palermo Joined Sep 26, 2020 • Dec 10 '20 Dropdown menu Copy link Hide Me too, same story! Nice website, I like it. Do you like something about my repos? :D Collapse Expand Andrew Baisden Andrew Baisden Andrew Baisden Follow Full-Stack Engineer | React, Next.js, TypeScript, Node.js | AI-Assisted Engineering Location London, UK Education Bachelor Degree Computer Science Work Software Developer Joined Feb 11, 2020 • Jan 18 '21 • Edited on Jan 18 • Edited Dropdown menu Copy link Hide Great nice and lightweight. Collapse Expand Brayden W ⚡️ Brayden W ⚡️ Brayden W ⚡️ Follow Developer 💻 • Designer 🎨 • Freelancer 💪🏼 • Creator 💭 Email brayden45.dev@gmail.com Location The Milky Way Work Frontend Developer/Designer Joined May 2, 2020 • Dec 9 '20 Dropdown menu Copy link Hide Nice! I’ll try using this in my next project ;D Collapse Expand Chaitanya Chunduri Chaitanya Chunduri Chaitanya Chunduri Follow I'm a Software Engineer, full stack developer. Joined Oct 18, 2017 • Dec 9 '20 Dropdown menu Copy link Hide How do we put animation like the thumbnail of this post?? Collapse Expand Vaishnav Vaishnav Vaishnav Follow Frontend Developer | Building @Peerlist.io | Location India Education Computer Science and Engineering Work Peerlist.io Joined Apr 23, 2020 • Dec 9 '20 • Edited on Dec 9 • Edited Dropdown menu Copy link Hide Here codepen you can refer. codepen.io/demilad/pen/bZRjpb Toggle switch can be customised using CSS Collapse Expand Chaitanya Chunduri Chaitanya Chunduri Chaitanya Chunduri Follow I'm a Software Engineer, full stack developer. Joined Oct 18, 2017 • Dec 10 '20 Dropdown menu Copy link Hide Thank you very much Collapse Expand Altamas Khan Altamas Khan Altamas Khan Follow Location India Work Student Joined Nov 2, 2020 • Dec 9 '20 Dropdown menu Copy link Hide nice! In future i am going to use this. Collapse Expand roiLeo roiLeo roiLeo Follow Yeet! Joined Oct 26, 2018 • Dec 9 '20 Dropdown menu Copy link Hide Be aware that internet explorer doesn't support css variables Collapse Expand Vaishnav Vaishnav Vaishnav Follow Frontend Developer | Building @Peerlist.io | Location India Education Computer Science and Engineering Work Peerlist.io Joined Apr 23, 2020 • Dec 9 '20 Dropdown menu Copy link Hide Hey Thanks, I didn't know about it. Collapse Expand Yannick Eich Yannick Eich Yannick Eich Follow Email mail@yeich.de Location Karlsruhe, Germany Work createDiv GmbH Joined Sep 4, 2019 • Dec 9 '20 Dropdown menu Copy link Hide Great job! Code of Conduct • Report abuse
Nice done, I love it!
Can I suggest three more lines of javascript? :D
The ternary expression can be simplified to the following:
Hey. I updated pen according to your suggestions. Thanks 🤩.
Really? I'm honored! :D
Yep. I'm still learning and I love to share what learned hoping it would be helpful for someone.😄
Me too, same story!
Nice website, I like it. Do you like something about my repos? :D
Great nice and lightweight.
Nice! I’ll try using this in my next project ;D
How do we put animation like the thumbnail of this post??
Here codepen you can refer.
codepen.io/demilad/pen/bZRjpb
Toggle switch can be customised using CSS
Thank you very much
nice! In future i am going to use this.
Be aware that internet explorer doesn't support css variables
Hey Thanks, I didn't know about it.
Great job!