Themes on the Web

To ensure theme preferences persist across page reloads, the selected theme is stored in the browser's local storage. Whenever a theme is applied, it's saved in local storage. On page load, the JavaScript checks for a previously saved theme and applies it, defaulting to the 'light' theme if no preference is found. This enhances user experience by maintaining their chosen theme.

A quick recap summarizes the process: defining root styling and theme-specific styles with CSS variables, using JavaScript to switch themes by changing the body's class name based on user selection, and leveraging local storage to save and retrieve theme preferences for a persistent experience. This method provides a flexible and efficient way to manage web page themes.

This video introduces how to create dynamic themes for HTML and CSS pages. The goal is to allow users to change the look and feel of a website with a simple click, demonstrated with a dropdown menu offering light, dark, and retro themes for a sample box element. CSS variables, declared in a ':root' collection, are used for styling elements like background color, text color, and accent color. These variables make it easy to modify styles consistently across the site.

Three distinct themes—light, dark, and retro—are created by overriding the root CSS variables within specific class selectors (e.g., '.theme-light', '.theme-dark', '.theme-retro'). Each theme defines unique values for background, text, and accent colors, allowing for drastically different visual styles. The light theme largely mirrors the default root styles, while the dark and retro themes introduce new color palettes.

JavaScript is used to handle user interactions with the theme selection dropdown. An event listener is attached to the select element to detect changes. A `applyTheme` function is created that takes the selected theme as an argument and dynamically updates the `className` of the `document.body` element. This change in the body's class activates the corresponding CSS theme rules defined earlier, switching the website's appearance.