React JS Interview Questions ( Dark mode Light mode ) - Frontend Machine Coding Interview Experience

so I've opened youtube.com over here and let me show you something so if I click on over here and select appearance and click on Dark theme you see the whole website's theme got converted into the dark mode and you can see similar patterns in other big Tech websites as well like Twitter Instagram Etc and that is the reason why this is such an important interview question as well so let's see how we can implement it into our own website and how you can answer these types of question when asked in your front-end interviews but before we do that hit that subscribe button right now if if you want to see more such videos like this because you won't find content like this anywhere else on YouTube so I've opened code sandbox over here and I'm going to initialize a new reactjs Sandbox and now what I'm going to do I'm going to quickly create a dummy app with a few pages so if you want to add multiple pages in our app you already know we are going to need react router Dom react Yep this is what we're going to install if you're using vs code or something like that you can use npm install react rodom instead of this div over here I'm going to say browser router and this is going to be coming from react Rod so I'm going to say import from react router Dom inside of this I'm going to write browser router now this browser router is the one that is going to wrap all of our pages and inside of this we are going to create our routes but above all of these route above all of these Pages we are going to share a Navar as well right so I'm going to have a Navar component here okay so let's create a route first for creating our routes we need to wrap it inside something called routes and this routes tag also comes from react ROM import it and we're going to need one more tag called route inside of this routes I'm going to have this route tag for all of our pages so let's say we have three pages like homepage about page and blog page so we have to to Define path as well so our homepage will be slash and we're going to give element over here which is going to be our component and similarly for about page I'm going to have about path and for our Blog Page let's have a Blog path here I'm going to have a home component and a about component and a block component now let's quickly go on and create these Pages first so I'm going to create a new folder over here called pages and inside of this I'm going to create three files first for home.js so inside of this home.js I'm going to have a component very simple component const home equals and I'm going to return a div from it inside of this div I'm going to have a H1 tag which is going to say home page and it's going to have a P tag which is going to say welcome to home page that's it and let's export it as well export default home and similarly we're going to have a about page and a blog page as well blog. JS inside of this I'm going to create a component about page inside of blog page I'm going to say block page let's say read our latest blogs here and actually all of this are going to have a class name of page which I'm going to style it later on let's just add the class name for now and inside of our app.js let's import all of these so home about and block page let's save this okay we can see our homepage if you go to to slab you can see about what about the blog page p l o blog great we can see all of our pages over here but we are also going to need a Navar as well so I'm going to create a Navar component and obviously this doesn't exist yet so I'm going to create a new folder for our components and obviously these are just good way to create components and Pages the conventional way so that your code looks clean and your folder structure looks good so inside of our components I'm going to create a navb bar. JS file and here I'll create a nav bar component now inside of this nav bar I'm going to wrap it inside of this nav HTML element which is good for our semantics and inside of this I'm going to have a div which is going going to wrap all of our links now we're going to have three links obviously homepage about page and block page so first of all for home page and when it comes to link with react rodom we use this link tag as you can see which comes from react ROM this works similar to the a tag but when we use these link tag our app won't refresh it will just transition us from one page to another in a blink of an eye so let me show you so if I say link two and this will be responsible for going to the homepage and I'll just say home below this I'm going to have a about page link and a Blog so this will go to about and this will go to block let's see what do we get uh obviously we need to import it as well so yeah imported okay we can't see navbar yet yet okay we need to return so return now we can see if you click on about can go about blog home yeah great everything is working fine let's just add very simple styling to this app first and then we can continue on implementing our dark and light mode so first of all in our styles. CSS I'm going to get rid of this and I'm going to have a very basic body styles which is some font family some margin and I'm going to have some padding and if you remember we gave this a page class name as well so let's add some styling for the page and I'm simply going to add display flex and flex Direction columns so that everything is aligned from top to bottom in every single page and height is going to be 92 viewport height and I'm going to give the remaining eight viewport height to our nav bar so below this I'm going to have a Navar class with height it viewport height and obviously we have haven't created this class name yet so inside of our Navar I'm going to give this class name of Navar and also I'm going to say display flex and justify content to space between and align items to Center and I'll give some gap between these links so I'll just say dot nav bar Dev inside of the nav bar is going to have a gap of 20 pixels oh I think uh I need to make this display Flex as well yep much better and let's get of this bluish default color over here so I'm going to say do navbar and I'm going to Target the a tag and I'm going to say text decoration to none and color to inherit let's see yeah that looks much better cool then we have completed the basic setup of our app now let's go go on and Implement light and dark mode inside of our app but before that if you're preparing for your front end interview and you would like me to help you in your front end interview preparation just click the link in the description down below and book a one-on-one call with me we're going to discuss tips tricks I'm going to give you a lot of resources I'm going to design a proper road map tailor to your situation which is going to help you out a lot in your frontend interview preparation so click the link in the description down below and book a one-on-one call with me so there are multiple ways to implement this light and dark mode but if you think about it we are going to have a variable which is is going to keep a state if the website is in light mode or it's in dark mode so let's say if we created that state over here we're going to have to pass that state into all of these pages to this nav bar as well and let's say so this is a very basic app but if you go inside of these Pages they can have like tens of 20s of component inside of it nested one inside each other so this is not the most practical way of doing this because then we will have to do a lot of prop drilling so we should use something which lifts our state up so that we can have the access to the state whenever we like so we can use a library like Redux but in a scenario like this I don't think it makes very uh makes some sense to use Redux over here so what we're going to use is context API Redux can be used in much bigger websites but in our website I think context API makes much more sense so in this video I'm going to discuss how you can Implement light and dark mode by using context API but if you want me to create a separate video where I discuss Redux as well or Redux toolkit as well to implement light and dark mode comment down below and let me know so what I can do over here I can create a new file called theme context. JS and inide of this I'm going to initialize our context API let me just uh and now I'll say const theme context will be equal to create context so first of all we will need to create a context which comes from react and also we're going to use something like use context to access our state in anywhere inside of our app right so below this I'm going to write export const use theme and this is basically a custom hook that I'm creating which is just going to be providing Us return use context and it's going to return this context which is going to be accessible inside of whole of our app right so whatever context that we create whatever states that we create inside of this theme context it's going to be accessible inside of whole of our app just by importing this use theme function over here or use theme custom hook over here right so okay let's let's build on top of this uh theme context so I'm going to create so export const theme provider so this is going to be the function which will contain all of our logic and we are going to wrap our whole of our app inside of this theme provider I'll show you in just a second let me just write out the logic over here so first state that we are going to create and first and the only state for now that we're going to create is for our dark mode right so I'm going to create a u State over here and we're going to import it from react and use States and this will have default uh value of false and this will give us two things a variable which I'm going to name is dark mode and a Setter function which I'm going to say set is dark mode which is going to will be used for changing this state over here right so below this I'm going to have a function const toggle theme and this function's job will be to change our theme so I'm going to take set is dark mode and I'll take the previous state so whatever previous state was if we are triggering this just invert it so not previous state this will if if the if it the dark mode was false it will be true if it was true then it will become false now below this I'm going to have a variable theme which we'll check is dark mode true if dark mode is there then I'm going to say dark else I'm going to say light and now I'm going to return our theme context over here that we have created so what we need to do we need to wrap our whole app inside of this theme context so I can say theme context do provider we need to somehow wrap whole of our app inside of this theme provider so what I will say I'm going to take children over here children and I'm going to render it over here and this theme provider will provide all of the state to our childrens so I'm going to say value this takes a prop called value and this inside of this value I'm going to send two things first is our state which is our theme theme and our function which is toggle theme now obviously you can uh use something like is dark mode as well you can send it directly over here but I use I like to use something like this uh theme variable which is much more clear on what it's doing it's changing the theme to add a dark or light mode and also we can use these uh strings as a class name inside of a I'll show you so okay let's try to wrap of our app and we can just take this theme provider and what I can do I can go to my app.js and I will drop whole of our app inside of this theme provider so let's take this tag and wrap whole of our app over here let's import it as well so from theme context and now whole of our app will have the access to whatever this theme provider is sending to our app okay let's uh let's test this out if we go inside of our nav bar and we use the same function that we used over there so it was use theme right so I can just say use theme let's import it from our theme context and I'll say const theme let's see what do we get inside of it I'm going to just console log it so yeah you see we get two things first is the theme variable that we sent and the other is toggle theme function great that is all we need so instead of using this theme I can just take this theme variable by destructuring it and toggle theme now you might be thinking how are we going to change these themes what I can do I can go back to our styles. CSS and what I can do I can give this some default CSS variables now if you're enjoying this tutorial up on till this point open your Instagram app right now and search roadside coder and hit that follow Button as hard as you can because I'm very active on Instagram and if you have any doubts any queries or just a normal message you can ping me on Instagram for this so go on do it I'm waiting what I'm I'm being serious over here open your Instagram app right now and follow me there oh you've already done it okay let's let's move on with this video so normally we write our CSS variables inside of something called a root so like this and we assign these variables but what I'm going to do I'm going to assign a data attribute so let me show you so if I let's say searched data attribute in HTML so what is this data attribute so this data attribute is nothing but a simple tag that we give to our HTML tags or maybe simple prop that we give to our HTML tags like this and then we can access it inside of our CSS so let me show you whenever we are changing our theme over here what I want to do I'll have a use effect let's see it's imported from react okay it's going to have an empty dependency and no it's not going to have actually an empty dependency it's going to C4 is dark mode if the is dark mode changes then only this will be fired off and whenever it will be fired off what I will simply do I'll say document dot document element dot set attribute and I will assign it the attribute of data theme and this will be whatever our theme is currently so let me show you where this is located so if we go to inspect and actually let me just open this U link into a completely separate page over here if I go to inspect and yeah you can see in HTML tag itself it has this data theme attribute which is right now light mode if we change it to dark mode which um okay let's say it's true by default and if I refresh our page now you going see the data theme is now dark so how are we going to use this let's see let me just turn it back to false and inside of our styles. says instead of this root what we can say is I'm going to use these two square brackets I'll say data theme equals to light whenever the data theme is equals to light our background color will be this text color will be this heading color so obviously you can assign more variables over here but for this example I've taken three variables but whenever our data theme is dark we are going to replace these variables with some dark Shades so I have these other colors over here which we're going to be using for our dark mode simply I can say inside of our body tag I can say background color and we're going to use the variable BG color for our H1 tags color to be and we're going to use the variable heading color and also inside of our body for our normal texts I'm going to use the color to be text color and now notice so by default obviously it's light mode but if I go on over here and turn this to True notice our app has been converted into dark mode awesome all right so obviously we we can't just go on and change this use states initial uh State over here by setting it to false and true every single time right so we have to make use of this toggle theme function somewhere so let's go on and create the switch for a dark and Light mode so I'm going to go inside of my navb bar. Js let me just U shrink it and over here just below this div I'm going to create a switch for our light and dark mode so let's have a Dev with class name mode switch and inside of this div I'm going to have a label tag inside of this label I'm going to have a input tag this input will be of type checkbox on change I'm going to call toggle theme function this function right here and I'm going to give this an attribute of checked how do we know if it's checked if the theme is dark so theme is dark uh let's see if we take it awesome we have successfully implemented our light and dark mode but this looks a little bit ugly this checkbox looks a little bit ugly so let's make this a little good-looking switch right so right below this I'm going to have a span tag and the span tag is going to Simply have a class name of slider and round now let's go to our styles. CSS and let's just add this first of all for our label I'm going to give some display inline block and some width and height to contain this switch and some position relative and margin left of 10 pixels so I'll tell you why I've given this position relative because inside of this I'm going to create a switch which will need a position absolute so let me show you so as you already know I've created a span with the slider class right so here it is this is going to be having a position absolute and our cursor is going to be pointer so whenever we have on it this is pointer you see these top left right bottom is for positioning the switch inside of this label we're going to give this some background color with respect to if it's light or dark mode and some transition of 0.4 second and you're going to know why I've given this transition in our next CSS class which I'm going to go and write and Border radius obviously because we want to give this some rounded Corners now whenever our app is in dark mode I want to change this background color so what I can say instead of this mode switch input if it's checked then I'm going to change the slider so I'm going to change the background color of the slider so notice see and due to transition it's transitioning slowly to that color now we going to need a knob like structure over here which is going to be moving from left to right so what I'll say I'll have a inside of this mode switch class for the slider I'm going to give this this before pseudo selector so this will allow us to create an element like knob over here so that element is going to be having position absolute inside of it so that we can place it whenever wherever we like content is going to be empty because we don't want anything inside of the VIS just want it to be a simple graphic like thing right height and width is going to be 16 pixel left and bottom is going to be 2 pixels by default as you can see we have this Gap over here that's why some background color of white and some transition of 0.4 seconds so that when we click on it it can transition to the right side which we haven't given it yet and obviously some B radius of 50% so this is round let's give this some transition so that whenever we click on it it goes to the right side so I can just simply take this can paste it over here and we're going to do the same thing when the input is checked then we're going to change this so I'll say whenever the input is checked then right inside of it I'll have a transform translate translate X actually and I'm going to give this 20 pixels so it's going to translate by 20 pixels so now notice Yep looks so good you can probably add some graphics as well like people generally add like sun and moon over here to depict light and dark mode right so y this is how you implement light and dark mode into your website and this is a very important reactjs interview question and let me know if you want me to make a similar video with Redux toolkit as well and if you like this video if you want to see more such videos click this link above my head to access the complete reactjs interview questions playlist

Channel: RoadsideCoder

Views: 20,103

Keywords: dark theme react, react theme switching, dark and light theme react, react theme toggle, dark theme react js, react light and dark theme, react dark mode, react js pagination, react interview, react interview questions and answers, react interview questions, frontend interview questions, javascript interview questions and answers, javascript interview questions, javascript interview, reactjs interview questions, reactjs interview, namaste react, namaste javascript, useContext

Id: 5XtvVH-v6kM

Length: 23min 20sec (1400 seconds)

Published: Sun Dec 31 2023