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 light/dark mode toggle

Adding light/dark mode toggle

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 light/dark mode toggle

“

Welcome to this session! You'll learn how to add a light, dark mode toggle to your React Portfolio website's navigation bar. We'll achieve this by using a shared theme context, making the toggle accessible throughout your application. This will enhance the user experience by providing a choice of interface themes. Let's start where we left off last time, inside the Navbar component. Now, I am adding a comment to mark where you'll insert the light-slash-dark-mode toggle button. Moving to ThemeProvider.jsx I'm importing UseContext from React in addition to CreateContext and UseState. UseContext allows us to easily access the theme context from any component within the provider scope. This is crucial for making the theme accessible throughout your application. I am adding a custom hook UseTheme which exports the Theme and ToggleTheme functions, making them directly accessible to any component that needs to interact with the theme. This is a common React pattern to organize and reuse…

Contents