0:00
Hi everyone, welcome to KeyTube blogging and let's check how can enable dark mode in your
0:04
blogger theme. So let me just show you how it works. So I will go to my device setting and I will change the light mode to dark mode
0:14
And as you can see, the website is already converted into a dark mode
0:19
And when I again change it to light mode, the website will convert into light mode
0:25
So this is how the light mode and dark mode in website works
0:30
So let's check how can implement this so that whenever someone visit your website from desktop
0:36
or mobile devices, when they switch the light mode and dark mode, your website also automatically
0:42
change to that mode. So if this content is helpful to you, then make sure to hit the like button
0:48
Okay, I have removed all the previous code from this theme and let me just show you I
0:53
am in the dark mode, but the website is not changing to dark mode
0:57
So to add the functionality, you have to add a meta text and you have to add the CSS code
1:02
for dark mode. So let me just go to the blogger dashboard and under the theme section, let's take a
1:08
backup first so that if you do anything wrong in this process, then you can easily restore
1:13
it back to original position. So let me just click on edit HTML
1:20
And here you have to add a meta text just after the head tag
1:24
So let me just copy the meta text from here. And I will paste it right after the head tag
1:33
Now scroll down to the bottom and you have to find the global color for your theme
1:39
So as you can see, this is HTML and these are the global color settings that we need
1:43
to replicate and change it according to the dark mode. So let me just copy the all code from here
1:55
And I will go to the notepad file and I have to paste the CSS property right after the root
2:02
So let's paste it. And as you can see, we don't need the body font title font in the settings
2:09
So I will remove all the code from here. And as you can see, the body background color is
2:16
So you need to change the body background color. So let's change it to black
2:22
So you can change any color you want. Let's change the body bg color to black
2:35
Now let's change the outer bg color to black. So you just need to change all the background color to black so that it will look like a
2:44
dark mode. Now let's change the title color to white
2:55
Now let's change the meta color to white. Now let's change the text color to white
3:13
And let's scroll down and you can change the mobile menu color
3:19
So let's change the mobile menu background color to black. And you can also change the hero background color, footer color
3:31
So let me just copy this code. And I will scroll down all the way to the bottom of the CSS code
3:42
So this is the bottom of the CSS code, bskintag. So you have to paste the new dark mode CSS code here
3:51
Now let's click on save here. Now let's go to the website and let me just refresh this page
3:59
And as you can see, we have changed the website to dark mode and we have to change the heading
4:06
color to also white. So let me just find the heading color. Okay
4:11
So this is the post title color. So let me just change it to white
4:20
And this is the post text color. So let's change the post text color to white
4:26
So we basically change the color to white and background to dark like that
4:33
So footer hover color, footer post title color. So let's change it to something like white
4:45
Now let's save this code. Now let's refresh this page. And as you can see, the title color is now switched to white
4:54
So in this way, you can change any color according to your CSS code
4:59
Now let me just open a blog post from here. And as you can see, we have changed the text color to white
5:07
And we have changed the meta color and everything is in dark mode
5:11
Now let's switch to light mode from the settings. And as you can see, it is back to the light mode
5:20
And when I change it to dark mode, it will back to the dark mode like this
5:27
And it also works with mobile devices or tablet devices. So this is how the light mode and dark mode in blogger works
5:36
If you still have any doubt regarding this, then you can ask me in the comment section
5:41
And if this content is helpful to you, then make sure to hit the like button
5:44
I will see you in the next video. Thank you
