Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

YouTube

Cloning Google Font's Light-Dark Mode Toggle

Kevin Powell via YouTube

Start learning Write review
Coursera Ad

AI, Data Science & Cloud Certificates from Google, IBM & Meta

Learn More → DataCamp Ad

Power BI Fundamentals - Create visualizations and dashboards from scratch

Learn More →

Overview

Google, IBM & Meta Certificates – 40% Off
One Coursera Plus subscription covers most Professional Certificates on Coursera.
Unlock All Certificates
This course demonstrates how to recreate Google Fonts’ light/dark theme toggle using CSS and JavaScript. It covers custom properties, animated icons and tooltips, theme switching, accessible labels, and focus-visible behavior.

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

Taught by

Kevin Powell

Reviews

Start your review of Cloning Google Font's Light-Dark Mode Toggle

Start learning

Never Stop Learning.

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

Sign up for free
Someone learning on their laptop while sitting on the floor.