Easy Dark Mode (and Multiple Color Themes!) in React

This guide demonstrates a straightforward dark mode implementation in a React application, focusing on ease of use and team onboarding. It avoids complex CSS strategies and leverages CSS variables and data attributes for a clean, efficient solution.

The challenge of managing styles and implementing dark mode in a large React project often leads to complex solutions. While many options exist, they frequently rely on specific CSS methodologies or frameworks. This approach prioritizes simplicity and speed, making it ideal for teams of varying skill levels.

An improved method, combining CSS variables with the useLocalStorage hook, provides a robust and user-friendly theming system. This tutorial walks you through setting up and running this system from scratch, showcasing its effectiveness in a new React app. Furthermore, it demonstrates integration with react-scoped-css for enhanced CSS organization.

Project Setup

This guide assumes basic familiarity with CSS, JavaScript, and React. Ensure you have Node and npm installed. Create a new React app using:

npx create-react-app easy-react-themes --template typescript

(Replace easy-react-themes with your project name; omit --template typescript for JavaScript). Open the project in your code editor (e.g., VS Code using cd easy-react-themes; code .) and start the development server (npm start). Finally, install use-local-storage:

npm i use-local-storage

Code Implementation

Clear the contents of App.css. In index.css, define your themes using CSS variables:

:root {
  --background: white;
  --text-primary: black;
  --text-secondary: royalblue;
  --accent: purple;
}
[data-theme='dark'] {
  --background: black;
  --text-primary: white;
  --text-secondary: grey;
  --accent: darkred;
}

This utilizes CSS custom properties (variables) and data attributes. The [data-theme='dark'] selector overrides the :root variables when the data-theme attribute is set to 'dark'.

In App.tsx, import useLocalStorage:

import useLocalStorage from 'use-local-storage';

Then, manage theme state:

const defaultDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
const [theme, setTheme] = useLocalStorage('theme', defaultDark ? 'dark' : 'light');

This uses useLocalStorage to persist theme selection across sessions, respecting browser preferences. The data-theme attribute is applied to the top-level <div>: <pre class="brush:php;toolbar:false">&lt;div data-theme=&quot;{theme}&quot;&gt; {/* Your app content here */} &lt;/div&gt;</pre> <p>Style your components in <code>App.css using the CSS variables:

.App {
  color: var(--text-primary);
  background-color: var(--background);
  /* ...other styles... */
  transition: all .5s;
}
button {
  /* ...button styles using CSS variables... */
  transition: all .5s;
}

This ensures styles update smoothly when the theme changes. Add a button to toggle the theme.

Expanding the Application

Add a new component (e.g., a colored square) to demonstrate the system's scalability. Import this component into App.tsx.

Bonus: Integrating with React Scoped CSS

For improved CSS organization, integrate react-scoped-css. Follow the installation instructions for CRACO and craco-plugin-scoped-css. Rename your CSS files (e.g., app.css to app.scoped.css) and update imports accordingly. Crucially, leave index.css unscoped to ensure global application of CSS variables.

This approach offers a simple, effective, and maintainable solution for implementing dark mode and multiple themes in React applications. The GitHub repository and live demo provide further resources.