Friday, 23 July 2021

Add fast night mode to your template

Add fast night mode to your template
July 23, 2021


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

Explain how to install
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>
  
4. The following code is the night mode button, put it in the right place
<div class='dark-mode'><button class='toggle' onclick='toggle()' style='display:none' type='button'/><button class='mode' onclick='mode()' type='button'/></div>
  
5. Find ]]></b:skin> and place the code above it
/* 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:&#39;&#39;}
  .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: &quot;&quot;; position: absolute; width: 60px; height: 2px; background: #607D8B; display: block; top: 50%; margin-top: -1px; left: 100%; } .u-p-medium h3:before { content: &quot;&quot;; 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;}
  
6. Save the work and go to the preview
* 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.


Share This :
SUBSCRIBE TO OUR NEWSLETTER

No comments: