Styling a React App with Theme Objects

Introduction

In web development, customizing the appearance of user interfaces is an essential aspect of building visually appealing and accessible applications. One way to achieve this is by using theme objects to customize the styling of React components. In this blog post, we will explore what theme objects are and how they can be used to customize the appearance of React components.

What is a Theme Object?

A theme object is a JavaScript object that contains properties and values that define the appearance of a user interface. It typically consists of a set of color, font, spacing, and other style-related properties that can be applied to different parts of an application.

Here's an example of a theme object:

Copycopy code to clipboard
1const theme = {
2  colors: {
3    primary: "#0077FF",
4    secondary: "#00C7FF",
5    tertiary: "#FFB6C1",
6  },
7  fonts: {
8    body: "Helvetica, Arial, sans-serif",
9    heading: "Georgia, serif",
10  },
11  spacing: {
12    small: "8px",
13    medium: "16px",
14    large: "24px",
15  },
16};

In this example, the theme object defines a set of colors, fonts, and spacing that can be used to style different parts of an application.

Why/When to Use Theme Objects?

Using theme objects provides a way to easily customize the appearance of an application, while maintaining consistency throughout the application. Here are some scenarios where using theme objects can be beneficial:

• Consistent styling: Theme objects provide a centralized location for defining the styling of an application. This helps ensure consistency in the appearance of different components throughout the application.

• Theming: Theme objects can be used to provide different visual themes to an application. For example, you can create a light theme and a dark theme, and allow users to switch between them.

• Accessibility: Using theme objects can make an application more accessible. For example, you can define a high contrast theme that makes it easier for users with visual impairments to use the application.

How to Use Theme Objects?

To use theme objects in your React application, follow these steps:

1. Create a theme object with the desired properties and values.

Copycopy code to clipboard
1const theme = {
2  colors: {
3    primary: "#0077FF",
4    secondary: "#00C7FF",
5    tertiary: "#FFB6C1",
6  },
7  fonts: {
8    body: "Helvetica, Arial, sans-serif",
9    heading: "Georgia, serif",
10  },
11  spacing: {
12    small: "8px",
13    medium: "16px",
14    large: "24px",
15  },
16};

2. Create a context to provide the theme object to child components.

Copycopy code to clipboard
1import React, { createContext } from "react";
2
3export const ThemeContext = createContext(theme);
4
5const ThemeProvider = ({ children }) => (
6  <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>
7);

In this example, we create a ThemeContext using the createContext function from React. We then create a ThemeProvider component that provides the ThemeContext to its child components using the Provider component.

3. Consume the theme object in child components using the useContext hook.

Copycopy code to clipboard
1import React, { useContext } from 'react';
2import { ThemeContext } from './theme-context';
3
4const Button = ({ children }) => {
5  const theme = useContext(ThemeContext);
6  const styles = {
7    backgroundColor: theme.colors.primary,
8    color: '#fff',
9    padding: theme.spacing.medium,
10    borderRadius: '4px',
11    cursor: 'pointer',
12 };
13
14  return <button style={styles}>{children}</button>;
15};
16
17In this example, we define a `Button` component that uses the `useContext` hook to consume the `ThemeContext`. We then use the properties defined in the `theme` object to style the button.
18
194. Wrap the application or specific components with the `ThemeProvider` component.
20
21```jsx
22import React from 'react';
23import { ThemeProvider } from './theme-context';
24import Button from './Button';
25
26const App = () => {
27  return (
28    <ThemeProvider>
29      <Button>Click me</Button>
30    </ThemeProvider>
31  );
32};
33
34export default App;

In this example, we wrap our Button component with the ThemeProvider component. This provides the theme object to the Button component and allows us to customize its appearance.

Light & Dark themes

Here's an example of how you can create a light and dark theme using the theme object we defined earlier:

Copycopy code to clipboard
1const lightTheme = {
2  colors: {
3    primary: "#0077FF",
4    secondary: "#00C7FF",
5    tertiary: "#FFB6C1",
6    background: "#FFFFFF",
7    text: "#000000",
8  },
9  fonts: {
10    body: "Helvetica, Arial, sans-serif",
11    heading: "Georgia, serif",
12  },
13  spacing: {
14    small: "8px",
15    medium: "16px",
16    large: "24px",
17  },
18};
19
20const darkTheme = {
21  colors: {
22    primary: "#0077FF",
23    secondary: "#00C7FF",
24    tertiary: "#FFB6C1",
25    background: "#000000",
26    text: "#FFFFFF",
27  },
28  fonts: {
29    body: "Helvetica, Arial, sans-serif",
30    heading: "Georgia, serif",
31  },
32  spacing: {
33    small: "8px",
34    medium: "16px",
35    large: "24px",
36  },
37};

In this example, we define a lightTheme and a darkTheme object that have the same properties as the original theme object, but with different values for the background and text properties.

You can then create a ThemeProvider component that accepts a theme prop and provides the theme context to its child components:

Copycopy code to clipboard
1import React, { createContext } from "react";
2
3export const ThemeContext = createContext();
4
5const ThemeProvider = ({ children, theme }) => (
6  <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>
7);

You can then wrap your app or a specific part of your app with the ThemeProvider component and pass in the desired theme:

Copycopy code to clipboard
1import React from "react";
2import { ThemeProvider } from "./theme-context";
3import { lightTheme, darkTheme } from "./themes";
4
5const App = () => {
6  const [isDarkMode, setIsDarkMode] = useState(false);
7
8  const handleToggleTheme = () => {
9    setIsDarkMode(!isDarkMode);
10  };
11
12  return (
13    <ThemeProvider theme={isDarkMode ? darkTheme : lightTheme}>
14      <button onClick={handleToggleTheme}>
15        {isDarkMode ? "Switch to Light Theme" : "Switch to Dark Theme"}
16      </button>
17      <h1>Hello World</h1>
18    </ThemeProvider>
19  );
20};
21
22export default App;

In this example, we use state to toggle between the light and dark themes when the button is clicked. When the isDarkMode state is true, we pass the darkTheme object to the ThemeProvider component, and when it's false, we pass the lightTheme object.

This way, we can easily switch between different themes in our application.

Review

Using theme objects to customize the appearance of React components provides an easy way to maintain consistency and customize the styling of an application. By defining a centralized location for styling properties, you can ensure that different components throughout the application have a consistent appearance. Additionally, theme objects can be used to provide different visual themes to an application and make it more accessible. To use theme objects in a React application, create a context to provide the theme object to child components, consume the theme object in child components using the useContext hook, and wrap the application or specific components with the ThemeProvider component.