In Part 1 of this 3-part series on Grommet’s support for light and dark modes, I covered setting up a simple Grommet app and applying a theme to that app. Here in Part 2, I’ll guide you through the steps required to implement dark/light theme modes. At the conclusion of this post, the app will have some basic UI components and a control to toggle the interface between light and dark modes.

• Part 1 - How to set up and apply a Theme
• Part 2 - Adding dark and light theme modes
• Part 3 - Theme color customizations

In this post, I’ll cover content regarding adding a theme toggle button, including:

• Introducing the themeMode prop, which allows specifying which version of the theme the app renders.
• Adding a button to the interface to serve as a control to toggle the value that gets passed to themeMode.

Adding a Theme Toggle Button

For this exercise, you’ll continue modifying your app from the example you created in Part 1 of this series. If you are catching up and joining midstream, you can reference this Codesandbox.

First, I’m going to show you how to add a button that, when clicked, will toggle the theme between light and dark modes.

In App.js:

Add the themeMode prop to the <Grommet> component and set its value to "dark". The value referenced by themeMode specifies whether Grommet should use the dark or light versions of the theme.

  <Grommet full theme={grommet} themeMode="dark">

This should result in:

Next, add a button to serve as the toggle control.

Import Button as a component from Grommet

import { Grommet, Anchor, Box, Button, List, Heading, Paragraph, Text } from "grommet";

Below the <List>, add a theme toggle button with some formatting props and an onClick handler.

  <Button
    label="Toggle Theme"
    primary
    alignSelf="center"
    margin="large"
    onClick={() => {}} 
  />

Enable Toggling of ThemeMode’s State

Next, make the theme mode dynamic by adding a variable darkMode to hold the current theme mode, storing it in the component’s state, and adjusting the state each time the theme toggle button is clicked.

Create variable darkMode and its state using React’s useState Hook.

const App = () => {
 const [darkMode, setDarkMode] = React.useState(false);
  return (
   <Grommet full theme={grommet} themeMode="dark">

Modify the button’s onClick handler to toggle darkMode between true and false.

<Button
    label="Toggle Theme"
    primary
    alignSelf="center"
    margin="large"
    onClick={() => setDarkMode(!darkMode)}
  />

Next, replace themeMode’s value to be “dark” when darkMode is true, and “light” when darkMode is false.

<Grommet full theme={grommet} themeMode={darkMode ? "dark" : "light"} >

The theme mode toggling should be good to go. Give the toggle button a few clicks!

Incorporating More Visual Interest

Finally, to better demonstrate a changing theme, let’s add some more interesting visuals to the application.

Remove the following from App.js

   <Paragraph>We will be modifying this project to:</Paragraph>
    <List data={projectTasks}>
      {(task, index) => (
        <Text key={index}>
          {index + 1}) {task}
        </Text>
      )}
    </List>

Then, import the DemoSection from DemoSection.js and add it below the toggle button. DemoSection contains a sampling of Grommet components to better demonstrate the effect themeMode has across components.

  import { DemoSection } from "./DemoSection";

Then add DemoSection directly beneath this button.

      <Button
         label="Toggle Theme"
         primary
         alignSelf="center"
         margin="large"
         onClick={() => setDarkMode(!darkMode)}
       />
       <DemoSection />

At this point, your code and resulting app should resemble what is shown in this Codesandbox.

As quick review, here’s what we’ve done to modify the app:

• Added themeMode as a prop on the <Grommet> component. The value provided to themeMode specifies which mode of the theme to use.
• Created a state variable called darkMode to store whether the theme should currently be in dark mode.
• Enabled the value of the themeMode prop to update when the value of darkMode changes.
• Added a <Button> to serve as control to toggle the theme mode by toggling the state of darkMode.
• Lastly, made the app interface a bit more interesting to demonstrate how various components are affected by toggling the themeMode. That’s it for Part 2! In Part 3, I’ll demonstrate how to customize a theme with custom dark and light mode colors. Don’t forget to check back at the HPE DEV blog to catch Part 3 of this series. Again, if you have any questions, please feel free to reach out to me and others in the Grommet group on our Slack channel.