How to Add Dark Mode to Your React App

How to Add Dark Mode to Your React App

Adding dark mode to your React app ... Note: I use Emotion as a preference, but you can obviously use CSS modules or even inline

While working on a React app, I wanted to implement a day/night mode feature that allows the user to select whether or not they want to use a light or dark theme. Dark mode is becoming increasingly popular in app and software design. Aside from looking pretty cool, dark mode can help with device-energy conservation and reducing eye strain. For more on the science behind dark mode, check out this article in The Observer.

In this post, I’ll demonstrate how easy it was for me to implement this new design trend in my React app. There’s a lot more CSS involved in my application, but in order to remain concise, I’ll only provide the CSS relevant to my day-/night-mode functionality. First, let me provide some context.

My React app is an online text editor. My App component has a white background and black for the font color. This is the consistent color scheme throughout my application. I really am pushing the boundaries of contemporary web design.

Below is my App component.

import React, {Component} from 'react';
import './App.css';
import SizeContainer from './components/SizeContainer.js';
import {withRouter} from 'react-router-dom';
import { connect } from 'react-redux'; 
const App = (props) => {     
   return (      
      <div className={!props.mode ? "App" : 'night'}>        
         <h1 style={{height: 50, marginBottom: 0, padding: 5}}>
           React Editor
         </h1>        
         <SizeContainer mode={props.mode}/>      
      </div>    
   );
} 
const mapStateToProps = (state) => {  
   return {      
      mode: state.mode  
   };
} 
export default withRouter(connect(mapStateToProps) (App));

As you can see, my App component has access to the mode prop via mapStateToProps. This prop is stored in my reducer and is accessible by any components I choose to export with connect. While Redux isn’t necessary for this functionality, I find it does make the process of applying the styles easier while keeping my components lean and mean. For more on Redux, check out the documentation.

Below is my reducer:

export default function rootReducer(state={mode: false}, action){
   switch(action.type){      
      case "CHANGE_MODE":      
         var mode = !state.mode        
         return {...state, mode}      
      default:        
         return state    
    }   
}

When CHANGE_MODE is called, all that needs to be done is to get the current value of mode in my reducer’s state (true/false) and assign it the opposite value of what it currently is.

If state.mode is true, then !state.mode will equal false — and vice versa. No payload is necessary for this action. Now that we see how this is handled in the reducer, let’s take a look at the CHANGE_MODE action in our actions file.

export function changeMode(){  
   return {    
      type: "CHANGE_MODE"  
   }
}

Since there’s no payload and the toggle operation is happening in the reducer, all we need to do is call this function in one of our components whenever we want to toggle the theme of the app. This brings me to my next component: SizeContainer.

Since I’m passing props.mode from the App to the SizeContainer, the child elements in the SizeContainer will also have access to the props.mode. This is important for one child component in particular: Buttons.

import React from 'react';
import {FaFileCode, FaLightbulb} from "react-icons/fa";
import {withRouter} from 'react-router-dom';
import { connect } from 'react-redux';
import { changeMode } from './../actions'
const Buttons  = (props) => {
    var {mode, changeMode} = props;
    return(
      <div className='buttonsContainer' >
         <div>
           <div className='buttons' onClick={changeMode}>
              <FaLightbulb/>
              <span className="tooltiptext">
                 {mode ? "Day Mode" : "Night Mode"}
              </span>
            </div>
            <div className='buttons'>
               <FaFileCode/>
               <span className="tooltiptext">
                   Download Code
                </span>
            </div>
          </div>
       </div>
    )
};
export default withRouter(connect(null, {changeMode}) (Buttons))

The above code will render the below two button — one has a light-bulb icon, the other a code-file icon.

As you can probably guess, the button with the light bulb icon will control the dark-mode toggle. No need to worry about the second button for now. Pay attention to the below line.

import { changeMode } from './../actions'

This is the changeMode function that gets exported from our actions. This function is added the light bulb button as an onClick event. Click the button, and execute the action to change the mode. Simple, no?

The tool tip for the light-bulb button will say either “Day Mode” if props.mode is true (meaning, dark mode is active), or if it’s false (dark mode is off), it’ll read “Night Mode”.

In this instance, dark mode has not been initiated — hence the white background and “Night Mode” tooltip

Now that we have our React app set up, let’s get to the CSS.

.App {  
   text-align: center;  
   height: 100%; 
   transition: background-color 0.3s, color 0.3s;
}

