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.
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 <= 3'>
<b:if cond='data:item == "Search"'>
<li>
<b:class cond='data:item == "Search"' 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 == "Dark"'/>
<b:if cond='data:view.url != data:view.url params { amp: "1" }'>
<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>
</b:if>
<b:elseif cond='data:item == "Readmode"'/>
<!--[ Read mode button ]-->
<b:if cond='data:view.url != data:view.url params { amp: "1" }'>
<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 🔥