How to add a theme menu (Light mode, Dark mode, System default) in Median UI v1.6
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
<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}
Original
<b:elseif cond='data:item == "Dark"'/>
<li>
<b:class cond='data:item == "Dark"' 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 == "Dark"'/>
<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/stw-web@main/local-storage.min.js');/*]]>*/</script>
</li>
<!--[ Active function ]-->
and paste the following code just below it<input class='navM hidden' id='onMode' type='checkbox'/>
Video tutorial
Watch tutorial
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!
2 comments