Dark Mode In Next.js App - Global Components

Hello guys , today we will be making a simple dark-mode feature for a next js app. So first , we are going to use npx create-next-app to create a next js app.This will take a while... So we have the a next js app right now , it has the pages , index.js , styles etc. So first , what we are going to do is make a simple html for the index.js file. Here , we have created a simple react component , which only has a div , which will act as the holder of the whole page. Now , we are going to create a json file to store all the css classes according to the mode. Now we have the json file where the themes are stored. For example , if we wanted the background style of light mode of global components , then we can query global.light.bg. So now , we need a state for managing dark and light mode. I am using the zustand library here to manage states. We have the state now , called modeState , in which the mode is stored in the "mode" key.And "change mode" will chnage the mode by checking the current mode.Also , there are some mistakes in the code here but i will fix it later in the video.Now what we are going to do is make a function which will retrieve the theme from json. So , we have added a few more thing like the css . There is two different styles for bg-dark and bg-light and it will apply the css accordingly. Now is the returnModeStyle function , which will retrieve the css for the div using some logic. And here , you can see the working result. So that's it for this video , in the next episode we ae going to apply dark mode to not only global components , but to specific components. See you in the next video!

Видео Dark Mode In Next.js App - Global Components автора Простая стилизация