Search
author logo
Matt Glissmann

Dark Mode Theming in Grommet: Adding dark and light theme modes

October 21, 2020

f1lightdark2

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.

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.

f10thememodetoggle

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={theme} themeMode="dark">

This should result in:

f4part 2 toggle

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={theme} themeMode={darkMode ? "dark" : "light"} >

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

f2thememodetogglemid

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.

f14part 2 non animated white theme toggle

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.

Related

author logo
Joel Baxter & Kartik Mathur & Don Wake

Building Dynamic Machine Learning Pipelines with KubeDirector

Aug 14, 2020
author logo
Dale Rensing

Open Source Contributor Explains How KubeDirector Empowers Data Intensive Apps

Mar 18, 2021
author logo
Philippe de Cuzey

From Pig to Spark: An Easy Journey to Spark for Apache Pig Developers

Mar 9, 2021
author logo
Martijn Kieboom

Kubernetes Tutorial part 2 of 3: How to Install and Deploy Applications at Scale on K8s

Mar 31, 2021
author logo
Nicolas Perez

Apache Spark as a Distributed SQL Engine

Jan 7, 2021
author logo
Carol McDonald

Apache Spark Machine Learning Tutorial

Nov 25, 2020
author logo
Nicolas Perez

Apache Spark Packages, from XML to JSON

Dec 11, 2020
author logo
Dale Rensing

App DEV and the HPE Container Platform

Apr 9, 2020

HPE Developer Newsletter

Stay in the loop.

Sign up for the HPE Developer Newsletter or visit the Newsletter Archive to see past content.

By clicking on “Subscribe Now”, I agree to HPE sending me personalized email communication about HPE and select HPE-Partner products, services, offers and events. I understand that my email address will be used in accordance with HPE Privacy Statement. You may unsubscribe from receiving HPE and HPE-Partner news and offers at any time by clicking on the Unsubscribe button at the bottom of the newsletter.

For more information on how HPE manages, uses, and protects your personal data please refer to HPE Privacy Statement.