11/23/2023 0 Comments Css dark mode switch![]() The useDarkSide hook returns the current color theme and a function to update it. The useState hook is also imported from the react library. ![]() ![]() The code above imports and uses two other custom hooks: useDarkSide and DarkModeSwitch. This allows other components to access and update the theme state without having to write the same code repeatedly.Ĭreate a file name Switcher.js on the src folder and write the following code. This will allow for the styling of the document based on the theme.įinally, the useDarkSide hook returns an array that contains the current colorTheme and the setTheme function, which can be used to update the theme state. Inside the useEffect function, the classList property is used to add or remove a class from the HTML document's root element (). In this code, the array of dependencies is, which means that the function inside the useEffect hook will be executed whenever theme or colorTheme changes. The useEffect hook takes two arguments: a function and an array of dependencies. It also saves the theme to the localStorage. The useEffect hook is used to update the HTML document with the appropriate theme based on the theme and colorTheme states. This allows the hook to toggle between two themes. If theme is set to "dark", colorTheme will be "light" and vice versa. The colorTheme variable is derived from the theme state. The localStorage object provides a way to store data in the browser and it persists even if the user refreshes or closes the browser. The useState hook initializes the theme state with the value of localStorage.theme. The custom hook uses the useState and useEffect hooks. Inside your useDarkSide.js, write the following code. ![]() You can create a folder and inside the folder you create a file called useDarkSide.js In this case we will be using a switch.īefore we build this we will build the custom hook first. Such UI components could be a switch, checkbox, button or radio. To show the dark and light mode in tailwind, we need a UI component where the event will run. In order to demonstrate the dark mode features, we are going to build a card and use a switch UI to show the dark and light features.Īfter installing the packages as we did above we can go ahead to build out our components where the event will run, then the actual event itself and a hook that catches the theme. This means that when dark mode is enabled, the dark class will be added to the html element, and we can use this class to apply different styles for dark mode.īuilding the a project with the dark mode feture. Here, we set darkMode to 'class' to enable dark mode using the class attribute. To install Tailwind css, you need to open your terminal and run the following code below on your terminal.Įnter fullscreen mode Exit fullscreen mode Install Tailwind CSS as a dependency in your project Tailwind CSS also provides features like responsive design and dark mode support.īefore we can implement dark mode in our React application using Tailwind CSS, we need to set up Tailwind CSS. Instead of creating custom CSS styles for each component, you can use the pre-defined classes to apply styles in a more consistent and efficient way. Tailwind CSS is a utility-first CSS framework that provides a set of pre-defined classes that you can use to style your UI components. In this blog post, we will explore how to implement dark mode in a React application using Tailwind CSS. It provides a darker color scheme that can be easier on the eyes, especially in low light environments. Dark mode is a popular feature that is becoming increasingly common in web and mobile applications.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |