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.