1 00:00:00,150 --> 00:00:06,930 And once we're set with our dates, so once we know how to use my address, of course, and let's worry 2 00:00:06,930 --> 00:00:14,760 about the toggle functionality where I would want to change the values for my background as well as 3 00:00:14,760 --> 00:00:21,210 the text, because think about it, not only you need to change the background for all body, but you 4 00:00:21,210 --> 00:00:26,340 also need to change the text, because if you go to the dark background, of course, you'd want your 5 00:00:26,340 --> 00:00:27,940 text to be visible. 6 00:00:28,170 --> 00:00:34,620 And like I said, this is going to be the case where we will go to see someone and write a little bit 7 00:00:34,620 --> 00:00:35,550 of success. 8 00:00:36,030 --> 00:00:42,420 So now I'm going to navigate to next year as first and you'll notice that this is somewhat typical setup 9 00:00:42,960 --> 00:00:48,150 where we have serious variables and for the most part, we just attach it to the road. 10 00:00:48,780 --> 00:00:53,630 And essentially that means that everywhere in our document we can access those values. 11 00:00:54,000 --> 00:01:00,300 And if you're not familiar with those variables, the way they work, you go with hyphen, hyphen, 12 00:01:00,720 --> 00:01:03,960 some kind of name, and then the value. 13 00:01:04,380 --> 00:01:11,240 And what that means is later when you're typing this, you simply can access that value. 14 00:01:11,580 --> 00:01:17,160 And that way, if you need to change it to something else, then of course, you just need to do that 15 00:01:17,370 --> 00:01:18,820 in one place. 16 00:01:19,110 --> 00:01:26,850 So, for example, if I change my mind and if I would say that what was primary color, it is just going 17 00:01:26,850 --> 00:01:29,280 to be simply red once you change it. 18 00:01:29,310 --> 00:01:35,460 Notice everywhere where I used in the access code that value the primary one. 19 00:01:35,640 --> 00:01:42,690 Of course, now I have a different result on a screen so I can already see that as I keep on scrolling 20 00:01:42,930 --> 00:01:45,980 the hearing to has the class of primary. 21 00:01:45,990 --> 00:01:52,840 And by the way, if you want to access that value, you just go with VAR and that whatever is the variable 22 00:01:53,580 --> 00:01:56,500 and then also button this primary. 23 00:01:57,000 --> 00:02:03,090 So if I'm going to be changing this value, I'll also have changes in my document. 24 00:02:03,480 --> 00:02:05,530 So hopefully that squares. 25 00:02:05,550 --> 00:02:11,530 I'm going to go back to my pin color and normally you just do that in one place. 26 00:02:11,820 --> 00:02:17,490 If you take a look at the rest of the project, any of the project, you'll notice that in the source, 27 00:02:17,490 --> 00:02:19,850 in the index says this is what I have. 28 00:02:20,160 --> 00:02:21,070 So I have a route. 29 00:02:21,240 --> 00:02:26,150 So I'm attaching all of them to the demo because I would want to use it throughout my document. 30 00:02:26,370 --> 00:02:31,890 I have some kind of values and that throughout my sources I'm just accessing them. 31 00:02:32,040 --> 00:02:36,120 And again, we access them by VA and then whatever is the name. 32 00:02:36,450 --> 00:02:42,000 Now, this project is going to be a little bit different since, of course, I would want to have essentially 33 00:02:42,300 --> 00:02:44,350 two values because let's think about it. 34 00:02:44,640 --> 00:02:50,280 So at the moment, yes, I have one color for the background, which is white, then I have one color 35 00:02:50,280 --> 00:02:52,170 for the font, which is this black one. 36 00:02:52,440 --> 00:02:54,930 I'm going to have one primary color. 37 00:02:55,560 --> 00:03:00,230 However, we need to keep in mind that of course, we have two themes. 38 00:03:00,990 --> 00:03:09,030 So the setup we're going to have is two classes, one for dark theme and then the other one for the 39 00:03:09,030 --> 00:03:09,480 lighting. 40 00:03:10,110 --> 00:03:15,090 Now, one thing we need to keep in mind, though, that the names for the variables that will be setting 41 00:03:15,090 --> 00:03:17,640 up in those classes need to match. 42 00:03:18,060 --> 00:03:23,550 And not only they need to match to each other, but they also need to match to whatever we have right 43 00:03:23,550 --> 00:03:24,130 now in here. 44 00:03:24,510 --> 00:03:28,770 Now, I can tell right away that we can remove this route once we're done. 45 00:03:28,770 --> 00:03:33,760 Setting up those classes will be able to remove the rod and the functionality won't be changed. 46 00:03:34,050 --> 00:03:39,780 Now, why the class names need to match or I'm sorry, why the variable names need to match to whatever 47 00:03:39,780 --> 00:03:40,520 I have enrolled? 48 00:03:41,370 --> 00:03:44,520 Well, simply because I'm already using them in my success. 49 00:03:44,880 --> 00:03:50,670 So, of course, initially, when you're setting up, just make sure that if you have Deo's two classes 50 00:03:51,030 --> 00:03:54,390 that the variable names match to each other. 51 00:03:55,080 --> 00:04:02,670 And then once that is done, then of course you can use it in the access so you can use those variable 52 00:04:02,670 --> 00:04:03,090 names. 53 00:04:03,360 --> 00:04:04,980 So in my case, I already set up the route. 54 00:04:05,070 --> 00:04:06,570 So we have something on the screen. 55 00:04:06,750 --> 00:04:13,320 And then once we set to classes, once we set up those values, then of course, our remote is to show 56 00:04:13,680 --> 00:04:17,120 that, yes, we don't need that route selector anymore. 57 00:04:17,610 --> 00:04:24,540 So after this long an annoying intro, we're going to go to dark theme again. 58 00:04:24,630 --> 00:04:28,570 Class time is up to you because, of course, we'll have to access Energetics. 59 00:04:29,040 --> 00:04:31,050 But I'm going to go with dark theme. 60 00:04:31,530 --> 00:04:39,600 And then like I said, I want the names of my variable to be exactly the same because I'm already using 61 00:04:39,600 --> 00:04:41,340 them in my success. 62 00:04:41,730 --> 00:04:42,900 So I'm going to copy and paste. 63 00:04:42,900 --> 00:04:44,550 And by the way, that's not what I want it. 64 00:04:45,000 --> 00:04:45,960 So I'm going to copy. 65 00:04:46,890 --> 00:04:52,350 We're going to post and now, of course, I would just want to change these viewers around after deducting 66 00:04:52,350 --> 00:04:57,000 what I would want, well, is the background going to be white or is it going to be dark? 67 00:04:57,540 --> 00:05:00,300 And you can probably already guess that it is going to be dark. 68 00:05:00,690 --> 00:05:06,020 So I'm going to cut it out from the font and copy and paste what the values are up to you. 69 00:05:06,030 --> 00:05:11,100 But in my case, I'm just going to be flipping them and then I'm going to go with hashtag FMF. 70 00:05:11,490 --> 00:05:12,960 So that is going to be different color. 71 00:05:13,290 --> 00:05:20,850 And as far as the primary, well, when we switch to dark time, I'm just going to change somewhat of 72 00:05:20,850 --> 00:05:26,480 the color here where it is one kind of shade of pink, at least in my opinion. 73 00:05:26,940 --> 00:05:30,570 Obviously, if you're color expert, you're probably yelling at me right now. 74 00:05:30,570 --> 00:05:35,180 But in my opinion, this is one shade of pink and then we go to the lighter one. 75 00:05:35,340 --> 00:05:40,650 So once we get to a dark mode and of course, I would want the shade to change a little bit. 76 00:05:40,950 --> 00:05:46,980 So I'm going to go with hashtag for A and then seven C and then four. 77 00:05:47,280 --> 00:05:48,420 So that's going to be Mashad. 78 00:05:48,840 --> 00:05:53,910 And then for the light one, what I'm gonna do is copy and paste everything. 79 00:05:55,280 --> 00:06:03,710 And then, of course, I'll change the name, I'll change it to the light theme, and of course, I 80 00:06:03,710 --> 00:06:04,930 would want to change these values. 81 00:06:05,300 --> 00:06:07,360 So, again, I'm going to go here with Jeff. 82 00:06:07,380 --> 00:06:14,720 So I'm just going to cut out this value and we're going to change it if we do need to have a hash tag 83 00:06:14,720 --> 00:06:18,030 here and copy and paste the dark one. 84 00:06:18,590 --> 00:06:26,990 So we have dark theme and lighting and at this point we can either delete it or comment order just because 85 00:06:26,990 --> 00:06:30,240 I would want you to understand that you don't need to have it anymore. 86 00:06:30,710 --> 00:06:32,290 So now we have two things. 87 00:06:32,720 --> 00:06:35,380 We have dark thing and then we have a lighting. 88 00:06:35,660 --> 00:06:39,120 And the moment we say we are like, hey, listen, where did my colors go? 89 00:06:39,500 --> 00:06:48,020 Well, they are still there, but we will need to attach those glasses to our HDMI at the moment. 90 00:06:48,030 --> 00:06:53,200 Notice I do have the body, so body selector and I am using the color. 91 00:06:53,630 --> 00:07:00,890 However, I do need to add those classes to my e-mail or more specifically, one class at the time since 92 00:07:00,890 --> 00:07:01,730 I would want to toggle. 93 00:07:02,030 --> 00:07:02,840 And then. 94 00:07:03,830 --> 00:07:10,220 Everywhere where I'm using those values, you'll notice that our look is also going to change. 95 00:07:10,580 --> 00:07:18,680 So now, of course, we will need to navigate back to abcess and set up our button so we have the button. 96 00:07:18,890 --> 00:07:19,360 Correct. 97 00:07:19,700 --> 00:07:22,970 And once I click the button, of course, I would want to change that thing. 98 00:07:23,360 --> 00:07:25,970 Now, I'm going to start by setting up some kind of state volume. 99 00:07:25,970 --> 00:07:35,870 So constant theme and then set the that's the first one that I'm going to go with use state and whichever 100 00:07:35,870 --> 00:07:37,340 theme you want by default. 101 00:07:37,760 --> 00:07:39,560 So in my case, I'm going to go with lighting. 102 00:07:39,830 --> 00:07:45,460 Just make sure that the text that you're passing in matches the class name. 103 00:07:46,070 --> 00:07:52,730 So in here, if you call this Burrito and Taco Bell, please use the same names in your abcess. 104 00:07:53,060 --> 00:07:57,880 In my case, I have Darkling and I have a lighting and I would want to start with the lighting. 105 00:07:58,280 --> 00:08:00,750 So once the uploads, I would want the lighting. 106 00:08:01,070 --> 00:08:06,710 That's why in the Abdus I'll pass here restring of light and amante. 107 00:08:07,220 --> 00:08:08,510 That's the starting point. 108 00:08:08,930 --> 00:08:10,910 Then I would want to have a usufruct. 109 00:08:11,420 --> 00:08:13,580 So I'm going to go here with usufruct. 110 00:08:14,580 --> 00:08:21,270 And then I'll pass in my callback function and I would want to run my callback function every time this 111 00:08:21,270 --> 00:08:27,270 theme changes, so eventually, of course, there's going to be a function that is called whenever we 112 00:08:27,270 --> 00:08:30,570 click the button, and in that function will be changing the value. 113 00:08:30,870 --> 00:08:34,680 And then every time that changes, I would want to do something. 114 00:08:34,860 --> 00:08:37,400 That's why I'm going to call my theme over here. 115 00:08:37,710 --> 00:08:40,740 And we also know that this is going to run by default. 116 00:08:41,130 --> 00:08:41,490 Correct. 117 00:08:41,910 --> 00:08:48,930 So this Ahrons right away, when my app loads at the moment, what does the theme value will? 118 00:08:48,930 --> 00:08:50,200 That is the lightning. 119 00:08:50,490 --> 00:08:56,370 And here comes the magic, where again, we're just going back to vanilla JavaScript where we go to 120 00:08:56,370 --> 00:08:57,240 document. 121 00:08:57,630 --> 00:09:05,010 And then if I would want to access the HDMI element, I just need to go with document element. 122 00:09:05,160 --> 00:09:07,580 And if you want to console it, please, definitely. 123 00:09:07,600 --> 00:09:11,050 This one you'll see that we have access to HDMI Ohman. 124 00:09:11,460 --> 00:09:18,480 And if I would want to add a clash, because that is effectively what we're doing with adding a class 125 00:09:18,750 --> 00:09:21,240 of light team on the element. 126 00:09:21,480 --> 00:09:23,850 I simply need to go with class. 127 00:09:24,240 --> 00:09:28,310 And then and now what is going to be the value of my class name? 128 00:09:28,740 --> 00:09:31,020 Well, that is going to be theme over here, correct? 129 00:09:31,930 --> 00:09:36,940 So if you go with theme, you'll notice that right away I get my lighting. 130 00:09:37,360 --> 00:09:40,980 By the way, I can clearly see that because I have my support here. 131 00:09:41,410 --> 00:09:45,130 Of course, I would want to change this value to my dark color. 132 00:09:45,520 --> 00:09:46,150 So I'm here. 133 00:09:46,210 --> 00:09:47,590 That should be the primary. 134 00:09:48,310 --> 00:09:49,660 And just copy and paste. 135 00:09:49,930 --> 00:09:56,290 And now you'll notice that everything got a shade darker because now, of course, I have different 136 00:09:56,410 --> 00:09:56,620 color. 137 00:09:56,950 --> 00:09:58,360 So that is my default theme. 138 00:09:58,370 --> 00:10:04,840 And if you want to double check that again, navigate to the star, I would suggest probably a bigger 139 00:10:04,840 --> 00:10:06,630 browser window and check it out. 140 00:10:07,030 --> 00:10:08,830 I have HDMI element. 141 00:10:08,950 --> 00:10:15,430 Like I said, we went back to your script once the uploads, we target the element and I added the class 142 00:10:15,430 --> 00:10:16,620 of light. 143 00:10:17,470 --> 00:10:25,420 So now the last step is setting up the function that changes the toggles between lighting, inductive 144 00:10:25,780 --> 00:10:27,140 lighting and acting. 145 00:10:27,520 --> 00:10:33,940 So on here, why don't we set up that function first, at least the placeholder so we don't have a big 146 00:10:33,940 --> 00:10:38,350 fat error from the react and we're going to go with our function. 147 00:10:38,710 --> 00:10:44,380 And for the time being, I'm not going to add any functionality in here and I'll simply say unclick. 148 00:10:44,560 --> 00:10:49,390 So once we click the button, then of course I would want to toggle my thing, toggle thing. 149 00:10:49,780 --> 00:11:00,370 And in here we go with if the game is equal to the light light theme, then what I would want well I 150 00:11:00,370 --> 00:11:02,080 would want to change it to the dark one. 151 00:11:02,080 --> 00:11:02,480 Correct. 152 00:11:02,830 --> 00:11:10,750 So if the theme is light then set theme and again, make sure that the values match exactly what you 153 00:11:10,750 --> 00:11:11,680 have for the classes. 154 00:11:12,160 --> 00:11:13,450 And here I have darkling. 155 00:11:13,450 --> 00:11:20,190 However, if it is already the ducting, well then we just go with else and then set them. 156 00:11:20,590 --> 00:11:22,690 And of course now we're looking for the lighting. 157 00:11:22,870 --> 00:11:24,790 So effectively the opposite values. 158 00:11:24,940 --> 00:11:30,910 And once we set up this functionality, of course our double check that the attribute is correct. 159 00:11:30,910 --> 00:11:33,370 In this case, that is going to be on click. 160 00:11:33,790 --> 00:11:39,400 Then I'll save and I'm going to navigate to the bigger screen and now notice in the elements. 161 00:11:39,820 --> 00:11:42,400 If I toggle now, I have dark theme. 162 00:11:42,880 --> 00:11:50,800 So the class changes and as the class changes, so do the values that I have for my variables. 163 00:11:51,520 --> 00:11:59,410 So if I switch from light team, dark team, of course I still have the same variable names or the values 164 00:11:59,410 --> 00:11:59,920 are different. 165 00:12:00,460 --> 00:12:09,100 And then of course now these values are used in my success and that's how we can set up toggle and react.