Hello everyone, today I'm going to show you how to make a blog's address bar darkmode or dark mode.
If you're using latest version templates, such as median-ui, fletro, and imgaz, you won't need to make any changes, but if you use other templates, you'll need to make some changes.
For a demonstration, click the darkmode button on this blog; however, you must do so via mobile, not PC, because the address bar on the mobile browser is what we change.
Basic JavaScript knowledge is essential if you are utilising different templates and need to make tweaks for them to work.
How to Enable Dark Mode in the Address Bar
Please copy the script below and paste it above the code </body> or <!--</body>--> , and save it if you haven't already.
<script>/*<![CDATA[*/ /* How to Enable Dark Mode in the Address Bar by trickpk.com */ /* Require template median-ui, fletro and imgaz */ var addrsDfClr = '#f89000'; //default color var addrsDrClr = '#1e1e1e'; // dark color document.querySelector('.isDrk').addEventListener('click', addrsDrk); // dark mode button document.querySelector('.mD').addEventListener('click', addrsDrk); // dark mode button function addrsDrk() { var cekdk = document.querySelector("#mainCont"); // id tag body if (cekdk.classList.contains('drK')) { // check if body has a class named (drK) document.querySelector('meta[name="theme-color"]').setAttribute("content", addrsDrClr); // if there is change the color } else { document.querySelector('meta[name="theme-color"]').setAttribute("content", addrsDfClr); // if not return to original color } } addrsDrk(); /*]]>*/</script>
So that's how to make the address bar blog support darkmode that I can provide this time, I hope it's helpful, and thank you for stopping by.