Creating a Dark & Light Toggle Mode on your UI Designs

today I'm going to show you how to create a custom light and dark mode toggle on your websites before we begin to when to mention this video sponsor Skillshare comm which is an online learning community for creators with over 25,000 classes in design business and more so whether you want to feel your curiosity your creativity or even your career skill share is the perfect place to do just that for instance you're about to watch my video on a UI UX topic but you could watch this full UI UX course at Skillshare Gil share is also super affordable with an annual subscription of being less than 10 bucks a month but if you're one of the first 500 people to click on the link here in the description in YouTube then you get the first two months 100% free so join up hey everyone what's up Gary Simon of course tetra comso today we're going to take a look at how to integrate and create a light and dark mode toggle for your user interfaces so first the why well it may be late at night people don't want to be blasted in the face by all that you know bright light maybe their their battery power is low on the phone.i so there's any number of options basically you're just giving people an option and that's always a great thing alright so we'll be doing this with native CSS variables and also custom data attributes in HTML to achieve this and I'll show you exactly how to get up and running so partit a square do you or will you go going forward in your use UI designs by default have a light and dark version all right let me know in the comments and let's get started all right so first before we get into any code I wanted to just quickly preface this that when you're doing this in terms of from a design perspective design fundamentals for your user interface you're gonna want to hop into something like Adobe XD sketch figma whatever you use for your UI design tool and make sure that you plan your colors beforehand during this mock up slash prototype phase it's just gonna make your life much easier as you can see I knew this was gonna be really simple so I just did this very quick layout of you know kind of basically what I wanted with exception to the toggle button I didn't need that put that here but really having the light version and your dark version that way you know exactly what should look like is gonna be a lot easier so you can grab the color codes or whatever in hues so that you can just easily integrate them once you have it ready to go in your front-end so let's go ahead and get started I'm here in Visual Studio code which is a free code editor by Microsoft and I have a blank folder called dark so go ahead and create a folder open that full that empty folder up with Visual Studio code well create an index dot HTML file hit exclamation point enter let's close this welcome tab here we're gonna link up a style sheets CSS main CSS let's create that CSS folder with a main dot sass file you'll need the sass by extension so you can click watch sass and use go here click live sass and you can install it and then reload same thing we're also going to use a live server so type live server you'll find this one install that as well because we're gonna use that momentarily all right so let's go back to our index dot HTML here and save I'm gonna get rid of this and hit ctrl + just to get this a little bit bigger I'm gonna make sure everybody could see what I'm doing and we're initially just gonna get started by writing out the HTML that's necessary for our layout so we'll have a div class a container inside of here we'll have an h1 element I light fast dark mode will have a div class of toggle container and inside of that we're gonna put an input field with a label by the way this toggle that I'm going to be using along with the CSS to style it appropriately is coming from this particular code pen right here by Marcus Burnett I just wanted to mention that get a give credit where credit's due right alright so after that all we have is a single paragraph so P I'm gonna type lorem and I believe this is also a extension that you can download for lorem ipsum just fake generated text and that's all the HTML is for our situation so just before just so we don't forget yeah actually will style up the this later I'm just the toggle button rather let's go I back to control B to get here what's the right click and open with live server and of course it's already open on my other instance here let's open with live serving now alright there we go so let's style this up a bit alright so to get started we're gonna take the HTML element and we're gonna define our variables within this HTML element itself I but before we do that I'm just gonna set the height to 100% font family will be Montserrat of course it's just you know it's already installed my system so I'm not gonna bother importing it you could use whatever you want we're also gonna do is display grid align Center oops a line items center and then also justify items Center and this will Center vertically and horizontally the container class that we have in here right there alright so let's say that we'll see a slight update looks like garbage still let's define the initial variables and these variables will be for the light version by default all right so we're using just straight up vanilla CSS variables here we're not using sass variables or anything we'll just type in I - - in that's the way you start with a native CSS variable and then the name we'll call BG for a background color and I'm going to choose FC FC FC it's extremely light almost white color we're gonna do a BG panel and the BG panel is going to be for this element right here and that will be EB EB EB and again it's just slightly darker then we're gonna have a color headings this will be for that blue primary h1 element and then also color and we'll say text a bunch of threes six threes there we go and so that's all for this stuff right here alright so again we say this nothing's gonna happen these are simply variables at this point they're not being used anywhere all right so let's go ahead and we'll set our body and by the way we will use this again HTML to rewrite or overwrite these variables right here for dark mode but we're gonna do that a little bit at once once we get this looking like the light mode should so let's just do this real quick so body it's gonna set the background color and we're gonna use var and we're gonna pass in our BG panel not gonna tell much of a difference you can see it's slightly lighter or darker it's not white and that's this code this color no that's this one right here nope I'm wrong sorry that should be BG there we go almost white but not quite then we're gonna go to our container so our container element is going to see say let's see background color will be set to a variable of BG panel here and we'll see if we save there it is still looks like garbage so let's add some more properties we're going to do a margin of 5e m a padding of 5e m and a border radius of 15 pixels or so there we go now we're getting closer and we're also gonna do a display grid just to structure real quickly this element here there'll be a toggle over here and then this stuff right there you could use flexbox as well but I like the grid so we'll do display grid grid template columns we'll have two at the top for the title at 80% and then their toggle switch will be just Auto and then grid template rows it's just gonna be Otto and Otto I have to have two rows and then we'll just do two grid template areas that will be our title we'll call it and in the switch for the second column and then for the second row we'll just say content and content the content will take up both of the columns here all right so let's save that there we go getting a little bit better will be overwriting this with that code pen information shortly let's close that out and inside of container will write our h1 rule set it'll be margin:0 to get any rid of any margin and we're gonna make the color our variable we'll do color headings heads ings but headings there we go and that's it for that one and then our paragraph I didn't like the way the paragraph text looked in terms of the line height and stuff a little bit close so let's go ahead and adjust that real quick so our color is going to be our variable of color text which is defined up above that's our last variable our grid area we're going to define that as content which is right here so now if we save this you'll see it now extends all the way and almost done here I hate when it brings that up every time and then we'll say font size make it a little bit larger 1.1 e/m units line height will be 1 point ATM units and finally margin top push it down a bit to 2e m and there's an error what am i doing no there's not an error it said there was an error but okay all right good so it looks pretty close to what I had in the mock-up except for this ugliness so let's fix that real quickly I am going to not type all these rule sets out instead I'm going to simply paste it alright so you can check out the code pen for this tutorial specifically and then you could paste this all in so this is what it is we have an input type checkbox' we have our label we have this information and if you wanted to you can make your background colors for this checkbox based on a light and dark I found that it works pretty well but I did use a variable right here this part this color headings and I'll show you how that works in a second let's just save this and now we can see our toggle right here and if we click it it changes to this blue color that blue color is right here color headings I thought it looked well for both of them but of course as we click this toggle the end interface isn't actually toggling back and forth yet so we still have a little bit of work to do to make that work so we're going to come up here and let's go back real quickly to our index dot HTML we're gonna put data theme is light by default and then we're gonna copy all this right here we're gonna paste it and we're going to say we're going to put in a specific check to see if the data theme is equal to dark all right if so we get rid of all the stuff we don't need to overwrite that we're gonna overwrite this information with whatever colors you have defined for your dark version and those happen to be and this time I'm not gonna sit here going one by one I'm gonna just paste that right there so you can see all the colors changed so if I hover over this color for the background we can see it's almost white I'm not quite this one is almost black but not quite so it's up to you in terms of how you want to change the colors for your dark theme you just want to make sure all the design fundamentals are there in terms of you know contrast and readability and all that stuff I so let's save that again nothing's gonna happen at this point unless if we come out here and we change this to dark manually there we go it reloaded automatically and it works but we need to make this toggle button control that behavior and toggle back and forth between light and dark for the data attribute so let's make this go back to light and we're gonna do a little bit of vanilla JavaScript so I will do script tag here let me get rid of this control B and inside of here we'll get our check box so for our check box will equal document dot query selector and we're going to get the input that is equal to name equals theme so the name property is theme right here on our input all right then we'll say checkbox to add eventlistener on change function and we'll put in here say if this dot checked all right so this checked it means we're gonna be toggling in too dark and before we get to that part because I don't want this to be too verbose we're gonna create a separate function because we're gonna also have to do an else and kind of run the same code a couple times and what we'll do is say let trans equals arrow function here and we will say there we go sorry about that and it will say document dot document element and that will just get us our HTML tag class list add and we put in transition we'll call it so we have to create a CSS transition and what that's going to be to do is again allow us to add a transition property to every element that changes in the HTML eye document and we'll the transition property will allow it to kind of just gradually change I over maybe like a half second or something from light to dark and you'll see what it looks like with it in without it so we'll do window dot set timeout and in here we're gonna say document.documentelement once again dot class list dot remove transition and we'll remove it after a period of about one second all right so now we can call trans and then we can say document.documentelement once again right there and we'll set attributes the data attribute so data theme as we called it will set to dark and then we'll say else and we'll just copy that code real quick know both lines rather probably could have passed in this as well and just give their self a variable to put in there or a parameter but I don't know I'm lazy so we'll just say light for that value right there all right so now let's give this a shot all right great so now you can see it's in a an abrupt immediate changeover so if we want that this stuff to work this transition we have to define a transition property all right so that will look like this all right so we will save this and pause if you need this by the way and also I got this here along with this general methodology for structuring this whole project with this tutorial right here and it is I quite elaborate and also there's some other goodies in here in terms of using HSL in perhaps a each hsla you could even use to set up dark darker or lighter variations of your primary colors or your hues so definitely check this out I'm gonna link both of these in the description of YouTube for those who have more robust layouts obviously what we're doing is very simple so now we got a transition check that out how cool is that so everything's changing our text is transitioning from this light to this dark color i we did change up this right here to be a little bit lighter in the CSS variable so this is a little bit of a darker more contrasting blue for this background and then this is light this is Mila just a tad bit lighter because I thought there wasn't enough contrast so it's up to you in terms of how you want to structure your light vers dark colors alright so hopefully you found that enjoyable if you did as always make sure to subscribe and for today's question answer in the comments below do you or will you start giving users the option to toggle between a light and dark mode All Right see you guys sound [Music] [Music]

Channel: DesignCourse

Views: 103,298

Rating: 4.9426522 out of 5

Keywords: dark mode, night mode, dark light mode css, dark light mode, dark light web design, dark light mode ui design, ui design, dark light css switcher, css toggle, css switcher, dark light toggle, css, javascript

Id: ZKXv_ZHQ654

Length: 18min 25sec (1105 seconds)

Published: Tue Apr 02 2019