Implementing Dark Mode with Theme UI in React

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:

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:

import { ThemeProvider } from 'theme-ui';
import theme from './theme';

function App() {
  //...
}

ReactDOM.render(
  <ThemeProvider theme={theme}>
    <App />
  </ThemeProvider>,
  document.getElementById('root')
);

This code wraps the App component with the ThemeProvider component and passes the theme 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:

.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 the App 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:

import React, { useState } from 'eact';
import { Box, Switch } from 'theme-ui';
import './App.css';

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

  return (
    <Box
      sx={{
        backgroundColor: colorMode === 'light'? 'light.background' : 'dark.background',
      }}
    >
      <h1>Dark Mode Tutorial</h1>
      <p>This is a sample text.</p>
      <Switch
        onChange={(e) => setColorMode(e.target.checked? 'dark' : 'light')}
      />
    </Box>
  );
}

export default App;

This code uses the useState hook to manage the colorMode state. It also uses the Box component from Theme UI to create a container with a dynamic background color based on the colorMode state. The Switch 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.