NextJS TypeScript Dark Mode | Code Blog [1]

welcome to this new video series where we'll be creating a coding blog using next.js and typescript in this video we'll be implementing dark mode and configuring material ui into our next.js typescript project so this is the very first video in the series and i'm going to showcase step by step video by video exactly how you can start from a brand new project all the way up to deploying it live and having a real coding blog resource out there on the internet so if that's something you're interested in please subscribe to my youtube channel and follow along with this series now i'm just going to demonstrate what we'll achieve today here we can see that we've configured the material ui components and dark mode and we can see that we've set up these colors for both the the pads for both the dark mode and the light mode and if i come to this top switch here i can toggle between dark mode and light mode and we can see that all of the components have the correct colors for things to display nicely so let's go ahead and get started building this project so far so i've opened up this new folder here now i'm already in a folder called code blog so i'm just going to run npx create next app and we're going to want typescript so we can have a dash dash ts and because we're in the folder already i can just go ahead and put a dot here so i'll go ahead and i'll load that and it's just going to install some dependencies and load now as you can see it's generated our project for us just a quick look at some of the key files here so we got our package where we can have our dependencies now we're going to be using material ui and some of the icons so we're going to need to install that and the dependencies and i've just found these from the getting started section so i can do an npm install and it's now mui slash material and we're also going to need at mui for the icons material and there's also some dependencies with the emotion library so we're going to need the emotional library specific for react and also the style library here so i'm just going to go ahead and install those and while they're loading we'll just take a look at this folder structure here so we've got our typical configuration files so typescript configuration a package we're going to get some next configuration here and our eslinting now we've got some styles here so we're going to have all of our global styles in this css file here and then for specific sections we can have uh their own styling here so i'm just going to wait for this to load but i will be deleting this so in the public this is where we have all of our assets so we can put things here like images and fonts and stuff like that and the most important is these pages so right now you can see that there's an api folder now we won't be using any of the server side rendering we're building a static blog so we can just go ahead and we can just delete this api here and i just want to go ahead and open up the index and the app pages here so the index like most of these frameworks this is the entry point so here we can this is where we can have all of our you know things that are happening on each of our pages and we can also go ahead and have this app component here and this renders all the pages now how next js works is and one of the highlights of next js is we don't have to set up routing we can just go ahead and create files and folders in this pages section and they'll be auto detected and they'll create the routes for us so we'll see that probably in the second video but in this first video i just wanted to set things up so if we take a look at this build script here we can just go we can run npm run dev and this will start to build our project for us on localhost 3000 so this is the previous example of what we're building just as a reminder and here is the default page so we get this welcome to next js um and right now it's not really doing much for us so we just want to go ahead and delete all of the boilerplate here so we can come into the index tsx file here and we can just go ahead and we can delete pretty much everything except for this head tag now we'll leave this head tag here and because we're creating a blog we're wanting to use and one of the benefits of next.js is we get the seo so unlike react where it builds all the everything in the in javascript then injects it in the dom and we don't get any uh seo benefits from web crawlers or anything like that we actually build these static pages much like gatsby or scully or something like that if you're familiar with those and it's a perfect candidate for building a blog and it's super easy to use too and why i brought that up is on our page we can have the name of our project we can have some meta tags and links and stuff like that and they'll just be rendered into the browser in html so i'm going to leave that head tag there i'll come back to you know making more seo appropriate for application later on in the project i just wanted to mention that and then in the app tsx file this is where it's you know rendering all of our pages that we haven't built yet but we can see that we've got this component here and it's putting in all the page props and stuff like that this is where we can start to um you know we'll start to build it here but we'll obviously refactor things as we the project becomes larger and larger now these globals scss um you know they're looking pretty good and material ui by default it uses roboto so we're going to want to use that and we're going to need to get the cdn for that that's the recommended approach so i'm just going to go ahead and just pretty much delete all of these here except i'm just going to keep roboto here and sans serif i'm going to have some of my own custom styling well we're going to use material yard primarily so i'm just going to get rid of that and i'm just going to put this up the top here just because it signifies everything so i'm just going to go ahead and save that global style sheet and then i can get rid of that but if you're referring to getting started with material ui obviously we've already installed it using npm or you could use yarn if you're using that and the recommended approach is to use these cdns now at first i you might have the initial thought that well you just want it to be on your project you download it um and then you can just have it locally run from your computer and you know that that could be something you do but the recommended approach is to use the cdn it's not likely that the google is going to go down for one thing and also you get the benefit of it's very easy to set up and you can just choose which weightings and stuff you want as well so you don't get mixed up with the different font weights and stuff like that um but of course if you prefer to have it you know be self-sufficient 100 and have it there you can go ahead and install it uh with the other approach so basically we can just go ahead and just copy that and we can close this global css file now and in this head tag provided by next is we can actually go ahead and get that in but we will actually need to wrap this index um we don't actually do it right here we actually do it in another file called document psx so just looking at the next js documentation here we need this custom document and it outlines that this is necessary because next.js pages skip the definition of the surrounding documents markup so we're going to need to sort of copy this here into a underscore document tsx file and they'll be picked up by the next js compiler so just here in pages here we can just have a file called underscore document we've got tsx and we can just pretty much copy this code in here and actually i think there might be a typescript version somewhere so i can go ahead and get that here so so i'm just wondering why they laid it out like this because we're going to need this render but we're going to need to cut that out here so let's go ahead and get rid of that there um i think i'm missing a bracket somewhere so there's just been one more curly bracket here and that should do it but we're just going to need the imports so i'll just copy those over so yeah we've got document document context html head main next script next script um you can see here when we're rendering the page we render you know the html and we've got the head there and then this content here takes the main content and it goes and it puts all of the other pages that get rendered in here so it basically it's just a place where we can add some uh links for our cdns and they'll be attached to our pages and it won't be doing weird stuff like getting them over and over again so this is the recommended approach here so get rid of that and i'm just going to copy this roboto font over again it's used by all the components and for things to work smoothly that's where we want to have it so i think i missed a bracket here documentation is sort of scattered a little bit full of typescript the javascript one you can just copy and paste but the typescript documentation i guess they didn't want to repeat themselves so they just put some of the stuff there for us so now i'm not sure why that's not working so i've just reformatted things a little bit better there all right so thanks for sticking through that basically we've got our imports we have this class my document extends document you know you get your initial props and you wait for those and then you can render the component and it pretty much just takes all the other pages um and then attaches this link here so that's the roboto font now also just want this font icons cdn so we'll just go ahead and put that here in the header here and we can see we should be able to see when we reload when we press f12 we go into the developer tools in the head here we can see that we've been linked to these style sheets here and obviously this is where we can have our seo benefits we can just put all the tags in there and all that and it renders the html for us so let's go ahead and continue building out this application we can now close the document page so what we'll do now is we'll set up the theming because obviously we've got dark mode and light mode we're going to want different colors for each of the different modes and with the documentation you can go to this material ui theme creator this is a link from the material ui website and you can go ahead and you can choose your colors and you can create your color palette and you can see it has these theme options here now i've already pre-selected my colors but of course if you want to change your colors you can come here and you can sort of choose your colors so i'm just going to go ahead and paste those in and where i'm going to paste them into is i'm going to create a new folder and i'm going to call it utils for our utility methods and i'm just going to call this theme dot ts so it doesn't need the x it's just going to be type script without the jsx stuff in it so we can have this theme.ts file here so and we've installed previously mui material and the styles so we can get access to the types for the theme options and the palette mode and as you can see if you look at any of these they have um you know a main a light a dark and a contrast and when you specify these it will help um create all the colors for your projects you just need to play around with that if you're not sure which colors do what it's pretty self-explanatory once you play around with the tool so most of those are in that format so i've got primary palette secondary palette error palette warning palette info palette success palette i put these all into their own objects because i'm going to reuse these for both the light and the dark theme and then you can see this sort of structure here it's exactly as it is here it's the object of the type theme options which is a palette uh with the you know it can have the type and then also all of the properties so we've got this background color here for the light theme for the light theme we're going to have a light background and a dark text and then all these um palettes will stay the same and for the dark palette i'll just copy that over as well you must have missed that i'll just copy that in for my other project we can see that we have all these other palettes here and we've just swapped the background to be a dark color and the text to be a light color and of course if there's any specific components that you want to change the colors of i'll show you a couple of ways how you can do that so but we won't need to do it you can do it from this configuration point um but um i'm going to do it in line and by selecting the colors from this palette that i've already created sort of thing and then i'm just going to export some helper functions here because right now our application we've just created an object with data basically of the colors but we need a way to actually detect what mode we're in so you can imagine that in a react component we'll have a little bit of state that just from the navigation bar that dictates what mode we're in now that's pretty much going to be the only state in the blog that we need so i'm not going to set up anything like it'll be completely overkill to use any state management tools like redux or anything like that so i'm just going to go ahead and just use the built-in state management with hooks so i'm going to go ahead and export and i think i can do nfn because i got a es6 package installed the snippets but i will need to rename it to get theme options and it's going to take a particular mode which is going to be of the type palette mode and it's going to return our theme options so if we just look at this palette mode we can see that it's just a tight light or dark and theme options we know what that is that's just what we've specified here now in addition to the palette why it's not called palette options is because if we look at the type here we have 12 into it you can see that you can apply other things typography transitions shadows and all that sort of stuff um if we do need to have any of that we'll come back to that but for now we just need the palette so we're going to need to just export this and basically we can just do a simple check if the mode is dark we can just go ahead and we can return the dark theme options otherwise if it's not dark we'll make it past that if check and we can just go ahead and return the light theme options next helper function that we'll have is we want the ability like when you go to a website and you toggle the mode you want to be able to go back to your preferred color scheme so if you you go to a website and initially it's in light mode and you switch it to dark mode and you close the website you want to come back to the website and you still want to see dark mode so we just need to do a little bit of local storage for that and we can just have this function here i'll just go ahead and copy this shape we'll call it get stored thing this won't take anything because it's just retrieving something from local storage but what it's going to retrieve for us is it's going to be the mode so it's either going to be the palette mode but it could be null because there might not be anything in there sort of thing so so this is where we can just go ahead and we can return from local storage we can get an item now we haven't set the item yet so let's just go ahead and create a setter as well so set store theme in this scenario it will take the mode that we're setting and it will not return anything so we'll just put void here or you can let type inference infer that so here we can just say local storage set item and item we want to set we'll just call it user theme and then we'll pass the mode in here so that means when we get the item we can just get it by the key that we've set here and that should be all that we need to be able to retrieve our token so we can set our token get our token and get the particular options that we need let's start to make use of that i'm just getting an error here because when you get it from local storage it gets it as a string so it could be a string or null so i'm just going to infer or typecast the type because we know it's going to be either palette mode or null because that's how we're going to set it so we can just say as palette no or no and the only case it wouldn't be palette mode is if you know they go into the you know the cookie or into the application um local storage i mean and specifically change it but they wouldn't probably need to be a developer to even think that and if they do that it's not catastrophic because you know the website will just behave as normally it'll just be in a slightly different color and then on first load on the next time they go back or they make a flip of the switch things would return back to their regular state so i don't think we have to allow for such extreme behavior because you can go to any website and just sort of change the front end of it um if you sort of hack into the developer tools and change things so long segway but this is how we'll get the stored theme so i can close this here let's start to work on so we've sort of done our index tsx here now we no longer need this image here remember this is the entry point of our application um it's just setting some heading tags so most of the work is going to be in the app file at tsx so we'll come here and we'll start to create some things so before i even do that i might just go ahead and create a component because we haven't created a component yet so just in this root of this project here i'm going to create a folder called components and i'm going to create a file called header and it needs the tsx extension so i'm just going to say header and i like to suffix my components with dot component so you're able to distinguish between you know components and just regular helper functions and stuff like that and plus it's sort of a more angular approach and also when you use the components i can put the word component in it so let's just generate a component now i'm just using a an extension here you can see es7 uh react redux structural wreck negative snippets so i'm just going to get this here um and actually i don't want this i want a more uh functional component an arrow functional component so i'm just going to change this to header component that way when we use it we able we're taking the point of view from a consumer when we're say an app file or something like that or later in another file we clearly know it's a component that we've built rather than a built-in material ui one or a material ui component or something else like a wrapper or a container or something like that so that's just a preference you can do whatever you want but this is going to be a functional component it's coming from react and it's just going to need to take some props here so obviously we'll just create an interface here for that and it's going to take a particular mode and it's just going to be that palette color or the uh palette mode from mui material and then we're going to need to do [Music] so we're going to consume this from the app tsx file for now so you can imagine that for us to use that what we want to do is we want to change the mode here because the app files sort of like you know the first place things render we'll put the header there and the header will be on every page and then all the other pages will route through there so basically if we're in another component we want to change the state in this component so we're just going to need to make a callback so that when we're in this component we can change the state back in here so i can just come here and i can have this on change method because that's what's used for the switch component um i'll make this optional even though you know it's definitely going to have it but just more generally speaking you might not you might have a disabled switch or something like that so the props what we're going to take in here is exactly that mode and the on change function and this is where we can start to not sure why i got this weird syntax here come here yeah i don't know what happened with my syntax highlighting there but i'm going to we're going to need to have a custom theme that we use so i'm going to come back to that but basically what i want to do here is i want to go to the material ui and i basically just want to use a component here and the component that i want to use is the app bar component so i'll get that and i'm just going to get this here as a starting point so i'm just gonna copy this box here put that in here like that and then i'm just going to go get all these imports and just delete the ones i don't need as i filter through so i might just put react here at the top here i like to have the you know next js at the top then react and libraries used by next gis um and then below that my own stuff here if i have any so right now we're just going to say we'll leave this icon here this typography let's change news to my name we will want to have a switch component rather than this button component so actually i think it's a self-closing tag here and we can just have a we can just set it to true and we can just have a color here of secondary so let's just go ahead and import that okay so that got rid of the errors for us now right now it's not having there's no like custom colors or anything like that so let's just have a look where we're at so right now we can't see anything that's because we haven't used the header so let's go ahead and just use that first we'll come to the at tsx file and right now i'm just going to have a fragment just so i can have something else in here and that will be the header that we just created the header component and i'm just going to bring that in so i got an auto import extension and also a self-closing extension you can see that it changes the second part of it if you needed it but we don't need it here so let's just go ahead and do this now we can see that a header you know it's going to take a mode and on change right now i'm just going to put mode equals to nothing and on change does nothing i'm just trying to get something that works okay and now we can see that we've got our navigation bar and we're using these custom um not custom the default colors that we get from material ui so now what we want to do is we want to customize this so what we'll do let's just create some state so above the return statement here we can just have uh a use the use state and we want to have a mode and that's obviously set mode now the state that we're using it's going to be of the type palette mode and we're going to have a dark it can either be darker light and obviously we're just going to need to import that import that from react and we'll put react at the top actually we'll put next up the top then react then and your eye material and then here's our stuff so next i mean rack's sort of included in x but it's sort of a dependency as well and dependencies and then component or styles that we've created so everything's pretty straightforward now what we want to do is we want to get something from local storage and this page is only going to well we only want it to happen once so what we want to do is we want to use the effect and then as an input here we just want to pass in an empty array because then it will just be on the life cycle method uh you know when the page loads or is mounted or is about to mount so it will only happen once and what is going to happen is we're just going to try and get something so we're trying to get the stored theme that we've saved and recall in our theme we have this get stored scene we're getting it from local storage now you might get it back but in the very first case it won't be set so we need to just handle that so we can just go ahead and get the stored theme and that's going to auto import for us i'll separate the default imports from the regular imports so basically it's quite simple we just want to have a simple if check here we don't need to do this if stored theme set the mode to the stored theme so let's just go ahead and get that use effect and we don't need to clean it up obviously because we're not doing any http requests with open promises or observables or stuff like that so we don't need to unsubscribe and have any potential memory leaks we're just getting it once and that will be the end of that let's just go ahead and get the use effect hook it's quite simple now what can be potentially memory intensive is you can imagine when you change the mode of the dark theme that it needs to sort of re-render everything it's changing the state of the color and the color is pretty much used in every single component and all every page and all throughout the entire application so what we're going to do is we're actually just going to use this use memo hook so what this is going to do i need to get the react one oh well it's a little disappointing but um i'm just going to create something here i'm going to just call it theme and basically we want to update the theme only if it changes so we're going to use this use memo hook here and we can just go ahead and we can create the theme and how we're going to create the theme well create theme this comes from material ui for one thing or mui material so it doesn't come from here i don't believe i believe it comes from the same places palette mode comes from so basically we just need to tell material and this function provided by mui material to create the theme for us based on our object that we've specified so we can use that function here and we can just pass in the get theme options from the utils that we created and we can just pass in the mode that's relating to our state so let me just grab that if i don't already have it and just recall in the theme here get theme options it's just all it's doing is just taking it's just returning the object for our palette based on the particular mode that were passed in and that mode is relating to the state of this app component here and it's on the app file here because it's going to go it's going to surround our entire application and it's going to propagate all throughout the application and if a user changes back and forth you can imagine that re-rendering the color is quite expensive so we're going to memorize the that so that store is cached essentially so then uh the expensive operation is no longer expensive uh and i will say even if that wasn't the case and you were to use use memo like we're talking fractions of milliseconds here it's just slightly more efficient to memorize it but you won't even be able to tell if you just used like use effect or something like that um but it's just you know slightly more correct nothing to agonize over um so we can go ahead and we can do that but this is just going to take it's going to detect changes in the mode here so basically in summary or in summary of what we've done so far we want to get a something from local storage to see if they have a preferred color scheme that they like and have set and if they do we can you know use the state and update and set the state such that you know the theme matches what their preferred theme is and we want to create a theme based on our color scheme that we've specified and we want to memorize that because it's an expensive operation and only create the new theme when the mode changes so we need the ability to toggle and set that up and we've created this header function here already and it does have mode and on change but we're going to need to actually implement that and that's how we're going to change our colors so basically there's another function it's called use theme and it comes from material ui once again so i'm just going to import that because right here this is where we're you know creating our theme so and it should be noted that there's this initial state of mode set to dark so where i'm just going to say um default is dark mode so even if they don't have anything in storage and they don't select anything it will be initially dark and we'll be creating the mode based on that dark theme but if they toggle it to a light mode you know obviously it's going to be using those properties um and that's how we're we're creating a theme off that but we can also go ahead and get the theme and use the theme and this is how you can get all the colors from your color palette if you want and you'd ideally oh you you can do this in like um obviously when we build out the application mode there's gonna be more things going on here um so let's say we're on a blog post and we want to use a color like how would we do it well we can just go ahead and i'm just gonna call this custom theme just to have a variable distinguished from the theme variable above and this is going to be use theme and basically with this custom thing you can do things like custom theme and you can see that we're getting this um intellisense here and then you can look into the palette and then you know you can get like the background color or maybe you get the error and you get the main error color here or something like that that was specified and you can imagine if you're in other components um you know you can just sort of use that um somewhere else i mean obviously we can just use it on the theme um theme palette etc but i just wanted to have this here just put in a comment here just as a reminder of how you would use it somewhere else because you won't be all just consuming it from here consuming it from another component so i hope that's clear um okay so what we can do here is we can have something that's called theme provider and i think it also comes from like most of these things it's coming from mui material and it's just airing at the moment for two reasons one it didn't have the completion here and the second is it doesn't have the correct prop so it does need to have the theme that we've selected so we've got our theme and we've selected it uh now we just need to use it and having the steam provider it puts it into all of the components so it puts it all throughout the application and in particular all the material ui components will be using this new color thing so we can just go ahead and put that color theme in here now one extra thing that might trick you up initially is you might think let's just say this you might think well it's initially dark mode why is my background color white and it's because these theme provider it's it's going to all the components all the material components but like how could we specify the default background and stuff like that to be dark or light and the text and stuff like that and there's just this extra component it's like a styling to provide some logic to indicate that it's a flag basically and we can just have this css baseline here and now you can see that we get this dark mode uh as we want so that's just a little something that might trick you up the first time you use it so we've got this header component now the mode this is just going to be equal to our mode now and then on change what we want to do is we just want to have this little bit of logic here so the new mode is just going to be the opposite of the old mode but we haven't set up true and false um so we can't just set it to not that but what we can do is we can say if the mode if that is equal to dark we'll just make it light and otherwise we'll just make it dark so then what we can do is we can pour set mode for the new mode and we can also call set stored theme for the new mode because we want to update our local storage such that it saves it for next time for the user so that's on change um but you're probably noticing it doesn't actually change and that's because this header component for this on change to work we need to set it up in our header component over here so we need that callback so what i want to do is firstly i want to use this approach where we have our custom theme here so i'm going to get that in and that's coming from material ui so i can get rid of this one here i don't need create theme don't need theme provider i don't need css baseline um another thing you could do is you could put all of these imports into here but i'm just going to leave it like that for now so basically i've used this use theme function to create a theme now we can use it and let's just do an inline style for our app bar so right now we've got this default primary have this pink sort of color but we're only using the header component in this one spot in the app file here it's only used once and it's not going we're not going to need to you know in some circumstances some circumstances um have different variations of that we will need the two different colors for dark mode and light mode but other than that it's only going to be used once so it's perfectly fine to have an inline style for this situation um i know some people don't like inline styles uh but it's a sort of you know you sort of when you're building components when you're first learning about you know web development you learn about separating your html css javascript into separate files and then you come to like components and everything's sort of there together it's actually clearer when it when you're dealing at the component level to see all the code there together but of course you could have a class and you know you could you can style however you want basically i'm just going to show you how i'll do something simple like this so i just have this style here and i'll get the background color and this is going to come from the custom theme it's going to come from the palette here and there's a background and then i want this paper version so it's not quite white but it'll be have a little bit of color to it um you know in light mode and then dark mode obviously it's going to be dark and i'm just going to go ahead and change this a little bit because the text we want is going to be the primary text that's also going to change depending on if it's dark mode or light mode so that's that so now i just want to go to this switch and we've got mode now so basically if mode is equal to dark i want it to be switched on dark mode is switched on i want the color to be secondary and then i just want this callback function on change and i just want this to call the on change function here that was maple sign oh what's going on okay yeah sorry about that i was just staring at it wondering why i wasn't working um yeah so basically we have our header component we're in dark mode and we can switch to light mode so that's already working i might just show a couple of examples of things that use that but essentially what we've just done well we've set up our next js project we've got typescript we've set up custom theming with material ui we've set up dark mode and in the header component there's a switch and when that switch gets changed we have this as a prop and this triggers the on change where it's consumed and the on change where it's consumed in this app file here this just goes ahead and it sets the state here and it also gets it from local storage or sets in local storage and sets the mode there so we know by default it's dark mode so let's go into light mode i'll just refresh this and then refresh the page and we can see that if we look into our application into our local storage here the user theme is indeed light so everything's working great now we just want to all we want to do is just use a few components uh just to make sure things work because sometimes you can set up dark mode um and if you haven't you know followed all the steps correctly or something like that you can get to a situation where some components work some don't sometimes you want to do some custom you want to change some colors or things and stuff like that so what i'm going to do is i'm just going to return to the app file and i'm just going to just use a few components and these components they're coming from obviously they're coming from material ui so you can pretty much just click on any of these and you can just get get them basically it's quite simple like for example the badge let me here's a badge you can see you've got this like icon here color you can just go ahead and copy the code and then you can come to your app component and then let's say below this header component here i'm going to and obviously this is happening on every page at the moment we're going to probably in the next video we'll set up the actual you know the blogging functionality what you actually sort of want and have those different pages and all that sort of stuff but i'm just going to go ahead and import a whole bunch of things so this has an icon as well so we've got that library here but basically i want to just import a few more so all i've done is i've just got badge typography box with rider here and also this mail icon just so i can have a few things to show off here so let's just go ahead and save that and right now we can see that this is dark and that's because we got this color action here so if we get rid of that we should just use the default uh color let's just put the number one there and now we can see that that icon changes depending on if it's dark mode or light mode and then we've got this you know our primary sort of badge color there let's just change that to a one now one thing i would want to do is i just want to create a box it's just a component to you know put in a box and it's going to have a closing tag because it's going to wrap everything so i'm just going to put my badge into the box and on the box it has some properties so i can go ahead and i can just specify the display i'll specify that to flex and i can then use things like justify content to center things i can align items vertically i'll center that and i will also give it a min height of 100 of the viewport height here now i'm going to put all these badges in a box and i'm just going to duplicate i'll have what like five of these or something maybe six so let's change this to two three four five six and i just want to change the color a little bit so we've got primary i want to have secondary just to highlight all of these different colors that we've set up in our theme info warning error understanding success let's just check those out so again this error here cannot read properties of undefined reading main oh there's an extra s here so we can see we've got these cool images icons and badges so that's cool now let's just do a little something else we'll just show a little bit of text and i'm going to show you how you can right now these themes i believe they're using the the main if you if you look up the top here they're using this main palette by default of course you could specify maybe you wanted a lighter or darker different shade in different circumstance or something like that so what i'll do is i'll just as an example i'll just have a below this badge here i'll just have a div just so i have a separate container and i'll just give it a style and i'll just give it a height of say 400 pixels just to you know have a bit of space going on here but what i wanted to specify was how we can consume we got our custom theme we're using that theme and i sort of showed you how to do it before but this would be a natural example of it you can go to the palette and you can just nest into that object you've created and then let's say you want main or something like that or maybe let's use something maybe dark just so we can specify something different to main and then if i was to use something i could say have some text here chomper pink so we see that we've got that there we can see that this text is a little bit darker than this text here or this badge here for number five so let me just change the typography to make the fonts a little bigger or smaller so i'm just going to have a typography here and i'll put that text in there and then i can actually override the color if i wanted to i'll set that to primary and i'll give it the variant of h1 and you can look at the documentation for that but as it implies it just makes the size bigger so let me just copy this down two more times so i can distinguish between the different sizes so i'm just going to say uh web developer here and below that i'm just going to put a divider and i'm going to change this color to secondary and then this one i'm not going to have a color but i'll take the color of its container which should be this warning dark and i'm just going to change this to next js type script dark mode material ui and then below this div i'm just going to have a simple paragraph this is the first video i don't really matter what it says um but i'll just save that just to demonstrate so cool we've got light mode here we've got dark text here dark icons we switch over we toggle it on and then we see that we've got this dark mode and we toggle it back we refresh it stays in light mode from local storage and it's persistent to local storage so thanks so much for watching this introductory video on dark mode custom material ui theming we're going to continue to build out this project and if all goes well i might even deploy this i won't deploy it yet because obviously it's too early but i do want to create a resource an online resource that's totally free so i can have some blog articles and short tutorials and step throughs and stuff like that a bit of a hybrid between uh learning tutorials like both written and video tutorials and also some more documentation and code snippets sort of stuff so i've got that in the back of my mind for this sort of project here but in the next video we're going to continue off and we're going to create the pages for a simple blog so we're going to use a little bit of markdown and you know potentially using components from there and continue to progress this blog and also have things like highlight syntaxing and all that sort of stuff so yeah if you enjoyed the video subscribe to this youtube channel i want to try and get a few of these out every week probably two videos a week or so um so you can follow along at your own pace and make some changes and stuff like that and i'm going to take you through the complete process starting from very scratch all the way to deployment so thanks so much for watching and i'll see you in the next video cheers

Channel: Jon Peppinck

Views: 489

Keywords: nextjs, typescript, next.js, next with typescript, tailwind dark mode, next js typescript, next js dark mode, nextjs typescript tutorial, next js tailwind typescript, dark mode javascript, nextjs tutorial, mastering nextjs, light dark mode javascript, dark mode tutorial javascript, dark mode js, nextjs blog, light dark mode js, dark mode, light dark mode, react dark mode, light dark mode toggle, dark mode with css variables, react dark mode toggle, react, React TypeScript

Id: km3x_3BfmYM

Length: 67min 31sec (4051 seconds)

Published: Tue Nov 02 2021