Coding2GO
Coding2GO
  • 24
  • 762 478
Create a Dark Mode Switch with HTML, CSS, JavaScript
Learn how to create a dark mode switch with html and css and save the theme with javascript localstorage. This html, css and javascript beginner tutorial with explain how to provide a dark and light mode switch on your website.
*Check out our website*:
👉 www.coding2go.com
* Get our HTML Udemy Course*:
👉 www.udemy.com/course/coding2go-html5-crashcourse/?referralCode=F017D565D3D3BE47B8BC
*Host your own website with Hostinger*:
👉 www.hostinger.com/coding2go
Use our code CODING2GO to get a 10% discount
*What You'll Learn*:
CSS Darkmode: Using CSS custom-properties or css variables you can create a dark mode for your website
CSS Dark Mode switch: Learn how to create a dark mode switch with HTML, CSS and JavaScript
Change Dark Mode Icon: Learn how to switch image inside the dark mode light mode button with moon icon and sun icon
Save Darkmode in the browser using JavaScript and LocalStorage
Key Points:
CSS Dark Mode
CSS Light Mode
JavaScript darkmode switch
HTML CSS JavaScript dark mode button
moon icon, sun icon
Switch image on click
change icon on click
save theme in the browser
store in localstorage
save dark mode for next website visit
remember theme
remember dark mode
recall theme css javascript
Practical Examples:
Create a dark mode option for your website with html, css and javascript localstorage
Topics:
HTML, CSS, JavaScript, Dark Mode, Darkmode, darkmode, css tutorial for beginners, css dark mode tutorial for beginners, javascript dark mode, dark theme, darkmode theme, light mode , light theme, dark vs. light mode, dark and light mode switch, dark and light mode button, light more button, dark mode button, change themes, change to dark mode, change dark theme, css variables, css custom properties, javascript localstorage, change theme on click, dark mode click button, moon button, moon icon, sun icon, change moon and sun icon dark mode, learn css dark mode, css js dark mode tutorial for beginners, javascript, js, remember dark mode, save dark mode, save theme, save light theme, save dark theme, store darkmode, store theme in the browser
Credits
Track: "Little Things"
Music provided by Slip.stream
Free Download/Stream: get.slip.stream/QmMj1I
Track: "Scared Of The Glizzy"
Music provided by Slip.stream
Free Download/Stream: get.slip.stream/xPJ3rV
Track: "Take Off", NEFFEX
Music provided by Slip.stream
Free Download/Stream: get.slip.stream/GcQeOy
Listen on Spotify: go-stream.link/sp-neffex
Background Animation:
Decoration Stock Videos by Vecteezy: www.vecteezy.com/free-videos/decoration
Like & Subscribe for more 😉
Check out our website: www.coding2go.com
มุมมอง: 4 870

วีดีโอ

Learn CSS Border Animations in 6 Minutes
มุมมอง 25K16 ชั่วโมงที่ผ่านมา
Learn all types of CSS Border Animations in 6 minutes with explanations about animations, css pseudo-elements ::before and ::after and how to create a border animation in css using conic-gradients and css variables (custom properties). In this tutorial, we'll show you how to create border animations is css with a glowing border effect and rotating borders. *Check out our website*: 👉 www.coding2...
Learn CSS :not() and :has() selector in 6 Minutes
มุมมอง 7Kวันที่ผ่านมา
Create a simple product filter with CSS by using pseudo-classes like :not() :has() and :checked. The not pseudo-class will allow you to exclude elements from a selector. The has selector is basically a parent-selector in css that allows you to select elements based on other html elements. You are also going to learn about the css attribute selector to check if a certain option in a dropdown is ...
Login & Signup with HTML, CSS, JavaScript (form validation)
มุมมอง 6K14 วันที่ผ่านมา
This HTML, CSS and JavaScript practical project for beginners will teach you how to create a functioning form validation on the front-end for your Login and Signup page. Check if the password is longer than 8 characters, Firstname, Email and password are required and many more conditions for your own signup form. Learn how to create a responsive login form with modern hover effects and focus st...
Learn JavaScript EventListeners in 4 Minutes
มุมมอง 9K14 วันที่ผ่านมา
JavaScript EventListener Tutorial for beginners | Learn how to use the addEventListener() function by looking at real code examples. Learn how to executre code when clicking a button (button click event), how to extract form data from input field using the "input" event and how to use the event object e in general. EventListeners in JavaScript will enable you to execute code after a certain eve...
BIG NEWS "How to Center a Div" finally answered (new css property)
มุมมอง 16K21 วันที่ผ่านมา
The align-content: center is now possible for block-level elements too. You no longer need Flexbox or grid to center an element vertically. In this CSS beginner tutorial we are explaining the align-content property in css and how it can be used to center a div vertically. This is now possible for block-level elements as of Chrome 123 has been released. 👉 Visit our website: www.coding2go.com 👉 H...
Learn CSS ::before and ::after in 4 Minutes
มุมมอง 66K21 วันที่ผ่านมา
CSS Pseudo Elements Tutorial for beginners with creative code examples, explanations and animations about css pseudo-elements ::before and ::after, how to they work and how to use them. In this tutorial, we'll show you how to use ::before and ::after pseudo-elements to achieve creative designs that aren't possible with regular CSS. *Check out our website*: 👉 www.coding2go.com * Get our HTML Ude...
Learn CSS Positions in 4 minutes
มุมมอง 19Kหลายเดือนก่อน
Beginner Tutorial for css position: static, absolute, relative, fixed, sticky and the properties top, left, right, bottom, z-index *visit our website*: 👉 coding2go.com *BEGINNERS START HERE (html complete course)* 👉 www.udemy.com/course/coding2go-html5-crashcourse/?referralCode=F017D565D3D3BE47B8BC *Get the best web hosting for your own website*: 👉 www.hostinger.com/coding2go *What You'll Learn...
Learn CSS Animations in 9 Minutes
มุมมอง 6Kหลายเดือนก่อน
Learn CSS animations in 8 minutes | Animations Crashcourse | every animation property explained | Loading Animation Project Tutorial Visit our Website for courses, projects, tutorials code examples 👉coding2go.com Deploy your own website with Hostinger 👉 www.hostinger.com/coding2go 🔥 Discount Code: CODING2GO Sources / Credits to: - developer.mozilla.org/en-US/docs/Web/CSS/animation - www.smashin...
These CSS PRO Tips & Tricks Will Blow Your Mind!
มุมมอง 139K2 หลายเดือนก่อน
10 MINDBLOWING CSS Tips and Tricks that solve typical JavaScript problems with CSS ONLY. You will learn elegant solutions for everyday css problems and productive shorthands for responsive web design, How to implement modern design trends such as glassmorphism or new morphism smooth scroll snapping in swiper, how to use the :checked pseudo-class to create eventListener in CSS only. How to fix a...
Build & Deploy a TODO APP with JavaScript
มุมมอง 5K4 หลายเดือนก่อน
🚀 Deploy the Todo App with Hostinger: www.hostinger.de/coding2go 👌 Coupon code: CODING2GO(10% discount on all web hosting plans with a duration of 12 months or more) In this JavaScript beginner project, we will build and deploy a todo application using HTML, CSS, and JavaScript (JS), and then upload it using the web hosting service Hostinger. You will learn important concepts such as CSS variab...
Create a RESPONSIVE NAVBAR with sidebar animation (CSS ONLY)
มุมมอง 39K5 หลายเดือนก่อน
👉 Get the best web hosting to deploy your website: www.hostinger.com/coding2go ✌️ Use our discount code CODING2GO to get 10% off on all web hosting packages with a duration of 12 months or more BEGINNERS START HERE: 👌 Learn HTML5 in one afternoon with our beginner course: www.udemy.com/course/coding2go-html5-crashcourse/?referralCode=F017D565D3D3BE47B8BC In this video we are going to create a r...
How to create a GRADIENT BORDER in CSS Tutorial
มุมมอง 11K6 หลายเดือนก่อน
👉 Get the best web hosting to deploy your websites: www.hostinger.com/coding2go ✌️ Use our discount code CODING2GO to get 10% off on all web hosting packages with a duration of 12 months or more In this HTML and CSS Tutorial you will learn how to apply a gradient to a border and how to create a glow gradient hover effect with the box-shadow property. This modern CSS button design can be impleme...
Learn HTML for beginners (create your first website)
มุมมอง 12K10 หลายเดือนก่อน
✨✨✨ Get the full course: www.udemy.com/course/coding2go-html5-crashcourse/?couponCode=CODING2G0 ✨✨✨ 👉 Get the best web hosting to deploy your websites: www.hostinger.com/coding2go ✌️ Use our discount code CODING2GO to get 10% off on all web hosting packages with a duration of 12 months or more Timestamps: 00:00 About the course 03:23 course outline 04:45 Lesson 1 - What is HTML? 08:00 Lesson 2 ...
How to create a popup in html (dialogs and modals)
มุมมอง 6Kปีที่แล้ว
👉 Get the best web hosting to deploy your websites: www.hostinger.com/coding2go ✌️ Use our discount code CODING2GO to get 10% off on all web hosting packages with a duration of 12 months or more If you've ever struggled with creating popups and modals, this video is your ultimate solution! Discover the game-changing HTML dialog element that revolutionizes the creation of popups and modals! Say ...
How to learn JavaScript in 2024 (ROADMAP)
มุมมอง 2.5Kปีที่แล้ว
How to learn JavaScript in 2024 (ROADMAP)
How to create a Responsive Navigation Bar (for beginners)
มุมมอง 344Kปีที่แล้ว
How to create a Responsive Navigation Bar (for beginners)
Create a glass effect in CSS (Glassmorphism)
มุมมอง 3.4Kปีที่แล้ว
Create a glass effect in CSS (Glassmorphism)
Yes there are Variables in CSS and they are AMAZING! | Custom Properties Tutorial
มุมมอง 1.8Kปีที่แล้ว
Yes there are Variables in CSS and they are AMAZING! | Custom Properties Tutorial
CSS Flexbox Tutorial for beginners
มุมมอง 9Kปีที่แล้ว
CSS Flexbox Tutorial for beginners
Learn CSS Basics in 10 Minutes (for beginners)
มุมมอง 14Kปีที่แล้ว
Learn CSS Basics in 10 Minutes (for beginners)
How to create tables in HTML
มุมมอง 2.6Kปีที่แล้ว
How to create tables in HTML
Learn HTML in 15 Minutes
มุมมอง 27Kปีที่แล้ว
Learn HTML in 15 Minutes

ความคิดเห็น

  • @kamisama4274
    @kamisama4274 53 นาทีที่ผ่านมา

    Bro you're my life saver😭🙏thank you so much i needed this for so long i couldn't understand it but this helped me so much❤

  • @pain_equals_growth
    @pain_equals_growth 2 ชั่วโมงที่ผ่านมา

    0:42 and 3:00

  • @serious_17_2
    @serious_17_2 2 ชั่วโมงที่ผ่านมา

    Its WEBPAGE not WEBSITE correct the title, btw nice explanation ❤

  • @oubaidharbi
    @oubaidharbi 4 ชั่วโมงที่ผ่านมา

    thank you for this video see you next video

  • @nurudeennajeem6605
    @nurudeennajeem6605 5 ชั่วโมงที่ผ่านมา

    You're the best. Thanks a lot

  • @rahul360_
    @rahul360_ 6 ชั่วโมงที่ผ่านมา

    Bro I really want to more videos like this... It's really helpful me❤

  • @jatinukey4062
    @jatinukey4062 7 ชั่วโมงที่ผ่านมา

    Literally this man explained this topic in just 5 minutes!!! Totally understood ❤

  • @arthur__565
    @arthur__565 7 ชั่วโมงที่ผ่านมา

    Padding funktioniert bei mir nicht. Woran liegt das ??

  • @TalesGrechi
    @TalesGrechi 8 ชั่วโมงที่ผ่านมา

    Nice tips!

  • @shibgatmahmud
    @shibgatmahmud 13 ชั่วโมงที่ผ่านมา

    What fonts and theme do you use in VSCode?

  • @GabbyEdema
    @GabbyEdema 15 ชั่วโมงที่ผ่านมา

    what if i want to use this kind of animation for my loading screen on my website how do i make it fade away when done ( which would show my index html)

  • @sanjaux
    @sanjaux 15 ชั่วโมงที่ผ่านมา

    Great tip on the localStorage, didn’t know about that and was thinking i’d need to do something more complicated to achieve that.

  • @TheWellington1997
    @TheWellington1997 15 ชั่วโมงที่ผ่านมา

    Amazing video, straight to the point, won a subscriber

  • @ameencoding
    @ameencoding 16 ชั่วโมงที่ผ่านมา

    I thanks youtube for showing me such a channel like this. Many thanks fabian 🙌🥰

  • @IcetipsVideos
    @IcetipsVideos 16 ชั่วโมงที่ผ่านมา

    Beautiful!!!

  • @dailynews7822
    @dailynews7822 18 ชั่วโมงที่ผ่านมา

    Nice

  • @erick-developer
    @erick-developer 19 ชั่วโมงที่ผ่านมา

    Thanks men, you are the goat

  • @user-sk9kl9bn1r
    @user-sk9kl9bn1r 20 ชั่วโมงที่ผ่านมา

    You always creating the best and hight quality coding tutorials :)

  • @halynakyryliuk8484
    @halynakyryliuk8484 20 ชั่วโมงที่ผ่านมา

    Amazing! Si much interesting tricks! Bravo!!!

  • @edutechab
    @edutechab 21 ชั่วโมงที่ผ่านมา

    How come you don't have 1 million subscribers?

  • @Darkest-Kn1ght
    @Darkest-Kn1ght 22 ชั่วโมงที่ผ่านมา

    I'm curious, I've been working on my own social networking site at the request of others tired of being suspended and banned. If I have a home feed full of messages, could this popup be displayed right on top of the message being replied to, or, will it always be displayed in one position on the page? Even slightly above the original message being replied to would be fine.

  • @stephenmatthew7869
    @stephenmatthew7869 วันที่ผ่านมา

    Dude .. this epic this Take my sub👊

  • @kYt0-cz3hk
    @kYt0-cz3hk วันที่ผ่านมา

    is there any way to acheive the same thing without using @property? maybe using css or js?

  • @coding2go
    @coding2go วันที่ผ่านมา

    The source code is now available on our website: coding2go.com

  • @havefun5519
    @havefun5519 วันที่ผ่านมา

    some new CSS features are great

  • @mhuzaifa6040
    @mhuzaifa6040 วันที่ผ่านมา

    Bro kindly make video on css grid

  • @robertodepasamonte3434
    @robertodepasamonte3434 วันที่ผ่านมา

    Excellent and very well presented tutorial on coding dark mode capability. Thank you for sharing. Could you please put the source code on codepen or provide a download link.

    • @coding2go
      @coding2go วันที่ผ่านมา

      Thank you for your kind words! I have now put the source code on our website coding2go.com to download✌

    • @robertodepasamonte3434
      @robertodepasamonte3434 วันที่ผ่านมา

      @@coding2go Thank you.

  • @crookinsane6808
    @crookinsane6808 วันที่ผ่านมา

    i often dont write comments but this video litrealy forced me to do so, your content is so awesome brother. instead of writing complicated js code you keep things simple where you can . absolutely loved this, Thanks

    • @coding2go
      @coding2go วันที่ผ่านมา

      Thank you! Your kind words are very appreciated 💙

  • @_a_r_un_
    @_a_r_un_ วันที่ผ่านมา

    Good Explanation 👍

  • @chetankalania4709
    @chetankalania4709 วันที่ผ่านมา

    bro suggest me a site from where i can download good color palette..........and also tell me from where do u take your color palette

    • @coding2go
      @coding2go วันที่ผ่านมา

      I come up with my own color palettes in Adobe when building the prototype. But there are also websites like coolors.co or colorhunt.co that provide good color palettes. Use realtimecolors.com to test your color palette on a demo website in real-time.

  • @RoliBeatzz
    @RoliBeatzz วันที่ผ่านมา

    Now this is how you make tutorials, Great job, awesome !❤

  • @user-wt3ef6md6j
    @user-wt3ef6md6j วันที่ผ่านมา

    vro ur tricks and logic behind coding is simply great thanks for sharing and this video also very informative and great keep growing and uploading these type of videos can u start uploding react videos also btw love ur videos and channel'

  • @younesdeveloper
    @younesdeveloper วันที่ผ่านมา

    so cool

  • @techwake360
    @techwake360 วันที่ผ่านมา

    Awesome

  • @DontFollowZim
    @DontFollowZim วันที่ผ่านมา

    It's neumorphism, not new morphism

  • @w3bpiyush_
    @w3bpiyush_ วันที่ผ่านมา

    Please start javascript your way of explaining is just 🔥👌

  • @AdamHarte
    @AdamHarte วันที่ผ่านมา

    Neumorphism not new morphism

  • @xoy5
    @xoy5 วันที่ผ่านมา

    how cool is that ! what next ?! web game programing in css instead of a javascript and a php I hope so

  • @georgejere2306
    @georgejere2306 วันที่ผ่านมา

    Everyday i wait for your posts, the gradient button i added in my classwork and it was just wow :)

  • @matousjirovec
    @matousjirovec วันที่ผ่านมา

    You create the best coding tutorials on youtube

  • @Runkang10
    @Runkang10 วันที่ผ่านมา

    I jumped to React and Next.js without learn basic JavaScript like eventlistener but I learn Advanced TypeScript. 😅

    • @coding2go
      @coding2go วันที่ผ่านมา

      Yeah I get that. Learning advanced frameworks can get so exciting that you skip a few steps along the way. But its always good to build a strong foundation by learning the basics thouroughly. That way understanding the advanced concepts will be much easier.

  • @mustasinbillah-u7d
    @mustasinbillah-u7d วันที่ผ่านมา

    thank you for this video

  • @abdulloh1071
    @abdulloh1071 วันที่ผ่านมา

    My brother thanks you for video💪🏻

  • @abdulloh1071
    @abdulloh1071 วันที่ผ่านมา

    My brother thanks you for video💪🏻

    • @coding2go
      @coding2go วันที่ผ่านมา

      My pleasure

  • @moonskined
    @moonskined วันที่ผ่านมา

    That's so coool!

  • @xoy5
    @xoy5 วันที่ผ่านมา

    cool af

  • @ShahriarCode
    @ShahriarCode วันที่ผ่านมา

    Man make more like thiss 🔥💥 I loved your Js addEventListner tutorial video that was a masterpiece You should make more js tutorial vidoes like that short and informative

  • @serious_17_2
    @serious_17_2 วันที่ผ่านมา

    you have inspired me so much, I have subscribed you and will learn from your every video.

    • @coding2go
      @coding2go วันที่ผ่านมา

      Awesome! Thank you 💙

  • @KoushikMrunal
    @KoushikMrunal วันที่ผ่านมา

    Bro content is just...🗿🔥

  • @codesthenos
    @codesthenos วันที่ผ่านมา

    but you repeat yourself A LOT, and now imagine we want to scale this to multiple brands, many more colors.... that's why react and techs like that were created, plus I'm not pro of CSS, but probably you can do this exact same thing without repeating that much the same code only changing a value