Here is our page in both light and dark mode: To switch between themes, we need to call our function then add an event listener.It means that, when the checkbox is checked, the HTML file will add the class dark and will remove it when the checkbox is unchecked. It tells us how the dark theme will be applied. We created a function and named it toggleDarkMode.First, we have used the querySelector() method to get the element HTML and an id we created for our checkbox.addEventListener( "click", toggleDarkMode) querySelector( "#checkbox") Ĭonst html = document. Let’s add some custom CSS to the ball for it to move when we click on it!įor the custom CSS, let us name the ball switch-ball and add style using element under the tag. This will help us see if the checkbox is checked or unchecked since it is hidden.Īt this point, our switch should look like the one below: The second element creates a ball inside the round-shaped item.The item has a gray background and a round shape. Under, there is another element that creates an item for us to click on.The class cursor-pointer enables that feature. It will allow us to click anywhere on the switch to turn it on or off. The checkbox will apply the “ON” and “OFF” style to our switch it is hidden using the hidden class. First, we have created a checkbox we have used element to do so.Under the element that adds “Light” text, create another div element like the one below: With the words “light” and “dark” acting like icons on our page, let us add the switch which will be clickable. This means that the words will not affect the layout of the page or anything around them. relative class positions the items to the right.The element adds the words “light” and “dark”.In this case, we have used words instead of icons for easy understanding. space-x-2 adds some space between the toggle switch and the words “light” and “dark”. ![]() flex will align content vertically on the same line, while justify-end will align the switch to the end of the container’s space.This is how it should look like at this point: We do this by creating a div container with the following classes: Our first task is to ensure that the switch is at the top-right corner of the webpage. We will use the input element for the switch. Others include this feature on the top-right corner of the page.įor our case, we will place it on the right corner because it is much simpler. Some web pages have the dark mode feature in the “Settings” tab of the navigation bar. ![]() Step 3: Building the switchīefore you begin, ensure you have a clear idea of how you want your switch to look like and where you want it to be. Now that we have a page to practice on, let’s move to the next step. Reprehenderit deleniti perferendis debitis ullam quos praesentium, esse If you want to get a sample project with dark mode to hack on top of it, check out this minimal React app I built with all the code showcased on this article.Lorem ipsum dolor sit amet consectetur adipisicing elit. The dark mode implementation on my website (sorry for the low frame rate □). Gif showcasing switching from light to dark mode I got this feature on my own website/portfolio and this is how it looks: Moreover, this kind of feature is a great example of hook implementations and how to use the latest features of React to build amazing things. We successfully added support for dark mode in our React application without having done any fundamental changes! I really hope this post will inspire others to add this feature to their own website or app in order to make them more easy on the eye when used during night time. ![]() In the example above, the Wrapper component uses the colors of the theme for the fonts and the background, when switching from light to dark these CSS properties will change and hence the background will go from gray to black and the font from black to white. As a result, all our styled components using that theme will end up using the dark theme, and thus our entire application is now in dark mode. This will switch the theme that is passed in the Emotion Theme Provider from light to dark. Considering we’re in the default state (light mode), clicking this button will call the toggle function provided through the ThemeContext which will set the local storage variable dark to true and the themeState dark variable to true.
0 Comments
Leave a Reply. |