javascript 66 lines · 9 steps

Building a theme provider with React Context

A ThemeProvider that persists light/dark choice, follows the OS preference until the user overrides it, and shares state through context.

Explained by highlit

React Intermediate context hooks dark-mode localstorage media-queries

1import { createContext, useContext, useEffect, useState, useCallback } from 'react';
2 
3const ThemeContext = createContext(null);
4 
5const getInitialTheme = () => {
if (typeof window === 'undefined') return 'light';
const stored = window.localStorage.getItem('theme');
if (stored === 'light' || stored === 'dark') return stored;
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
10};
11 
12export function ThemeProvider({ children }) {
const [theme, setTheme] = useState(getInitialTheme);
const [hasStoredPreference, setHasStoredPreference] = useState(
  () => typeof window !== 'undefined' && window.localStorage.getItem('theme') != null
);
17 
useEffect(() => {
  const root = document.documentElement;
  root.classList.toggle('dark', theme === 'dark');
  root.style.colorScheme = theme;
}, [theme]);
23 
useEffect(() => {
  if (hasStoredPreference) return;
  const media = window.matchMedia('(prefers-color-scheme: dark)');
  const handleChange = (event) => setTheme(event.matches ? 'dark' : 'light');
  media.addEventListener('change', handleChange);
  return () => media.removeEventListener('change', handleChange);
}, [hasStoredPreference]);
31 
const toggleTheme = useCallback(() => {
  setTheme((current) => {
    const next = current === 'dark' ? 'light' : 'dark';
    window.localStorage.setItem('theme', next);
    return next;
  });
  setHasStoredPreference(true);
}, []);
40 
return (
  <ThemeContext.Provider value={{ theme, toggleTheme }}>
    {children}
  </ThemeContext.Provider>
);
46}
47 
48export function useTheme() {
const context = useContext(ThemeContext);
if (!context) throw new Error('useTheme must be used within a ThemeProvider');
return context;
52}
53 
54export function ThemeToggle() {
const { theme, toggleTheme } = useTheme();
return (
  <button
    type="button"
    onClick={toggleTheme}
    aria-label={`Switch to ${theme === 'dark' ? 'light' : 'dark'} mode`}
    aria-pressed={theme === 'dark'}
  >
    {theme === 'dark' ? '\u2600\ufe0f' : '\ud83c\udf19'}
  </button>
);
66}

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1A lazy state initializer lets you read localStorage or a media query once, safely, without re-running on every render.
2Guarding effects on SSR and on an explicit user preference keeps automatic behavior from fighting the user's choice.
3Throwing from the consumer hook turns a missing provider into a loud, immediate error instead of a silent null.

Related explainers

javascript

const express = require('express');
const router = express.Router();
const { pool } = require('../db');
const redis = require('../redis');

Building a health check endpoint in Express

health-check timeouts promise-race

Intermediate 9 steps

javascript

'use client';
 
import { useEffect } from 'react';
import * as Sentry from '@sentry/nextjs';

How a Next.js error boundary recovers

error-boundary error-handling observability

Intermediate 8 steps

javascript

const MAX_BATCH_SIZE = 20;
const FLUSH_INTERVAL = 5000;
const ENDPOINT = '/api/analytics';

Batching analytics events in the browser

batching buffering sendbeacon

Intermediate 10 steps

javascript

export function diffIds(current, desired) {
  const currentSet = new Set(current);
  const desiredSet = new Set(desired);

Diffing sets to sync group membership

set-operations diffing transactions

Intermediate 8 steps

javascript

class HistoryStack {
  constructor(initial = '', limit = 100) {
    this.past = [];
    this.present = initial;

Building an undo/redo history stack

undo-redo state-management debouncing

Intermediate 7 steps

javascript

import { useState, useCallback, useRef } from 'react';
 
function LikeButton({ postId, initialLiked, initialCount }) {
  const [liked, setLiked] = useState(initialLiked);