Thinking on ways to solve a DARK/LIGHT THEME SWITCH

In today's GUI Challenge, @AdamArgyleInk shares thinking on a way to build a theme switch component. Often a website will allow switching the theme to something other than the system preference and these are thoughts on how to achieve that user experience.

Chapters:

  • 0:00 - Introduction
  • 0:30 - Overview
  • 3:10 - Debugging Corner
  • 3:36 - HTML
  • 7:40 - SVG
  • 8:59 - Mask
  • 10:00 - Animations
  • 11:51 - Theme Toggle CSS
  • 15:35 - Sun and Moon CSS
  • 19:37 - JavaScript
  • 23:45 - Recap

Resources:

Watch more GUI Challenges → https://goo.gle/GUIchallenges

Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs

Back to all episodes