This is where we set the data-theme='dark' (or light) value on the DOM element. Every time light or dark mode is set, we save that value in the theme property of localStorage. Using localStorage will allow us to save a value and have it persist even after the user closes the app or reloads the page. When we invoke them we expect the app to switch to either light or dark mode. We want these to be as simple as possible. We create functions called setDark and setLight which do exactly what the names describe. DarkMode.css ' import export default DarkMode The styles below are simply to override the look of the default HTML checkbox.Īdd them below the above code in src/DarkMode.css I won't comment on how this CSS works as it's not in the scope of this tutorial and not relevant to dark/light mode. Next we will create a custom checkbox input to look like a toggle switch based on this example. You can add as many custom colours as you want here and have them all be controlled by your light/dark toggle. Notice I have also added a custom link colour here which changes based on the value of the theme. The dark values are set after the root values so if the selector applies the initial (light) value of those variables will be overwritten with the dark values. The value of those variables will change depending on when the data-theme='dark' attribute is set due to the cascade. This will always be the value of the -background-color and -font-color variables. We set the background colour and text color of our application. This is a custom attribute that we will be placing ourselves on the element. Using the attribute selector we target any element with a data-theme='dark' attribute on it. Here we set the colours for our dark theme. This is where will will create the CSS variables that hold the colours for our light theme. Anything you place here will be available anywhere in the application. The :root selector matches the root element representing the DOM tree. If you are using CRA then run the following command (if you have your own existing project then disregard)Įnter fullscreen mode Exit fullscreen mode

Lastly, I have included a section on adding tests for your component using React Testing Library. If you are not super familiar with Typescript you should still be able to follow along, thee amount of explicit typing in these examples is minimal. We will also be using Typescript as is the default for every web project I built these days. If you are not using webpack you can simply use a element for your CSS files in your index.html rather than importing them. We will be writing pure CSS, but in order to copy the examples exactly you would need to have webpack setup with a CSS loader to support the import syntax for CSS files. If you choose not to use CRA you should still be able to follow along with this tutorial. We will be using Create React App for this tutorial as it is an extremely easy way to quickly and easy establish a React application template that you can build on. The goal here (as it should always be) is to minimize complexity. In fact we don't have a single stateful variable, or any hooks or lifecycle methods. I'll presume that you have a basic familiarity with React. Once you have completed it, you will have your own component that you can drop into any application to achieve this functionality. Pretty cool!īefore we start we'll begin by taking a look a demo of the final product, so you know what to expect from this tutorial.

This component will not only persist your choice of settings through a page close or refresh, it will also respect the user's prefers-color-scheme setting in their browser. In this tutorial we are going to show how to bundle the entire dark mode feature into a single component that you can take with you and place inside any application. Typically this is most efficiently done by taking advantage of the power of CSS variables. Providing users with a dark mode for your web application has become an expectation, and there are many ways to accomplish it. All code from this tutorial is available in this repository, and a video version of this tutorial is available below.

React dark mode switch with css