Darkmode Using React Context

This is an example app I made using create-react-app to show implementing darkmode using react context with hooks & localStorage.

Features #

• Supports prefers-color-scheme
• Fades to Black
• Uses localStorage
• Uses React Hooks
• Uses React State
• Uses React Context

Context #

Context provides a way to pass data through the component tree without having to pass props down manually at every level.

📝 Context in React Documentation

Use createContext to initialize react context.

export const ThemeContext = createContext();

Every Context object comes with a Provider React component that allows consuming components to subscribe to context changes.

Wrap the content in App.js inside of the Context.Provider element.

Toggle State #

Use useState to toggle the state of darkMode.

const [darkMode, setdarkMode] = useState();
const toggleDark = () => {
  setdarkMode(!darkMode)
}

Initialize On Component Load #

Use useEffect to load the main functions for toggling state once the component is loaded.

	useEffect(() => {
		setdarkMode(false)
		const lsDark = JSON.parse(localStorage.getItem('darkMode'))
    if (lsDark) {
      setdarkMode(lsDark)
    }
	}, [])

Store Setting #

One of the easiest ways to store a setting is to utilize localStorage using localStorage.setItem & localStorage.getItem.

Supporting Browser Option #

Most browsers support prefers-color-scheme option which allows sites to automatically switch to darkmode without user interaction.

This is a boolean value so we just need to check if it equals true.

const prefersDarkMode = () =>
  window.matchMedia('(prefers-color-scheme: dark)').matches === true

Component #

Creating a component to toggle darkMode is pretty simple as state is just a bool.

The only thing we need to code in is a check to toggle the moon & sun icons.

const ToggleTheme = () => {
	const { darkMode, toggleDark } = useContext(ThemeContext);
	return (
		<div className="darkmode-container">
			<button className="toggle-darkmode" onClick={toggleDark}>
			{darkMode ? (
				<img src={sun} className="sun-icon" alt="sun-icon" />
			) : (
				<img src={moon} className="moon-icon" alt="moon-icon" />
			)}
			</button>
 		</div>
	)
}

This project can be downloaded from github.

Download