#React dark mode switch with css code
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.
#React dark mode switch with css how to
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. EventListener when mode/theme is changed window.matchMedia('(prefers-color-scheme: dark)').All code from this tutorial is available in this repository, and a video version of this tutorial is available below. If I talk about the implementation part, I have used window.matchMedia to check for theme prefers-color-scheme. Makes it easier for anyone to use a device in a low-light environment.It improves visibility for users with low vision and those who are sensitive to bright light.Why it is important? Well there are few points that makes a website better when it has dark mode theme: Or we can also add a toggle functionality in websites to switch explicitly between light and dark themes. We can change this dark/light mode from Setting-> Display-> THEME in most of the devices. These two themes have some advantages and can be configured on mobile as well as on desktop. In Mac, we can set Dark or Light theme from General>
0 kommentar(er)
