Code Explainers

Code explainers tagged #dark-mode

javascript
const STORAGE_KEY = "theme-preference";
 
function getSystemTheme() {
  return window.matchMedia("(prefers-color-scheme: dark)").matches

Building a dark-mode toggle that respects the OS

dark-mode localstorage matchmedia
Intermediate 8 steps
javascript
import { createContext, useContext, useEffect, useState, useCallback } from 'react';
 
const ThemeContext = createContext(null);
 

Building a theme provider with React Context

context hooks dark-mode
Intermediate 9 steps