From the course: Master React 19 and Next.js 16 with Hands-On Projects and Real-World Applications

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

Adding dark mode with theme toggle and useEffect

Adding dark mode with theme toggle and useEffect

From the course: Master React 19 and Next.js 16 with Hands-On Projects and Real-World Applications

Start my 1-month free trial Buy for my team

Adding dark mode with theme toggle and useEffect

“

Welcome to this session on adding a dark mode toggle to your React Kanban project. In this session, we'll learn how to implement a sleek theme toggle button that switches between light and dark modes. By the end, you'll be able to seamlessly integrate this feature into your app using UseEffect and Local Storage, ensuring a user-friendly experience with persistent theme preferences. Let's dive in! Now I am adding some basic styling to the div element. I'm adding the classes WFull and MinHScreen to make the div take up the full width of the screen and have a minimum height of the screen height. This sets up the layout for our Kanban board. I am setting the background color of the board based on the theme. I add bg-gray 100 for the light mode and dark-bg 900 for the dark mode. This means that when the dark class is applied to the HTML element, the background will be dark gray. Otherwise, it will be light gray. to tailwind.config.js. We have dark mode set to class. This allows us to use…

Contents