Hackernoon logoImplement Dark Mode in Your React Apps Using SCSS [A Step By Step Guide] by@adebola

Implement Dark Mode in Your React Apps Using SCSS [A Step By Step Guide]

Implementing dark mode is as simple as calling a toggle on your classes. You can use this same logic in your vanilla Javascript apps too. We will be writing our very basic styles in SCSS — it’s just cleaner. With SCSS, we can use variable names in our stylesheet. We also want to change the colour of our button in dark mode to reflect the dark mode theme. We need to use a button that toggles our dark mode classes off and on and on so we can update the text appropriately.
image
Adebola Adeniran Hacker Noon profile picture

@adebolaAdebola Adeniran

I'm a full-stack developer with love for Ruby-on-Rails and React. Previously a student @microverse

Implementing dark mode is as simple as calling a toggle on your classes.

Here’s a simple example to add dark mode to your React apps. You can use this same logic in your vanilla Javascript apps too.

  • Create a new react app.
  • Create a components folder within your src folder.
  • Create a component called Hello.jsx inside the components folder.
  • Your file structure should look like src > components > Hello.jsx

Now inside the Hello.jsx component, we will be doing a couple of things.

We will have a button that toggles our dark mode classes off and on. we will also keep track of when the button has been clicked so we can update the button text appropriately. i.e our button should say “Switch to Light Mode” when we are in dark mode and vice versa.

image

Now, let’s write our handleDarkMode function. We also want to change the colour of our button in dark mode.

image

So far, our page looks like below. I’m using google fonts so my text looks a bit different.

image

Now, it’s time to write our styles.

We will be writing our very basic styles in SCSS — it’s just cleaner.

First, install node-sass so that our styles can be compiled to css.

```npm install node-sass```

Create a styles.css folder inside the src folder and import it inside our Hello component.

```import "../styles/Hello.scss";```

I’ll be using twitter’s dark mode theme colors. With SCSS, we can use variable names in our stylesheet.

image

Now, here’s before dark mode.

image

And after dark mode ...

image
Adebola Adeniran Hacker Noon profile picture
by Adebola Adeniran @adebola. I'm a full-stack developer with love for Ruby-on-Rails and React. Previously a student @microverseRead my stories

Tags

Join Hacker Noon

Create your free account to unlock your custom reading experience.