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 inside the folder. Hello.jsx components 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. Now, let’s write our function. We also want to change the colour of our button in dark mode. handleDarkMode So far, our page looks like below. I’m using google fonts so my text looks a bit different. 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 folder inside the src folder and import it inside our Hello component. styles.css `` `import "../styles/Hello.scss";` `` I’ll be using twitter’s dark mode theme colors. With SCSS, we can use variable names in our stylesheet. Now, here’s before dark mode. And after dark mode ...

Google

Twitter

How to Build a Chrome Extension That Makes API calls

How to Build a Search Bar in React with React Hooks 

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

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

All the Firebase Functions you Need to Build Your Next Serverless Application

2022 Web Development Trends, Mistakes, and Misconceptions: What You Need to Know

6 Principles of Dark UI Design

Adding Dark Mode to Your Website Using a Single Line of HTML

Dark-Themed UI Design Tips

Dark UI: Advantages and Use Cases

All the Firebase Functions you Need to Build Your Next Serverless Application

2022 Web Development Trends, Mistakes, and Misconceptions: What You Need to Know

6 Principles of Dark UI Design

Adding Dark Mode to Your Website Using a Single Line of HTML

Dark-Themed UI Design Tips

Dark UI: Advantages and Use Cases

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps