Creating a Dark Mode Switcher With CSS and JavaScript
In this short course, you’ll learn how to create a switcher to enable users to switch between dark and light mode on a website.
► Download dark mode scripts and plugins from CodeCanyon: https://codecanyon.net/search/dark%20mode?utm_campaign=yt_tutsplus_Xk12JtYG8rw&utm_medium=referral&utm_source=youtube.com&utm_content=description
Nowadays, both macOS and Windows support dark and light UIs; iOS and Android do the same for other devices. And an increasing number of websites allow users to switch between dark and light modes (many people find darker UIs easier on the eyes, and even on energy bills!).
Learn how to create a dark mode switcher using CSS and JavaScript in this video. Here's what we'll cover:
00:00 Welcome to the course!
03:07 The project so far
07:07 Creating and styling the theme switcher
17:12 Adding a dark theme to our page
24:51 Making the Theme Switcher Functional
Relevant Links:
• Source Files: https://github.com/tutsplus/Creating-a-Dark-Mode-Switcher-with-CSS-and-JavaScript/archive/refs/heads/main.zip
• Can I Use prefers-color-scheme: https://caniuse.com/prefers-color-scheme
• Can I Use CSS Variables: https://caniuse.com/css-variables
• Entypo+ Icon Set: https://iconset.io/set/entypo
• Ionicons Icon Set: https://iconset.io/set/ionicons
• How to Create a WordPress Coming Soon Page: https://webdesign.tutsplus.com/tutorials/elementor-coming-soon-page-for-wordpress--cms-36633?utm_campaign=yt_tutsplus_Xk12JtYG8rw&utm_medium=referral&utm_source=youtube.com&utm_content=description
• Chair Image: https://elements.envato.com/chair-JTDVE8K?utm_campaign=yt_tutsplus_Xk12JtYG8rw&utm_medium=referral&utm_source=youtube.com&utm_content=description
• Armchair Logo: https://elements.envato.com/logo-armchair-furniture-chair-negative-space-style-ZVX9PE?utm_campaign=yt_tutsplus_Xk12JtYG8rw&utm_medium=referral&utm_source=youtube.com&utm_content=description
• modern-normalize: https://github.com/sindresorhus/modern-normalize
• Poppins Font: https://fonts.google.com/specimen/Poppins
► Download unlimited photos, fonts, and templates with Envato Elements: https://elements.envato.com/?utm_campaign=yt_tutsplus_Xk12JtYG8rw&utm_medium=referral&utm_source=youtube.com&utm_content=description
Read more web design tutorials on Envato Tuts+: https://webdesign.tutsplus.com/?utm_campaign=yt_tutsplus_Xk12JtYG8rw&utm_medium=referral&utm_source=youtube.com&utm_content=description
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Envato Tuts+
Discover free how-to tutorials and online courses. Design a logo, create a website, build an app, or learn a new skill: https://tutsplus.com/?utm_campaign=yt_tutsplus_Xk12JtYG8rw&utm_medium=referral&utm_source=youtube.com&utm_content=description
Envato Elements
All the creative assets you need under one subscription. Customize your project by adding unique photos, fonts, graphics, and themes.
► Download Unlimited Stock Photos, Fonts & Templates with Envato Elements: https://elements.envato.com/?utm_campaign=yt_tutsplus_Xk12JtYG8rw&utm_medium=referral&utm_source=youtube.com&utm_content=description
► Subscribe to Envato Tuts+ on YouTube: https://www.youtube.com/tutsplus
► Follow Envato Tuts+ on Twitter: https://twitter.com/tutsplus
► Follow Envato Tuts+ on Facebook: https://www.facebook.com/tutsplus
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Видео Creating a Dark Mode Switcher With CSS and JavaScript канала Envato Tuts+
► Download dark mode scripts and plugins from CodeCanyon: https://codecanyon.net/search/dark%20mode?utm_campaign=yt_tutsplus_Xk12JtYG8rw&utm_medium=referral&utm_source=youtube.com&utm_content=description
Nowadays, both macOS and Windows support dark and light UIs; iOS and Android do the same for other devices. And an increasing number of websites allow users to switch between dark and light modes (many people find darker UIs easier on the eyes, and even on energy bills!).
Learn how to create a dark mode switcher using CSS and JavaScript in this video. Here's what we'll cover:
00:00 Welcome to the course!
03:07 The project so far
07:07 Creating and styling the theme switcher
17:12 Adding a dark theme to our page
24:51 Making the Theme Switcher Functional
Relevant Links:
• Source Files: https://github.com/tutsplus/Creating-a-Dark-Mode-Switcher-with-CSS-and-JavaScript/archive/refs/heads/main.zip
• Can I Use prefers-color-scheme: https://caniuse.com/prefers-color-scheme
• Can I Use CSS Variables: https://caniuse.com/css-variables
• Entypo+ Icon Set: https://iconset.io/set/entypo
• Ionicons Icon Set: https://iconset.io/set/ionicons
• How to Create a WordPress Coming Soon Page: https://webdesign.tutsplus.com/tutorials/elementor-coming-soon-page-for-wordpress--cms-36633?utm_campaign=yt_tutsplus_Xk12JtYG8rw&utm_medium=referral&utm_source=youtube.com&utm_content=description
• Chair Image: https://elements.envato.com/chair-JTDVE8K?utm_campaign=yt_tutsplus_Xk12JtYG8rw&utm_medium=referral&utm_source=youtube.com&utm_content=description
• Armchair Logo: https://elements.envato.com/logo-armchair-furniture-chair-negative-space-style-ZVX9PE?utm_campaign=yt_tutsplus_Xk12JtYG8rw&utm_medium=referral&utm_source=youtube.com&utm_content=description
• modern-normalize: https://github.com/sindresorhus/modern-normalize
• Poppins Font: https://fonts.google.com/specimen/Poppins
► Download unlimited photos, fonts, and templates with Envato Elements: https://elements.envato.com/?utm_campaign=yt_tutsplus_Xk12JtYG8rw&utm_medium=referral&utm_source=youtube.com&utm_content=description
Read more web design tutorials on Envato Tuts+: https://webdesign.tutsplus.com/?utm_campaign=yt_tutsplus_Xk12JtYG8rw&utm_medium=referral&utm_source=youtube.com&utm_content=description
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Envato Tuts+
Discover free how-to tutorials and online courses. Design a logo, create a website, build an app, or learn a new skill: https://tutsplus.com/?utm_campaign=yt_tutsplus_Xk12JtYG8rw&utm_medium=referral&utm_source=youtube.com&utm_content=description
Envato Elements
All the creative assets you need under one subscription. Customize your project by adding unique photos, fonts, graphics, and themes.
► Download Unlimited Stock Photos, Fonts & Templates with Envato Elements: https://elements.envato.com/?utm_campaign=yt_tutsplus_Xk12JtYG8rw&utm_medium=referral&utm_source=youtube.com&utm_content=description
► Subscribe to Envato Tuts+ on YouTube: https://www.youtube.com/tutsplus
► Follow Envato Tuts+ on Twitter: https://twitter.com/tutsplus
► Follow Envato Tuts+ on Facebook: https://www.facebook.com/tutsplus
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Видео Creating a Dark Mode Switcher With CSS and JavaScript канала Envato Tuts+
Показать
Комментарии отсутствуют
Информация о видео
Другие видео канала
How to Create an Inflated 3D Frilly Text Effect in Adobe PhotoshopCollage Animation After Effects Tutorial | FREE COURSE10 Tips for Designing High-Impact Magazines | FREE COURSEPractical React Fundamentals | FREE COURSEA to Z of Graphic Design Software: InDesign, Affinity Designer and More! (Free & Premium)15 Tips & Tricks All Illustrator Users Should KnowThe Principles of Design | FREE COURSE4 Easy Tips for Color Correction in Premiere ProHow to Make the Best Magazine Cover Design (& Learn the Anatomy of a Magazine Cover)How to Edit Audio in Premiere Pro | FREE COURSE (Over 5 Hours!)2D Weight Animation for Beginners | Blender Grease Pencil TutorialLearn Modern JavaScript Fundamentals in 7 Hours! FREE COURSEHow to Make a Promotional Video | Free CourseAffinity Publisher for Beginners | FREE COURSEHow to Create a Summer Club Flyer in Adobe InDesignRules of Composition | FREE COURSEThe Ultimate Guide to Color Grading in Premiere Pro | FREE COURSEHow to Edit a Podcast | Reaper TutorialDesign Styles Across the Decades | Short CourseTypography Poster Design in Adobe Photoshop | FREE COURSE