When dark mode isn’t selected, our CSS is pretty straightforward. Since white is the default background color and black is the default font color of HTML, we don’t need to specify them here.

All we need to specify is the height and width of the App (we want it to take up the whole page) and the transition.

By specifying a background-color and color transition (both 0.3s), this will ensure our transition from day to night mode is smooth. Otherwise, it’ll look more like a jarring flash than a smooth transition from day to night.

Now that we have our default styles, let’s get down to business with dark mode CSS.

.night {
  text-align: center;
  height: 100%;
  width: 100%;  
  background-color: black;
  transition: background-color 0.3s, color 0.3s;
}

We declare the styles for the .night class name and explicitly state the background color and color as to prevent the HTML from using the default values. This one also has a transition: background-color 0.3s, color 0.3s; This will ensure that when we transition from dark backto light mode, the transition will remain smooth.

If you remember from earlier in the article, our App component’s className is determined by the value of props.mode. If props.mode is false, then use className="App"; otherwise, use className="night".

The above CSS satisfies the theme change for our App component, but to ensure that it applies the necessary styles to all child elements, we need to add a few more lines.

.night h1, .night h2, .night div, .night textarea{
  background-color: black;
  color: white;
  transition: background-color 0.3s, color 0.3s;
}

This will apply the background color and text color changes to any h1, h2, p, div, and textarea elements that fall within our App component.

These elements comprise the app’s text editor sections (textarea) and their titles (h2). The h1 is the title of the app itself, and pretty much everything is housed either in its own or in a parent’s div container.

By putting .night in front of all of these elements, we can target these specific child tags when we change the theme.

It’s also worth noting that here we use a descendant selector, identified by the space between .night and an HTML tag. This will select all child instances of an element that falls under .night. We don’t use >, the child selector, as it would only select immediate children of an element. We also don’t use + , the adjacent sibling selector, which would only select siblings. For more on CSS combinators, check out this really awesome article.

We’re almost done, but there are a few more things we need to consider. First, there are a few elements don’t want to change the color or background-color of (at least for now), such as the navy blue buttons. Whether or not the mode is dark or light, I want them to remain navy blue and have white icons. To ensure the className switch doesn’t affect these buttons, I can add the following CSS.

.night .buttons{  background-color: navy;}

By putting this line in my App.css file, I can prevent the previously mentioned CSS from changing the buttons’ styles. Previously, I thought that this line had to come afterthe original .night CSS since CSS is cascading by design and uses precedence to determine the style applied to an element.

In reality, where I put this line does not matter. Since we are using a class selector to target the buttons, the .night div styles will not be applied as the level of specificity is lower than .night .buttons. For more information, please read the MDN docs on specificity.

The above logic can also be applied for my last element, which I would like to keep independent from dark mode: my output container. This section, which has the class name of .view, is where the user’s code (composed of by combining the top three sections) will be running, and since that output area should only reflect the code written by the user, we should ensure that the default styles are enforced unless the user types new ones in the CSS section.

.night .view {  background-color: white;}

The rest of the output will be inserted into an iframe, which is a child of .view. This means the styles from the user will be completely separate from that of my app’s. Preserving the background color of the output container is all that’s needed.

Below is our final result.

There you have it. With just a few extra lines of CSS and a little bit of props logic, your React app can have dark mode implemented efficiently and effectively.

Programming a Javascript Simon Game Tutorial

Programming a Javascript Simon Game Tutorial

In this javascript tutorial, I recorded myself live programming an html5 javascript simon game.

In this javascript tutorial, I recorded myself live programming an html5 javascript simon game.

For those who don't know, I'm a full stack web developer who has been in the industry for over 5 years now. There is a lot of things I have learned along the way and I'd like to share that knowledge with anyone wanting to learn!

like this video if you found it useful and would like to see more videos of the same content.

subscribe to my channel if you are trying to improve your abilities as a web developer, software engineer, or even if you are just learning to code.

Don't forget to turn on those bell notifications!

Understanding Memoization And Dynamic Programming in Javascript

Understanding Memoization And Dynamic Programming in Javascript

In this Javascript tutorial I will explain what memoization is, how to use it, when you should use memoization, how to use memoization, what dynamic programming is, how to use memoization in dynamic programming. Memoization is a big complicated word that you may have never even heard before, but you may be surprised to know that you are most likely already using memoization without even realizing it.

