SVG Icon Sets script store 360

Hello everyone welcome to Shiva Technic World, Nowadays theme menu is popular on many websites that provide three options Light Mode, Dark Mode, and System Default, You might be finding a tutorial to add a theme menu in your Median UI theme applied Blogger website, then this tutorial is for you, in this tutorial Iam going to show you How to add a theme menu (Light mode, Dark mode, System default) in Median UI v1.6.

So without wasting much time let's check How to add a theme menu (Light mode, Dark mode, System default) in Median UI v1.6!

How to add a theme menu (Light mode, Dark mode, System default) in Median UI v1.6

First, go to your Blogger dashboard

Then click on the Theme option

Then click on the drop-down icon near Customize option

Then click on the Edit HTML option

Then find <style>/*<![CDATA[*/ and paste the following CSS below it

/* Theme menu */.headR .headM{display:block;position:absolute;top:0;right:0;padding:10px 0;width:150px;background:var(--contentB);font-size:13px;border-radius:10px 5px 10px 10px;box-shadow:0 0 15px rgba(0,0,0,.07);-webkit-transition:var(--trans-2);transition:var(--trans-2);overflow:hidden;z-index:18;opacity:0;visibility:hidden} .headR .headM:before{content:attr(data-text);display:block;padding:0 15px 10px;width:100%;font-size:11px;opacity:.7} .headR .headM >*{display:block;padding:9px 15px;width:100%;cursor:pointer} .headR .headM >*:before{content:attr(aria-label);opacity:.9} .headR .headM >*:hover{background:rgba(0,0,0,.05)} .navM:checked ~ .mainWrp .headM{visibility:visible;opacity:1} .navM:checked ~ .mainWrp .headM + .fCls{visibility:visible;opacity:1;z-index:17} .headR .headM .sydB{display:none} .bD:not(.drK):not(.syD) .headR .headM .lgtB{background-color:rgba(0,0,0,.1)} .drK:not(.syD) .headR .headM .drkB{background-color:rgba(0,0,0,.1)} .syD .headR .headM .sydB{background-color:rgba(0,0,0,.1)} .drK .headR .headM{background:var(--darkBs)} .Rtl .headR .headM{right:auto;left:0;border-radius:5px 10px 10px 10px}.headR .headM{display:block;position:absolute;top:0;right:0;padding:10px 0;width:150px;background:var(--contentB);font-size:13px;border-radius:10px 5px 10px 10px;box-shadow:0 0 15px rgba(0,0,0,.07);-webkit-transition:var(--trans-2);transition:var(--trans-2);overflow:hidden;z-index:18;opacity:0;visibility:hidden} .headR .headM:before{content:attr(data-text);display:block;padding:0 15px 10px;width:100%;font-size:11px;opacity:.7} .headR .headM >*{display:block;padding:9px 15px;width:100%;cursor:pointer} .headR .headM >*:before{content:attr(aria-label);opacity:.9} .headR .headM >*:hover{background:rgba(0,0,0,.05)} .navM:checked ~ .mainWrp .headM{visibility:visible;opacity:1} .navM:checked ~ .mainWrp .headM + .fCls{visibility:visible;opacity:1;z-index:17} .headR .headM .sydB{display:true} .bD:not(.drK):not(.syD) .headR .headM .lgtB{background-color:rgba(0,0,0,.1)} .drK:not(.syD) .headR .headM .drK{background-color:rgba(0,0,0,.1)} .syD .headR .headM .sydB{background-color:rgba(0,0,0,.1)} .drK .headR .headM{background:var(--darkBs)} .Rtl .headR .headM{right:auto;left:0;border-radius:5px 10px 10px 10px}

Then replace the following code

Original

<b:elseif cond='data:item == &quot;Dark&quot;'/>
                              <li>
                                <b:class cond='data:item == &quot;Dark&quot;' name='isDrk'/>
                                <!--[ Dark mode button ]-->
                                <span class='tDark tIc tDL bIc' expr:aria-label='data:item' onclick='darkMode()' role='button'><b:include name='moon-sun-icon'/></span>
                              </li>

Replace

<b:elseif cond='data:item == &quot;Dark&quot;'/>
                              <li>
                              <!--[ Dark mode button ]-->
                             <label aria-label='Dark' class='navM tDark tIc tDL bIc' for='onMode' role='button'>
                             <b:include name='moon-sun-icon'/>
                             </label>
                             <div class='headM' data-text='Theme'>
                             <span aria-label='Light' class='lgtB' onclick='modeL(); Navigator.vibrate(50)' role='button'/>
                             <span aria-label='Dark' class='drkB' onclick='modeD(); vibrate(50)' role='button'/>
                             <span aria-label='System Default' class='sydB' onclick='modeS(); vibrate(50)' role='button'/>
                             </div>
                             <label class='fCls' for='onMode'/>
                             <script>/*<![CDATA[*/ if (window.matchMedia){document.querySelector('.headR .headM .sydB').style.display='block'};Defer.js('https://shivaes207.github.io/shivatechnicworld.github.io/activater-pre.min.js');Defer.js('https://cdn.jsdelivr.net/gh/shivaes207/[email protected]/local-storage.min.js');/*]]>*/</script>
                             </li>

Then find <!--[ Active function ]--> and paste the following code just below it

<input class='navM hidden' id='onMode' type='checkbox'/>

Then Save the HTML

Conclusion

Hope this How to add a theme menu (Light mode, Dark mode, System default) in Median UI v1.6 tutorial will be useful to you, If you have any doubts related to this article ask me in the comments, Do share with your friends, Thanks for visiting, Have a nice day!