Cloning Google Font's Light-Dark Mode Toggle

Overview

Save Big on Coursera Plus. 7,000+ courses at $160 off. Limited Time Only!

Grab it

Learn how to clone Google Font's light/dark mode toggle button in this comprehensive 52-minute tutorial video. Explore CSS techniques for setting up the toggle, implementing custom properties, and creating dynamic theme changes. Master the art of adding and animating tooltips, manipulating icons, and enhancing user experience with focus-visible improvements. Follow along as the instructor guides you through each step, from initial setup to advanced animations, providing valuable insights and practical coding examples throughout the process.

Syllabus

- Introduction
- Getting everything ready
- Setting the stage with CSS
- Adding custom properties
- Changing the theme on click
- Changing the aria-label on click
- adding the tooltip
- Animating the tooltip
- Animating the icon
- Changing the icon on page load
- Adding the pulse animation
- Using focus-visible to improve the tooltip