YoVDO

How to Create a Theme Switcher With HTML & CSS

Offered By: Kevin Powell via YouTube

Tags

HTML & CSS Courses Computer Science Courses Web Development Courses Javascript Courses HTML Courses User Experience Design Courses localStorage Courses

Course Description

Overview

Learn how to create a theme switcher using HTML and CSS in this comprehensive tutorial video. Explore the power of custom properties and the :has() selector to easily implement color theming. Discover how to save user preferences using localStorage and implement a fallback for browsers without :has() support. Follow along as the instructor guides you through setting up the color theme selector, styling the picker, adding functionality, and handling browser compatibility. Gain practical insights into creating visually appealing and user-friendly theme switching functionality for your web projects.

Syllabus

- Introduction
- What we’re starting with
- Setting up the color theme selector
- Hiding the labels
- Styling the color theme picker
- Adding functionality with :has
- Using localStorage to remember the users choice
- Adding a fallback for when there is no :has support
I should have made separate selectors here, as this won't work in Firefox - see codepen in description for a working version
Because I moved this here, the theme should have been changed to activeTheme - see codepen in description for a working version


Taught by

Kevin Powell

Related Courses

Probabilistic Graphical Models 1: Representation
Stanford University via Coursera
Computer Security
Stanford University via Coursera
Intro to Computer Science
University of Virginia via Udacity
Introduction to Logic
Stanford University via Coursera
Internet History, Technology, and Security
University of Michigan via Coursera