Implementing Dark Mode in your React App with SCSS

#react #javascript #html #css

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

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

$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.

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.

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

Top comments (3)

casderooij • Jul 22 '20

Nice practical implementation for changing a theme!
As a small refactor you could use a useEffect hook for the logic in your handleChange function:

export default function ThemeMode() {
  const [themeState, setThemeState] = useState(false);

  useEffect(() => {
    const getTheme = localStorage.getItem('Theme');
    if (getTheme === 'dark') {
      setThemeState(true);
    }
  }, []);

  useEffect(() => {
    if (themeState) {
      localStorage.setItem('Theme', 'dark');
      document.body.classList.add('dark-mode');
    } else {
      localStorage.setItem('Theme', 'light');
      document.body.classList.remove('dark-mode');
    }
  }, [themeState]);

  return (
    <div>
      <button onClick={() => setThemeState(!themeState)}>{themeState ? 'Light Mode' : 'Dark Mode'}</button>
    </div>
  );
}

This useEffect only runs when themeState changes. I also added an empty array to the first useEffect hook, this way the effect only runs on componentDidMount.