Theme switcher

JavaScript

Easy

Objective

Implement a theme switcher to toggle between light and dark themes on a webpage

Requirements

You may use Vanilla JS or React
Define two distinct themes: light and dark
1. Each should have its own set of colours for background, text, headers, and links
Add a toggle button or switch allowing the user to switch between each theme at will
Save the users theme preference to localStorage or a cookie
1. The page should remember the user's preference when the user revisits the page

Starting code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Theme Switcher</title>
</head>
<body>

    <main>
        <h1>Welcome to the Theme Switcher Demo page</h1>
        <p>This is a example webpage to demonstrate theme switching.</p>
        <a href="#">Example Link</a>
    </main>
</body>
</html>

Evaluation Criteria

If I gave you this test, here's what I'd be looking for:

A good method to manage theme variables, either a CSS-in-JS solution, or CSS variables
The two themes should be visually appealing
The theme switcher should correctly store state and remember it when the user revisits the page
1. Not just on page refresh, on browser window close and reopen

Bonus points:

If you used the prefers-color-scheme media query to set the initial theme based on the browser default.
If both light and dark themes are accessible to AA, with proper contrast ratios to the WCAG guidelines

Click to reveal