React Dark Mode with Sass (Toggle Theme)

all right so today we're going to be creating light and dark mode in our react app using sas i started this project uh in the last video and i'll leave it the link in the description so that you can create a react project with typescript and that you can add sas to it so that you can start working so let's get straight into it we have the main scss file from last time we're going to move everything from here and we're going to move some variables to other folders so we're going to create an abstracts folder and we're going to add colors dot scss to it and we're going to add all all of our colors in here right we need these colors because we want to switch themes right and we want our colors to change based on the selected theme so i'm gonna add these colors from this component library this is mantine and they have some pretty good colors so i'm going to copy some of these colors here inside of this colors.scss file as variables and then we're going to continue to the video all right now that i added the colors you can see that i added some greens reds oranges and we have the dark ones so that we can switch the themes now we need to use these colors to change how everything looks right so if it's dark team we want the background to be dark and the font to be light be white right and if we switch it we want the background to be white and the font to be black so that's that's the the main thing that we want to do so now we can go and create base folder right so we're going to create a base for base folder not base base and we're going to add reset that scs file to it now this file is basically the standard stuff that you have in your the standard styling that you have so in our reset file we're gonna have body and we're gonna set the body to have a margin and padding of zero and we want to import the colors so i'm gonna say use at use and we're gonna be adding let's see abstract and then colors okay and now we can add in main.scss we can import the base and then the reset okay so now everything is working let's see what we're going to do here we're going to have a light glass and a dark glass now light classes for the light team dark classes for the dark team you can have custom theme class right you can have any class you want we're going to be doing these two themes now in light theme we're going to have text class and we're going to have a background class right these are the two for example main things that we're going to need and the same is going to be in dark so we're going to have a text and a background class inside them now when we're talking about the light theme the text should be black right so we're going to say color is equal to and let's find a color that we like so for example text should be dark 900 here so we can say color is equal to 900. you can use mixins for this and just call a function but let's not over complicate stuff so we can use color 900 we want the background to be a lighter color right so we can use dark zero and we can say background color is equal to dark zero and this is for the light team for the dark team it should be inverted right so i'm gonna say the color should be let's say white color and the background color should be some darker tone darker tones so i'm gonna place it as for example dark 700 so now that we have these colors let's import the main css css here in our main app and let's see what's happening so i have an error here that says undefined variable for dark 900s so let's see what's happening we can debug this oh yeah that's happening because when we use when we use use instead of import we need to say we need to have a prefix for the colors and the name is always going to be the same as this one but and then we get the next error for dark zero zero and this is this is this is bad we don't want to type in prefixes each time so we can import the color as this and now everything is working out in our app now we have these two classes light and dark so if we want to switch the the theme we're gonna say class name you're gonna say light okay now light is working everything's fine but if we switch it to dark we need to add the the background basically so we're gonna say class name is equal to background okay so we have a div that wraps everything in in it and it it's a it's a class name of a background now you see this changes but this is the entire thing now now we want to expand this so it takes up the maximum width and height and it looks normal right so i'm going to say this text should have a class name of text the text that we defined and let's just give it a class name for example you can again you should use mixins for this but we're just doing a simple presentation for it simple problem now i'm going to say dark flex and i'm going to say display flex we're going to justify contact center and we're going to say let's say height is 100 bh and i don't know just by aligning items maybe we can align item center right so now we can add the flex class here and we have our app hello world see this is this is extremely nice okay this is good looking and now the we got the main thing working so if i switch this to light it's light if i switch this to dark it's dark so let's for example let's use let's import new state from react okay and let's say const theme it's equal to seth theme and let's say at the beginning it's a light theme all right so at the beginning it's a light team now i want to add a button that's going to switch to theme and i'm going to add an all click event i'm going to say set theme is equal to and now let's see if the theme is equal to light then i want the theme to be dark else it should be light okay now we have the button and we need to add the theme here right so it should be changeable i'm going to say b okay we click and we we can switch the this easily right this is extremely simple you have the main css where you import stuff scss where you import stuff you have the colors that you want to use and you have the variables for them and you have the reset where there's the main part that you have you know you wouldn't use everything here and i'm going to show you in a couple of minutes what's how you can move this code to separate files to make it more organized but this is the main thing you're going to have a dark or a light class you can also have whatever class you want you can have an amoled and you can change the the text in the background looks you can also do this with border radiuses typographies text sizes whatever you want but the main thing is colors right now where we what we're doing so this is working now i want to style a component that i want and i want to uh have this theme accessible everywhere so i want to maybe access this theme in a separate component that i don't have here so i don't i don't want to give props to each component that i create so we're going to be creating context here so we're going to have context not in styles in source we're going to create context and let's say in context.psx okay now i'm gonna need to import react we're gonna need to create a contact and we're gonna need a use date we're gonna import this from react now let me just resize this because we don't need the window anymore now we need the team context so that we can you know you can use it and we need a team provider so we're going to say export const and we're going to say team context and we're going to create a context that let's just say any in this case because we don't care and we're going to say team at the beginning is going to be light and undefined it's going to be the switch theme function and we also need the team provider you can say export const theme provider which is going to be a react component functional component and let's say it takes an object for props and that object is empty and we're gonna need to give it children too and i'm gonna show you what this children means in a second and now we're gonna return the team provider team context dot provider and inside of it is going to be the children so everything that we wrap with this steam provider is going to be rendered inside so that we can have the access to the values and we're going to need a use state here for the current team and let's say that the beginning team at the beginning of light you can also use local storage here to save the steam preference the team choice okay and now we're gonna have a value if we're gonna pass down to the components and it's gonna be the theme the current theme and the set theme function so that so that we can uh switch the theme that we want now that's it for the context okay now we're gonna wrap the entire app inside of this theme provider so we're gonna go to main and we're gonna say theme provider and we're gonna wrap everything inside of it and now that's nice we have everything working and now we can access the theme inside of anything that's inside the main so in this app and any component that's inside this app and we're going to be we're going gonna need to use the context hook so we're gonna need to to see the current theme that is active so i'm just gonna import team context all right and we're gonna need a use context hook from react so let's say cons theme is equal to use context and we're gonna say the theme content that we have so basically we're gonna be extracting the theme value from team context team context sets the team value of like or of dark if we change it and now when we have this theme you can also use set theme to change this and we can remove the use date and now when we go to our app nothing has changed but this switching of the theme is going to be accessed everywhere inside the app so now let's get let's go to the straight up example i want to create a navbar okay i'm going to create a component folder components and inside of it i'm going to be creating a navbar so i'm going to say navar. i'm going to create a index.psnts so i can import export this and i'm going to create a scoped mod scss module for it we need these modules so that we can have more organized code and better uh code splitting so that our app doesn't take 50 gigabytes not gigabytes but 50 megabytes to load it's we want to be efficient we want as little of uh css and javascript that's not needed to load to be fetched so we have the navbar let's close everything here we have the navbar we have the index and we have the scss file for it so i'm going to create the functional component or the nav bar right and inside of it i'm just going to let's say we're going to have a nav and let's say h1 our logo and we're going to say unorganized list and then let's say we have about and we have design pricing and contact okay we're not going to be implementing this link these links but i just want to create a nav so that we can change it to however you like now i'm also going to need a used context hook here and we're going to import the theme context so that we can use the current theme now we can go to const theme and we're going to x extract the team object from team contact okay and now let's log this so we're gonna go console.log b now i should have enabled formatting here format okay it's not like i should have made the formatting now we can export you can first import the nav bar and then we can export this navbar here so that we just use this so that it's easier to if we have the the initial file should be index.ps and we have multiple index.ts files it gets confusing so we're going to export the default navbar okay and now we go to styling so we want to have we want this navbar we have a class name of we'll see for example nav and something else now we're not going to be doing it like this we're going to be doing it in a different way by writing this and importing writing the ss and importing it in here as an object so before we do that we can go to our app and let's just import the nav bar and let's check it out so import navbar and we're gonna put the navbar let's say let's say above everything so all right and when we go to our app this should be yeah there you go here's the navbar and it's working so we want to change the styles of this navbar and we want to see what theme is currently active and since we logged the the current theme in navbar.tsx and we imported here we can see that it's logging the current theme so if we change the theme it's gonna log the team so this navbar now knows if it's light or dark and that's all that we need to know so that we can change the looks of it so let's go to our app let's go to the styling and let's give it a let's import the colors first so i'm going to say add use and let's say styles and then you need to import abstracts and then colors.css because we have the colors now now let's just style this up so the nav bar should be lex and the direction should be row let's justify the content to be space around and we can align the item center now inside of this nav the h1 is our logo so let's say the color of this logo is white and let's say the list should be also plex and the flex direction should be roll of the list we should we should all say that it should be space between and let's remove the the not the unneeded and ugly circles and let's give it a font weight bold a cursor pointer so they look like we can select them and we need to say for example that they are white color white okay and we can add the list element inside the list and let's say they have a margin of 1 em so that we can split them now let's add this theme here so we can import dials from and we can import styles from navbar.modules module.sdsf it should be named module not modules okay now we import this and let's say nav has a class name of tiles.nav okay and now we when we go to our app we reload it's undefined so yeah we need to say ads import this and there you go everything is fine now there is one problem this is this is ugly right we need to change the background of the navbar whenever we switch the theme so right now it should be some some different stuff right it should be for example let's say blue and then it should be orange now let's implement this we're going to be we're going to create a class that's called light and this is for the light theme and we're going to give it a background color of primary and we're going to create a dark class and that we're going to give it a background color of secular so now if it's light team we're going to have a background color of primary and primary is i think blue yeah it's blue and we're going to have a secondary color for the dark team and it's going to be orange so now when we go to our navbar we have to add that class right because the navbar doesn't know if it's doesn't know that it's it should use the light or the dark class so that's why we have this theme here the steam object and let's say we can use string interpolation for this this if you think i didn't know you can solve it solve the problem like this so you can use string interpolation you can add any class you want so let's say t because this theme is always going to be either light or dark it can be either light or dark and that light or dark is the same name as our class here so when we go to our app right now we we reload let's see what's happening theme oh yeah we need to use styles theme and access the styles object and then theme then we go to our app there you go we switch the team it changes and you have built-in beautiful things that are working and that you don't need to worry about so if you want to change the primary colors and everything you can just go to the colors and change it so i want my primary card to be green i can save it here you can go to the app and everything is working it's beautiful right so also you have the light you have these guys so you have the uh reset where is reset okay reset so you have the text and the background for the light or the dark so you can add the background and the text class names to anything you want so you can say class name is equal to text so you can go to the app there you go it switches it switches each time so if it's dark team you you have this modular scalable thing that you can add so you can just add class names and it's going to be responsive for everything so let's say add the class name here too and we go to our app and everything is changing and you don't have to worry about javascript and checking everything 5 000 times and doing uh you know too many checks you can just let sas handle all the important things like variables and stuff like that all you need to do is have this smart way of creating the classes and the class names for that for the class themes so you want to create a theme and for the classes and you want to worry about the context so that you can use custom colors like i did here i can also add the background but it's in this case it's ugly right we don't want it to be like this but you can see that it's completely modular modular you just need to add the background and it's and it fixes itself and this is the main thing and this is the most important thing and this is how i handle scss sas with my react project so that i can implement n themes i can implement multiple teams here you can have a function that has light dark amoled green dark medium whatever team name you can think of and that you want to implement in your app and that's it now you know how to use sas with react and now you know how to implement dark mode light mode and any mode that you want

Channel: Tenacity Dev

Views: 16,239

Keywords: Dark Theme, Light Theme, Dark Mode, Light Mode, Scss, Saas, React.js, React, Toggle Theme, Switch Theme, Change Theme

Id: ys4YZr43BdY

Length: 21min 53sec (1313 seconds)

Published: Sun Apr 03 2022