How to Changing the Button of the Dark Mode in Median UI 1.3

Guide to Changing the Display of the Dark Mode Toggle Button,How to Changing the Button of the Dark Mode in Median UI 1.3
So Today In this tutorial, we are going to learn how to change the night button for Median Ui 1.3,
In Other Word, we will change the appearance of the dark mode switch button to make it look more familiar with the icons in this template.

What is a dark mode button?

It's possible that you don't know what is dark mode button, because there are many few bug templates that have a dark mode feature, median UI 1.3 and 1.4 have a dark mode button from which you can turn your website into dark mode. So if you are using median 1.3 I want to change the dark mode button then all the simple processes given below.

This tutorial is optional, you can apply it or not depending on your wishes.

All you need to do is change a little CSS code in the template, it's very easy if you follow this guide in sequence. First look for a collection of CSS code below:
/* InfinityBlogger.In */
.header .navicon .dark-switch i{position:relative;margin-left:8px;width:30px;height:10px;border-radius:8px;background-color:rgba(0,0,0,.15)}
.header .navicon .dark-switch i:before{content:'';display:block;position:absolute;top:-4px;left:0;width:18px;height:18px;border-radius:50%;background-color:$(link.bg.colors);-webkit-transition:all .2s ease;transition:all .2s ease}
 /* InfinityBlogger.In */

Replace all the code above with the CSS below:

/* InfinityBlogger.In */
.header .navicon .dark-switch i{position:relative;margin-left:8px;width:30px;height:10px;border-radius:8px;background-color:rgba(0,0,0,.15)}
.header .navicon .dark-switch i:before{content:'';display:block;position:absolute;top:-4px;left:0;width:18px;height:18px;border-radius:50%;background-color:#005af0;-webkit-transition:all .2s ease;transition:all .2s ease}
.header .navicon .dark-link .svg-2, .dark-mode .navicon .dark-link .svg-1{display:none}
.dark-mode .navicon .dark-link .svg-2{display:block}
.dark-mode .navicon .dark-link svg.line{fill:none;stroke:#989b9f}
 /* InfinityBlogger.In */

To avoid bugs, there may be some code that is the same as the code above, for that, look for and delete the code below (if it's on your blog):

/* InfinityBlogger.In */
.dark-mode .navicon .dark-switch i:before{left:13px}
 /* InfinityBlogger.In */

What if I want to replace the switch button with an icon?

Maybe many people think like this, especially when the mobile navigation button is removed, the header display looks a little strange. It would be much better if the switch button was replaced with an icon to match the search icon in the header
If so then in the first code above, add some CSS code below:
/* InfinityBlogger.In */
Initial CSS code
.header .navicon .dark-switch i{position:relative;margin-left:8px;width:30px;height:10px;border-radius:8px;background-color:rgba(0,0,0,.15)}
.header .navicon .dark-switch i:before{content:'';display:block;position:absolute;top:-4px;left:0;width:18px;height:18px;border-radius:50%;background-color:$(link.bg.colors);-webkit-transition:all .2s ease;transition:all .2s ease}

Add a few lines of code so it looks like this: .header .navicon .dark-switch i{position:relative;margin-left:8px;width:30px;height:10px;border-radius:8px;background-color:rgba(0,0,0,.15)} .header .navicon .dark-switch i:before{content:'';display:block;position:absolute;top:-4px;left:0;width:18px;height:18px;border-radius:50%;background-color:$(link.bg.colors);-webkit-transition:all .2s ease;transition:all .2s ease} .header .navicon .dark-link .svg-2, .dark-mode .navicon .dark-link .svg-1{display:none} .dark-mode .navicon .dark-link .svg-2{display:block} .dark-mode .navicon .dark-link svg.line{fill:none;stroke:$(sec.night.colors)} /* InfinityBlogger.In */
Then look for the HTML tag below and change it according to the example
/* InfinityBlogger.In */
<span class='dark-switch' onclick='darkMode()'><i class='check'/></span>

Replace all the code above with the code below: <div class='dark-link' onclick='darkMode()'> <svg class='line svg-1' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/></svg> <svg class='line svg-2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><circle cx='12' cy='12' r='5'/><line x1='12' x2='12' y1='1' y2='3'/><line x1='12' x2='12' y1='21' y2='23'/><line x1='4.22' x2='5.64' y1='4.22' y2='5.64'/><line x1='18.36' x2='19.78' y1='18.36' y2='19.78'/><line x1='1' x2='3' y1='12' y2='12'/><line x1='21' x2='23' y1='12' y2='12'/><line x1='4.22' x2='5.64' y1='19.78' y2='18.36'/><line x1='18.36' x2='19.78' y1='5.64' y2='4.22'/></svg> </div> /* InfinityBlogger.In */
Save your template and see the difference. May be useful.