Jump to content
Search In
  • More options...
Find results that contain...
Find results in...

Cloning Google Font's Light/Dark Mode Toggle

Views: 352 | Comments: 1   

Not too long ago, someone asked me if I could clone the Google Font theme toggle button, and after looking at it, it looked like a lot of fun to try and do, so I took on the challenge!

🔗 Links

✅ Google Fonts: https://fonts.google.com/
✅ My finished code: https://codepen.io/kevinpowell/pen/Po...

⌚ Timestamps

00:00 - Introduction
00:55 - Getting everything ready
03:14 - Setting the stage with CSS
07:08 - Adding custom properties
10:36 - Changing the theme on click
15:01 - Changing the aria-label on click
18:04 - adding the tooltip
23:22 - Animating the tooltip
27:27 - Animating the icon
35:06 - Changing the icon on page load
40:48 - Adding the pulse animation
50:00 - Using focus-visible to improve the tooltip


User Feedback

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Create New...