Memoization is a big complicated word that you may have never even heard before, but you may be surprised to know that you are most likely already using memoization without even realizing it. Memoization is just the act of caching values so that they can be calculated quicker in the future. Memoization is really useful in all parts of programming, but where it is most useful is in dynamic programming. In this video I will explain what memoization is, how to use it, and why it is so useful especially in dynamic programming.

🧠 Concepts Covered:

  • What memoization is
  • When you should use memoization
  • How to use memoization
  • What dynamic programming is
  • How to use memoization in dynamic programming

Pagination in ReactJs

Pagination in ReactJs

There are a lot of resourceful materials online that give good insights into pagination in ReactJs, as well as NPM packages you can easily use

There are a lot of resourceful materials online that give good insights into pagination in ReactJs, as well as NPM packages you can easily use. As much as I appreciate those materials and love to use those packages, they mostly deal with loading the whole dataset on the page first then completely handle the pagination in the frontend. I am approaching this article with the concept of loading the exact data needed on the page, then manually loading other dataset based on the request when the user clicks the pagination number display. Below is the content structure to guide us through this article:

Table of Contents
  • Project Setup
  • HTML and CSS Styling
  • Pagination Data Format
  • Sample API request
  • Displaying the initial data
  • Showing Page Number and getting Other data
Project Setup

We are going to use create-react-app v0.1.0 which has the CSS Module configured already. Open your terminal and cd to the folder you want the project installed. Then run the below command:

npx create-react-app pagination  --use-npm

The above command will download the project into the folder calledpagination. You need to cd into the folder and run npm start. If everything goes well, you will have a page that looks like below:

HTML and CSS Styling

Open the project in your favorite code editor and locate the App.js file, We need to prepare our App.js to the look exactly like the way we want it by adding the HTML code and CSS style below:

Create a new file called App.module.css in the same directory where you have your App.js, then import it into your App.js using:

import styles from './App.module.css';

I want us to handle the display of the pagination number first, below is the style and HTML structure of what we are going to use.

  render() {
    

    return (
      <div className={styles.app}>
        
        <table className={styles.table}>
          <thead>
            <tr>
              <th>S/N</th>
              <th>First Name</th>
              <th>Last Name</th>
            </tr>
          </thead>
          <tbody>
              <tr>
                <td>1</td>
                <td>Abel</td>
                <td>Agoi</td>
              </tr>
              <tr>
                <td>2</td>
                <td>Muyiwa</td>
                <td>Aregbesola</td>
              </tr>
              <tr>
                <td>3</td>
                <td>Opeyemi</td>
                <td>Agoi</td>
              </tr>
              <tr>
                <td>4</td>
                <td>Ope</td>
                <td>Aina</td>
              </tr>
          </tbody>
        </table>


        <div className={styles.pagination}>
          <span>&laquo;</span>
          <span className={styles.active}>1</span>
          <span>2</span>
          <span>3</span>
          <span>4</span>
        </div>

      </div>
    );
  }

pagination_01.js

Add the content below into your App.module.css.

.app {
    width: 50%;
    margin: 0 auto;
}

table {
  border-collapse: collapse;
  border-spacing: 0; 
}


table {
  border-collapse: separate;
  border-spacing: 0;
  color: #4a4a4d;
  font: 14px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;
  width: 100%;
}
tr {
  overflow-x: scroll;
}
th,
td {
  padding: 15px 15px;
  vertical-align: middle;
  /* text-align: left; */
}
thead {
  font-size: 14px;
  line-height: 24px;
  font-family: Lato;
  border: 1px solid transparent;

  max-width: 100%;
  font-weight: 900;
  line-height: 24px;
  mix-blend-mode: normal;

  color: rgba(51, 51, 51, .5);
  background: rgba(255, 255, 255, .9);
}
thead tr th {
  padding: 15px 15px;
  border: 1px solid transparent;


  text-align: left;
}
tbody {
  max-width: 100%;
}
tbody tr:nth-child(odd) {
  background: #f0f0f2;
}
tbody tr:hover {
  background: #f0f0f2;
}
td {
  padding: 15px 15px;
}
td:first-child {
}


.pagination {
    margin-top: 25px;
}
.pagination span {
  cursor: pointer;
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
  border: 1px solid #ddd;
}

.pagination span.active {
  background-color: #0099FF;
  color: white;
  border: 1px solid #0099FF;
}

pagination_app.module.css

Sorry for the plenty code written so far :), I want us to have a good looking table with pagination style in place before we move into the actual paging. If everything goes well, your view should look like below:

