Implementing Dark Mode with Theme UI in React

In today’s digital landscape, providing users with a seamless and customizable experience is crucial. One aspect of this is the ability to switch between light and dark modes, which has become an essential feature in modern applications. In this article, we will explore how to implement dark mode functionality in a React application using Theme UI.

What is Theme UI?

Theme UI is a library that enables you to create themeable user interfaces using constraint-based design principles. It allows you to build custom component libraries, web applications, Gatsby themes, design systems, and more. With its powerful sx prop and native hooks, Theme UI makes it easy to handle color changes seamlessly.

Project Overview and Installation

To demonstrate the implementation of dark mode with Theme UI, we will create a simple React application that consists of a card with text and a title. The application will also feature a switch button to toggle between light and dark modes.

To get started, create a new React project using the following command:

npx create-react-app darkmode-tutorial

Next, install Theme UI and its dependencies by running the following command in the root folder of your project:

npm install theme-ui @emotion/react

Creating the Theme File

To use Theme UI, you need to create a theme file that defines your color schemes. Create a new file called theme.js in the src folder and add the following code:
“`javascript
const theme = {
colors: {
light: {
background: ‘#FFFFFF’,
text: ‘#000000’,
},
dark: {
background: ‘#282c34’,
text: ‘#FFFFFF’,
},
},
};

export default theme;
“`
This theme file defines two color schemes: light and dark. Each scheme has a background and text color.

Wrapping the Application with Theme UI

To use Theme UI in your application, you need to wrap your React app with the ThemeProvider component. Open the index.js file in the src folder and add the following code:
“`javascript
import { ThemeProvider } from ‘theme-ui’;
import theme from ‘./theme’;

function App() {
// …
}

ReactDOM.render(

,
document.getElementById(‘root’)
);
“
This code wraps theAppcomponent with theThemeProvidercomponent and passes thetheme` object as a prop.

Styling with App.css

Before we start working on the App.js file, let’s add some basic styles to make our application look nicer. Create a new file called App.css in the src folder and add the following code:
“`css
.App {
max-width: 400px;
margin: 40px auto;
padding: 20px;
border: 1px solid #ddd;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
font-size: 24px;
margin-bottom: 10px;
}
“
This code adds basic styles to theApp` component.

Working on App.js

Now that we have set up the theme and styles, let’s work on the App.js file. Open the file and add the following code:
“`javascript
import React, { useState } from ‘react’;
import { Box, Switch } from ‘theme-ui’;
import ‘./App.css’;

function App() {
const [colorMode, setColorMode] = useState(‘light’);

return (

);
}

export default App;
“
This code uses theuseStatehook to manage thecolorModestate. It also uses theBoxcomponent from Theme UI to create a container with a dynamic background color based on thecolorModestate. TheSwitch` component is used to toggle between light and dark modes.

That’s it! You have now implemented dark mode functionality in a React application using Theme UI.