With the development of templates, we see various wonderful extensions and add-ons, giving you more choices, so adding us on this happy day is the night mode when you asked me do we really need this add-on? I'd say yes as site visitors we think we need more options. Such as switching to the night mode, which provides a comfortable browsing experience, especially if the blog is discussing news or something that prolongs the visitor’s focus. If the template has a bright white color, then you will really get tired of reading even with the option to reduce the brightness on the computers.
The important thing is to talk about our add-on, which is one of the best nighttime add-ons so far, similar to the night mode on YouTube, where you will not notice any white glow when loading the site or entering topics.
You can try the extension on our blog directly... It works on any template without problems
1. Log in to your blog
2. Appearance >> Edit HTML
3. Find <body> and put the following code below
<script>
//<![CDATA[
function auto(){document.body.classList.add('auto');if(new Date().getHours()>19||new Date().getHours()<6){document.body.classList.add('dark');localStorage.setItem('641234dark','true')}else{document.body.classList.remove('dark');localStorage.setItem('641234dark','false')}}function dark(){localStorage.getItem('641234dark')=='true'?document.body.classList.add('dark'):document.body.classList.remove('dark')}if(localStorage.getItem('641234auto')=='true'){auto()}else{localStorage.getItem('641234dark')==null?auto():dark()}function toggle(){localStorage.setItem('641234auto',localStorage.getItem('641234auto')=='true'?'false':'true');localStorage.getItem('641234auto')=='true'?auto():document.body.classList.remove('auto')}function mode(){document.body.classList.remove('auto');localStorage.removeItem('641234auto');localStorage.setItem('641234dark',localStorage.getItem('641234dark')=='true'?'false':'true');dark()}
//]]>
</script>
<div class='dark-mode'><button class='toggle' onclick='toggle()' style='display:none' type='button'/><button class='mode' onclick='mode()' type='button'/></div>
/* Button Mode */
.dark-mode{float: left; position: absolute; left: 90px; top: 25px; z-index: 98;}
.toggle,.mode{position:relative;float:right;outline:0;border:0;padding:0;overflow:hidden;cursor:pointer}
.toggle{margin-left:10px;border-radius:10px;width:33px;height:20px}
.toggle,.mode::before,.dark .mode::after{background:#ccc}
.dark .toggle{background:#444}
.auto .toggle{background:#6d6!important}
.toggle::before,.mode::before,.mode::after{position:absolute;content:''}
.toggle::before{top:1px;left:1px;transition:.4s;background:#fff;width:18px;height:18px}
.auto .toggle::before{left:14px}
.toggle::before,.mode,.mode::before,.mode::after{border-radius:50%}
.dark .mode{top:2px;left:-2px;overflow:visible}
.dark .mode,.dark .mode::before{border-radius:0}
.mode,.dark .mode::before,.mode::after{background:#999}
.mode{width:20px;height:20px}
.dark .mode,.mode::before,.mode::after{width:16px;height:16px}
.mode::before{top:2px;left:2px}
.dark .mode::before{top:0;left:0;transform:rotate(45deg)}
.mode::after{top:-3px;left:7px}
.dark .mode::after{top:1px;left:1px;width:14px;height:14px}
.u-p-medium h3:after { content: ""; position: absolute; width: 60px; height: 2px; background: #607D8B; display: block; top: 50%; margin-top: -1px; left: 100%; } .u-p-medium h3:before { content: ""; position: absolute; width: 60px; height: 2px; background: #607D8B; display: block; top: 50%; margin-top: -1px; left: auto; right: 100%; } .u-p-medium h3 { font-size: 20px; margin: 0 auto; text-align: center; display: table; position: relative; padding: 0 10px; }
/* Body Edit */
body.dark{background: #1c1c1c ;color:#ccc;}
* If you notice that the night mode is running on the background, here we have to apply .dark to each tag, for example, the sidebar #sidebar to become like this .dark #sidebar {here Css} Each template is different from another and it will take some time to apply to each tag
How Knowing the hashtags in the blog?
An easy way to find out the attributes of a blog element is to use the Inspect Element feature of your browser. Open your website, right-click in the space to apply and select the Inspect Item option
So as always, I'm talking to beginners. Comments are welcome to help.