Cloning Google Font's Light-Dark Mode Toggle

Cloning Google Font's Light-Dark Mode Toggle

Kevin Powell via YouTube Direct link

- Using focus-visible to improve the tooltip

12 of 12

12 of 12

- Using focus-visible to improve the tooltip

Class Central Classrooms beta

YouTube videos curated by Class Central.

Classroom Contents

Cloning Google Font's Light-Dark Mode Toggle

Automatically move to the next video in the Classroom when playback concludes

  1. 1 - Introduction
  2. 2 - Getting everything ready
  3. 3 - Setting the stage with CSS
  4. 4 - Adding custom properties
  5. 5 - Changing the theme on click
  6. 6 - Changing the aria-label on click
  7. 7 - adding the tooltip
  8. 8 - Animating the tooltip
  9. 9 - Animating the icon
  10. 10 - Changing the icon on page load
  11. 11 - Adding the pulse animation
  12. 12 - Using focus-visible to improve the tooltip

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.