Add Eye or Read Mode Feature in your Blogger Blog

Don't you think dark/night mode is so yesterday? 🙃 Now, its time for read mode feature.

So, what is read mode? 

In simple terms, read mode, or simply known as eye mode, enables users to read page contents with ease. It decreases the brightness of that page that comforts human eyes and comforting users when reading is what designers and bloggers should focus on. 

Please do not expect to change whole layout as we find in kindle or PDF readers when you enable read mode. This feature will be simple, yet very efficient💰. 

Let's start by taking a 💾 full backup of current design. 

Check it live on codepen.

CodePen - Add Read/Eye mode in Blogger

Dark mode is so yesterday. Start upgrading by adding eye mode or read mode in your blogger blog with this simple trick. Pure CSS and JS.

codepen.io

You have my permission to share this code elsewhere, however, it is mandatory to link this page.

(I) Adding HTML for Read/Eye mode Feature

First of all, we will add eye button in header and activate a function with onclick event. 

<span aria-label="Readmode" class="style-button" onclick="readMode()" role="button">
   <svg class="line" viewBox="0 0 492 492" xmlns="http://www.w3.org/2000/svg">
      <title>Read mode</title>
      <path d="M255.66 112c-77.94 0-157.89 45.11-220.83 135.33a16 16 0 00-.27 17.77C82.92 340.8 161.8 400 255.66 400c92.84 0 173.34-59.38 221.79-135.25a16.14 16.14 0 000-17.47C428.89 172.28 347.8 112 255.66 112z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"></path>
      <circle cx="256" cy="256" fill="none" r="80" stroke="currentColor" stroke-miterlimit="10" stroke-width="20"></circle>
   </svg>
</span>

In case you are using Jagodesain themes (fletro pro), search for <b:loop index='icon' values='data:items' var='item'> and remove the whole section and add the following code to display Read mode feature in header section.

<b:loop index='icon' values='data:items' var='item'>
   <b:if cond='data:icon &lt;= 3'>
      <b:if cond='data:item == &quot;Search&quot;'>
         <li>
            <b:class cond='data:item == &quot;Search&quot;' name='isSrh'/>
            <!--[ Search button ]-->
            <label class='tSrch tIc bIc' expr:aria-label='data:item' for='offSrh'>
               <b:include name='search-icon'/>
            </label>
         </li>
         <b:elseif cond='data:item == &quot;Dark&quot;'/>
         <b:if cond='data:view.url != data:view.url params { amp: &quot;1&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>
         </b:if>
         <b:elseif cond='data:item == &quot;Readmode&quot;'/>
         <!--[ Read mode button ]-->
         <b:if cond='data:view.url != data:view.url params { amp: &quot;1&quot; }'>
            <li>
               <span class='tDark tIc tDL bIc' expr:aria-label='data:item' onclick='readMode()' role='button'>
                  <svg class="line" viewBox="0 0 492 492" xmlns="http://www.w3.org/2000/svg">
                     <title>Read mode</title>
                     <path d="M255.66 112c-77.94 0-157.89 45.11-220.83 135.33a16 16 0 00-.27 17.77C82.92 340.8 161.8 400 255.66 400c92.84 0 173.34-59.38 221.79-135.25a16.14 16.14 0 000-17.47C428.89 172.28 347.8 112 255.66 112z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"></path>
                     <circle cx="256" cy="256" fill="none" r="80" stroke="currentColor" stroke-miterlimit="10" stroke-width="20"></circle>
                  </svg>
               </span>
            </li>
         </b:if>
      </b:if>
   </b:if>
</b:loop>

(II) Adding CSS for Read mode Feature

Lets style our eye icon. Add the following CSS code before </head> tag.

</style>
/* Read Mode by TwistBlogg.com*/
.readMode:before {
	content: '';
	z-index: 99999 !important;
	background: #222222 !important;
	pointer-events: none;
	position: fixed;
	top: -30%;
	right: -30%;
	width: 150%;
	height: 150%;
	opacity: 0.5;
	mix-blend-mode: multiply;
	display: block
}
/* Skip .style-button svg code if you are using Jagodesain - Fletro theme*/
.style-button svg {
	width: 22px;
	height: 22px;
	stroke: #000;
	fill: none !important;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1;
}
</style>

(III) Adding Javascript for Eye mode Feature

We have added read mode icon and styled it. Now, we need to activate and deactivate read mode on click. To create this toggling feature, we will use simple javascript. 

Our JS stores the user value locally, so it won't change on refresh.

Look for </body> and paste this code above it.

<script type="text/javascript"> /*<![CDATA[*/
/* Read Mode by TwistBlogg.com*/
function readMode() { 
localStorage.setItem("read", "readmode" === localStorage.getItem("read") ? "unread" : "readmode"), "readmode" === localStorage.getItem("read") ? document.querySelector("body").classList.add("readMode") : document.querySelector("body").classList.remove("readMode")
};
(localStorage.getItem('read')) === 'readmode' ? document.querySelector('body').classList.add('readMode'): document.querySelector('body').classList.remove('readMode')
   /*]]>*/
   </script>

Thats all. I hope you enjoyed adding read mode or eye mode in your blogger blog. Leave a comment below in case you are not following through. Happy Blogging 🔥