Главная
Study mode:
on
1
- Introduction
2
- Getting everything ready
3
- Setting the stage with CSS
4
- Adding custom properties
5
- Changing the theme on click
6
- Changing the aria-label on click
7
- adding the tooltip
8
- Animating the tooltip
9
- Animating the icon
10
- Changing the icon on page load
11
- Adding the pulse animation
12
- Using focus-visible to improve the tooltip
Description:
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.

Cloning Google Font's Light-Dark Mode Toggle

Kevin Powell
Add to list
0:00 / 0:00