Pagination Data Format

In most cases, when you are making API calls to an endpoint that returns a paginated data, you need to pass at least the page number with the URL, hence a sample URL will look like below:

https://reqres.in/api/users?page=2

The most important thing to take note of in the URL above is the page=2 where 2 is the page number dataset we want to get. It can be 3,4 or any number as much as the dataset we have in the backend.

The response will always contain three important data which are per_page, total and the actual data we want to loop through. A sample response looks like below:

Sample API request

Talking about making an API request to the backend, We need a backend to make the request to, I decide to use https://reqres.in/ as the API endpoint for this tutorial because it is free, always available and reliable. You can decide to make your API request directly inside your component’s ComponentDidMount() or dispatch an action to redux from your ComponentDidMount() but for the purpose of this tutorial, we are going to make the API call from the App.js componentDidMount().

Firstly, we need to set the component’s state like below inside your App.js

  state = {
    users: null,
    total: null,
    per_page: null,
    current_page: null
  }

pagination_component_state.js

users is going to be the data we are going to loop over, while total and per_page is going to help us with calculating paging logic while the current_page will be used to style the active pagination link.

The next thing we should do is create a helper method that will serve the purpose of making an HTTP request to the API endpoint and also update the state with the response data. The method will look like below:

  makeHttpRequestWithPage = async pageNumber => {
    let response = await fetch(`https://reqres.in/api/users?page=${pageNumber}`, {
      method: 'GET',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
    });

    const data = await response.json();

    this.setState({
      users: data.data,
      total: data.total,
      per_page: data.per_page,
      current_page: data.page,
    });
  }

pagination_http_request.js

This method will accept a parameter called pageNumber so it can be reusable and will always update the state with the right data when the response is successful.

Since on page load, we need to make the HTTP request to the backend, and we are going to do this inside thecomponentDidMount() by calling the method above and passing it the first-page number we want which should be 1. Hence, the componentDidMount() will look like below:

 componentDidMount() {
    this.makeHttpRequestWithPage(1);
  }

pagination_componentDidMount.js

If we add console.dir(this.state.users) inside the render() method, below will be printed in the console

The null was before the data arrived, once the data arrived, it updates the state, hence the array of users data.

Displaying the initial data

Haven gotten the data needed, we need to loop through the data and display it. Hence we can update our render method to have below:

    let users;

    if (this.state.users !== null) {
      users = this.state.users.map(user => (
        <tr key={user.id}>
          <td>{user.id}</td>
          <td>{user.first_name}</td>
          <td>{user.last_name}</td>
        </tr>
      )); 
    }
    
    return (
      <div className={styles.app}>
        
        <table className={styles.table}>
          <thead>
            <tr>
              <th>S/N</th>
              <th>First Name</th>
              <th>Last Name</th>
            </tr>
          </thead>
          <tbody>
              { users }
          </tbody>
        </table>


        <div className={styles.pagination}>
          <span>&laquo;</span>
          <span className={styles.active}>1</span>
          <span>2</span>
          <span>3</span>
          <span>4</span>
          <span>&raquo;</span>
        </div>

      </div>
    );

gistfile1.txt

I replaced the dummy data we had inside the with the result of the loop which I equated to users. We have the assurance that when the state changes, ReactJs will automatically update the content of the table. The final stage is displaying the page logic and getting the other contents based on the page number clicked which will be sent to the API endpoint.

Showing Page Number and getting other data

Before we talk about showing page number automatically using the desired logic, I want us to manually show those numbers and make the actual API calls when the numbers are clicked. For now, we are going to hard code the pagination numbers ourselves like below:

<div className={styles.pagination}>
  <span onClick={() => this.makeHttpRequestWithPage(1)}>1</span>
  <span onClick={() => this.makeHttpRequestWithPage(2)}>2</span>
  <span onClick={() => this.makeHttpRequestWithPage(3)}>3</span>
  <span onClick={() => this.makeHttpRequestWithPage(4)}>4</span>
</div>

pagination_hard_code.js

The above code will look like below when previewed in the browser.

Notice that each span has an event handler attached to it, and I passed the page number to that event handler, so anytime we click on the pagination link, it will make a new HTTP request and update the component states, hence the user’s table data. We do not want to hard-code the links as we did above, so we need to automatically display those links.

So we’re planning on showing the page numbers for a series of pieces of data so that users can easily navigate multiple items. There are a few things that we need to know first:

  • The page that we’re on
  • Total number of items
  • Number of items per page

