# How to Add Dark Mode in React Three Fiber & Three.js - Project Source Code Review - Wind Land

> In this video, I’ll guide you through the steps to implement a smooth Dark Mode in a React Three Fiber and Three.js project using Valtio for state…

Canonical page: https://andersonmancini.dev/videos/how-to-add-dark-mode-in-react-three-fiber-and-three-js

Published: 2024-10-27 · Duration: 15:52 · Category: Tutorials · Tags: three.js, react-three-fiber, shaders, tutorial, source-code

Watch: [YouTube](https://www.youtube.com/watch?v=pgJ-HjvftE0) · [Subscribe to the channel](https://www.youtube.com/@AndersonMancini?sub_confirmation=1)

Sign up for my newsletter:

In this video, I’ll guide you through the steps to implement a smooth Dark Mode in a React Three Fiber and Three.js project using Valtio for state management. This is a Project Source Code Review for my interactive project, Wind Land, where we’ll set up a Dark Mode toggle, style an HTML overlay, and make key adjustments in our 3D scene to bring the night mode to life!

Here’s what we’ll cover in this video:

• Introduction – Why Dark Mode? Overview of the Wind Land project.

• Setting Up Valtio – Creating a global theme state for easy Dark Mode toggling.

• Building the Dark Mode Toggle – Adding a Dark Mode button and linking it to Valtio.

• Adjusting the 3D Scene – Making lighting and material adjustments in React Three Fiber.

• Testing and Final Touches – Ensuring a smooth Dark Mode experience in Wind Land.

## Links from the video

- [Live demo](https://andersonmancini.dev)