Third Pull Request of Hacktoberfest

In the third week, I have found this project, 10secondsofcode. It is the website that teaches people about ReactJS and JavaScript from basic to advance.

In this project, I have noticed that their Dark Mode does not affect the entire screen. I have created a Pull Request to solve this issue.

Because React is a one-way data flow, it is tricky to pass data between the child component. Similar to this, in this project, the button to switch between White mode and Dark mode is in Navigation component, which is a child of App component. Also, Main component, child component of App, will remain the same even switch between White and Dark mode. Therefore, we need to find a way to notify Main component about the mode switching.

My idea is to create a function in App component to get the data whenever user switch between White and Dark mode:

isDarkTheme = (dark) => {
    this.setState({
      isDark: dark
    })
  }

and pass this variable to Main component to change the className so that whenever user switch to Dark mode, the whole Main component will change to dark too:

<div className={this.props.isDark ? 'main thememain-dark' : 'main thememain-white'}>

This issue is relatively easy but I am happy that I can contribute to a project and hopefully I can fix something bigger than this next week, the last week of Hacktoberfest!