Light and Dark Mode in a React App With CSS Styles

Easily add dark mode support to your app

Image credit: Author

This article highlights how to set up Light and Dark Mode in React application with SCSS modules.

In my personal opinion, I feel the presentation should be controlled only by the stylesheets and we must not add additional overhead in the React components (JS/JSX) to handle the theme changes.
Also, it will be better to configure the theme in the root component (Mostly App.js/App.tsx in react’s case)

Let’s create a react application using create-react-app with TypeScript configured.

npx create-react-app my-app-name --template typescript

Typescript is optional here. Feel free to create react application with normal JavaScript.

Next, Let’s install SCSS in our project using npm install node-sass.
Convert the existing .css files into .scss files and change any imports to use .scss.

SCSS is again optional here. We could achieve theme styling using normal CSS as well.

Creating a Theme Stylesheet

1. Create a styles folder within src and create a file called theme.scss

Now let’s define two class selectors for light and dark mode respectively with CSS Variables.

Here we have defined the colour variations for light and dark modes (Theme Color, Theme Page Background and Theme Text Color).
We could also move the colours (#000, #FFF etc) to a partial _variables.scss file for better readability and maintainability.

2. Import theme.scss into our App.tsx.

Next, let’s add a state variable “theme” to hold the current application mode (Line #7). Let’s also refer the state variable in the className (Line #10).

Add styles for<div className = {`App ${theme}`}> in App.scss using the theme variables. Depending on the selected theme, the background and color properties will get updated in runtime.

Feel free to add additional stylings as shown below.

Let’s start the application with the command npm start and view it in the browser.

Try changing the state variable to dark and check the output.

const [theme, setTheme] = useState('dark');

So Simple? In reality, we could associate a click action to toggle between light and dark mode. We could maintain the theme in a Context as well.

You can play around with the application here https://codesandbox.io/s/switching-between-light-and-dark-mode-5hf9w

Extending Theme to Components

For instance, let’s create a Button Component.
1. Create a folder called components inside the src folder.
2. Create another folder called button inside components and create two file — button.tsx and button.module.scss.

Folder Structure

Add the following code to button.tsx.

Now, let’s add some button styles. Observe how the background-color is provided. It is referred from the theme variable.
So when the light mode is on, the button color will be #A80000 (red) and when we switch to dark mode, it will appear in #A80000 (blue).

Similarly, we could have mode specific colors in theme.scss and use it across all pages and components.

Did you notice that button.tsx has no logic wrt. dark and light mode? The entire theming is taken care by the stylesheet.

Let’s include the Button in our App.tsx and view the output in light and dark mode.

Download Starter

Checkout this repository for the base react application with theme configuration.
Download it and run “npm i” to install all node-modules.
https://github.com/nijin-vinodan/react-starter-templates/tree/master/examples/starter-react-dark-light-mode