Implementing Dark Mode in your React App with SCSS
Tags: react, javascript, html, css
Published: 2020-04-27 19:26:50

Hello 👋,
 Today i will be showing you one of the easiest way you can implement a dark theme in your create-react-app using sass(a css-pre-processor).Sounds exciting isn't it ?😊 
Actually this is my first post on this platform please show some love.
No too much talk let's get started.

"NOTE: This might not be the perfect way and  there are other ways to apply but if you are building a very small app this could make a lot of sense"

Firstly, we will be setting up our react app using  type 
`npx create-react-app react-dark-mode`
 on your command line, after that let's install node-sass
`npx install node-sass` 
our app is set and we good to go.
We will be writing the markups in our `App.js` file 
```react
import React from 'react';

const App = () => {
  return (
    <div className="app">
      <h1>Developers Blog</h1>
      <p>your journey to becoming a better software engineer</p>
      <section>
        <div className="card">
          <h2>News Post One</h2>
          <p>Html crash course</p>
        </div>
        <div className="card">
          <h2>News Post Two</h2>
          <p>Css beginners guide</p>
        </div>
        <div className="card">
          <h2>News Post Three</h2>
          <p>introduction to javascript for beginners</p>
        </div>
      </section>
    </div>
  );
}

export default App;
```
let's create a new file called `styles.scss` for styling our markup, the styling will look like this
```scss
$bg-dark-mode: #000;
$grey-dark-mode: rgba(66, 66, 66, 0.712);
$white-text: #fff;
$primary:rgb(0, 132, 255);

body {
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.7;
  font-size: 1rem;
}

body.dark-mode {
  background-color: $bg-dark-mode;
  color: $white-text;
  .card {
    background-color: $grey-dark-mode;
    box-shadow: none;
  }
}

.app {
  text-align: center;
  margin: 1rem auto;
  h1 {
    font-weight: 800;
    font-size: 2rem;
    color:$primary;
  }
  p {
    margin: 2rem 4rem ;
  }
}

section {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  text-align: center;
  .card {
    margin: 4rem .5rem;
    box-shadow: 2px 1px 3px 2px rgb(240, 240, 240);
    p{
      word-break: break-all;
    }
  }
}
```
now lets create a component that will handle the darkmode theme i named mine `ThemeChanger.js`, i will be using reactHooks (useState and useEffect) to save our state and also localstorage just to ensure that whenever you refresh your browser it will still display the previous state of the theme mode. 

```react
import React, { useState, useEffect } from 'react'

const ThemeChanger = () => {
  const [themeState, setThemeState] = useState(false);

  const handleChange = () => {
    setThemeState(!themeState);
    if (themeState) {
      localStorage.setItem('Theme', 'dark');
      document.body.classList.add('dark-mode');
    } else {
      localStorage.setItem('Theme', 'light');
      document.body.classList.remove('dark-mode');
    }
  }
  useEffect(() => {
    const getTheme = localStorage.getItem('Theme');
    if (getTheme === 'dark') return  document.body.classList.add('dark-mode');
  })
  return (
    <div>
      <button onClick={handleChange}>{themeState ? 'Light Mode' : 'Dark Mode'}</button>
    </div>
  )
}

export default ThemeChanger;
```
import  `ThemeChanger` and `styles.scss` to our `App.js` component our code now looks like this.
```react
import React from 'react';
import ThemeMode from './ThemeChanger';
import './scss/styles.scss';

const App = () => {
  return (
    <div className="app">
      <h1>Developers Blog</h1>
      <ThemeMode/>
      <p>your journey to becoming a better software engineer</p>
      <section>
        <div className="card">
          <h2>News Post One</h2>
          <p>Html crash course</p>
        </div>
        <div className="card">
          <h2>News Post Two</h2>
          <p>Css beginners guide</p>
        </div>
        <div className="card">
          <h2>News Post Three</h2>
          <p>introduction to javascript for beginners</p>
        </div>
      </section>
    </div>
  );
}

export default App;
```
Perfect!!
At this point we are done 😊
leave a comment if you found this helpful