Dark Mode&Light Mode: Next.js with next-themes and Sass

Photo by Alexander Shatov on Unsplash

Hey there! It’s Arda, Junior Frontend Developer. I am building portfolio projects with React. It’s my very first medium 🎺.

New Challenge: DevJobs Listing App from frontendmentor.io

I decided to use Next.js instead of create-react-app this time. It’s a recommendation from my very new but amazing developer friend — Didem @DidemKkkaraasl1. Also, I wanted to use Sass for my new portfolio project. I like styled-components. It’s a very agile tool for frontend development. Why I decided to use Sass? No specific reason just an experimental.

The first problem on my road: Dark & Light Theme

It’s not a big problem. But I didn’t know anything about how I can manage the theme with Sass and Next.js. I am not a new player of the Sass era but I am a very new Next.js framework. Then I started to google. It’s really hard to find solution. I find two different paths but the first one is very complex for me, at the beginning. I just need a very pure and simple solution.

next-themes package is lifesaver

I just find the next-themes package from Github. All recommendation is for useTheme hook and styled components and CSS. It was a very good opportunity, I couldn’t find a direct solution. In that case, I need to tweak my file structure.

I move all theme options and variables same file.

_variables.scss to abstract/_theme.scss

SASS File Tree
Sass Theme and useTheme() hook

I just moved all theme variables and :root color options same file. Then useTheme() hook provided from next-themes. And I just add two different buttons for testing purposes.

Using ThemeProvider & Local Storage

We need to wrap our application with our ThemeProvider. I added ThemeProvider _app.js file for this project. We feed ThemeProvider with enableSystem for activating browsers prefers-color-scheme. Also, we can use storageKey for using localStorage very easily.

And 🎉 it works!

next-themes: https://www.npmjs.com/package/next-themes

project Github: https://github.com/to-arda-kurt/devjobs-app (ongoing) 🎉

Thanks for bearing with me. 👋 All the best.

Junior Frontend Developer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

CPU Intensive Node.js: Part 1

Build a Live Broadcasting Web App

AEM: Caching with Service Workers and Google’s Workbox Library

Random React topics for beginners

Unit Testing for Absolute Beginners

Track Your Friends On Google Map With Angular

Chart.js — Bar and Line Charts

TypeScript Best Practices —void, Default type Parameters, Spread, and Numbers

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Arda Kurt

Arda Kurt

Junior Frontend Developer

More from Medium

How to use Tailwind CSS with Next.js

React App | Next js Server side rendering Framework

How to add TypeScript to an existing Next.js project

Next Js Tutorial

Next Js