Good news is that we have captured all these things in our component’s state.

Next, we need to look at how we want to display the page numbers, there is a wide range of methods that people use:

  • Simple Next/Previous buttons with no numbers
  • A list of all possible pages
  • Page 1 & the last page, with the current page (and 2 above/below) shown

I personally prefer to show the very first page, that last page, and then the current page with 2 pages above & below. So for example on page 12 out of 24 pages we’d see:

1, 10, 11, 12, 13, 14, 24

This allows users to quickly navigate to the start, and to the end, as well as jump through multiple pages at once. For the purpose of this tutorial, I am going to show us how to show a list of all possible pages(item two above) then item three too.

The Arithmetic

We need to work out the total number of pages, for this, we want to take the total number of items that there are, and divide it by the number of items per page. But we want to make sure that we take that number and round it up.

So if there were 12 items in total, and we were showing 5 per page, we’d have a total of 3 pages of items. If we were to show 3 per page, we’d show 4 pages.

const pageNumbers = [];
for (let i = 1; i <= Math.ceil(this.state.meta.total / this.state.meta.per_page); i++) {
    pageNumbers.push(i);
}

page_logic_pagination.js

Haven gotten the page numbers, we need to loop through to display the span since we want to show all possible numbers first, our loop will look like below:

renderPageNumbers = pageNumbers.map(number => {
  let classes = this.state.current_page === number ? styles.active : '';

  return (
    <span key={number} className={classes} onClick={() => this.makeHttpRequestWithPage(number)}>{number}</span>
  );
});

pagination_all_numbers_loop.js

We need to update our pagination view to look like below:

<div className={styles.pagination}>
  <span onClick={() => this.makeHttpRequestWithPage(1)}>&laquo;</span>
  {renderPageNumbers}
</div>

pagination_view._01js

Congrats, we have successfully handle pagination, make HTTP request to the backend and changing the table content when user click on the page number to see.

To be sure we are on the same page, my App.js code looks like below:

import React, { Component } from 'react';
import styles from './App.module.css';

class App extends Component {


  state = {
    users: null,
    total: null,
    per_page: null,
    current_page: 1
  }


  componentDidMount() {
    this.makeHttpRequestWithPage(1);
  }


  makeHttpRequestWithPage = async pageNumber => {
    const response = await fetch(`https://reqres.in/api/users?page=${pageNumber}`, {
      method: 'GET',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
    });

    const data = await response.json();

    this.setState({
      users: data.data,
      total: data.total,
      per_page: data.per_page,
      current_page: data.page
    });
  }


  render() {

    let users, renderPageNumbers;

    if (this.state.users !== null) {
      users = this.state.users.map(user => (
        <tr key={user.id}>
          <td>{user.id}</td>
          <td>{user.first_name}</td>
          <td>{user.last_name}</td>
        </tr>
      ));
    }

    const pageNumbers = [];
    if (this.state.total !== null) {
      for (let i = 1; i <= Math.ceil(this.state.total / this.state.per_page); i++) {
        pageNumbers.push(i);
      }


      renderPageNumbers = pageNumbers.map(number => {
        let classes = this.state.current_page === number ? styles.active : '';

        return (
          <span key={number} className={classes} onClick={() => this.makeHttpRequestWithPage(number)}>{number}</span>
        );
      });
    }

    return (


      <div className={styles.app}>

        <table className={styles.table}>
          <thead>
            <tr>
              <th>S/N</th>
              <th>First Name</th>
              <th>Last Name</th>
            </tr>
          </thead>
          <tbody>
            {users}
          </tbody>
        </table>


        <div className={styles.pagination}>
          <span onClick={() => this.makeHttpRequestWithPage(1)}>&laquo;</span>
          {renderPageNumbers}
          <span onClick={() => this.makeHttpRequestWithPage(1)}>&raquo;</span>
        </div>

      </div>
    );
  }

}

export default App;

pagination_app.js

and my view like below:

We can change the page number display logic to below since it will accommodate for large dataset.

renderPageNumbers = pageNumbers.map(number => {
  let classes = this.state.current_page === number ? styles.active : '';

  if (number == 1 || number == this.state.total || (number >= this.state.current_page - 2 && number <= this.state.current_page + 2)) {
    return (
      <span key={number} className={classes} onClick={() => this.makeHttpRequestWithPage(number)}>{number}</span>
    );
  }
});

pagination_another_display_logic.js

Thanks for reading.