A Quick Guide on How I Implemented Dark Mode in React

Image for post
Image for post

Where To Keep Track of the darkMode State?

import React, { Container } from 'react'
// other imports here including component imports
export default class MainContainer extends Component { constructor() {
super()
this.state = {
darkMode: false
}
}
handleDarkModeToggle = (currentDarkMode) => {
this.setState({ darkMode: !currentDarkMode})
}
if (this.state.darkMode) {
// if darkMode === true return whatever I want in dark mode
<MiscComponent darkMode={this.state.darkMode} />
<DarkModeToggleComponent
handleDarkModeToggle={this.handleDarkModeToggle}
/>
} if (!this.state.darkMode) {
// if darkMode === false return whatever I want in light mode
<MiscComponent darkMode={this.state.darkMode} />
<DarkModeToggleComponent
handleDarkModeToggle={this.handleDarkModeToggle}
/>
}
}

How to Make the Toggle Work?

Image for post
Image for post
onChange={() => props.handleDarkModeToggle(props.darkMode)}

Full-Stack Developer, Software Engineer, and UX/UI Aficionado

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store