Saturday, 5 September 2020

Make Dark Mode with Local Storage

Make Dark Mode with Local Storage

Make Dark Mode with Local Storage
Saturday, 5 September 2020

How to make Night Mode on the web, or create a night mode on a blog, this time using LocalStorage or Session Storage.

Because most of the bloggers that I have read the article, and I apply to blogs. Only limited to dark mode, do not use Cookies or LocalStorage.

LocalStorage is almost the same as Cookies, it's just that localstorage can store temporary data on the browser, in contrast to cookies.
for example here I apply to making dark mode on the blog.
So when you visit my blog, and click the dark mode button, of course it will change to night mode, or dark mode (Active). So when you move on to other posts on my blog, the dark mode will still be active because the data is still stored (still active). But, when you close the browser, and open my blog again, the night mode on my blog is no longer active, because the data has been deleted. (Inactive)
(According to the references I read, I forgot the web.)

Example using Session Storage / Local Storage

www.myabdurrahim.com (Dark Mode / Night Mode Active)
www.myabdurrahim.com/2019/01/membuat-button-dengan-effect-slide.html (Dark Mode Still Active)

Example without using Session Storage / Local Storage (or regular dark mode)

www.myabdurrahim.com (Dark Mode / Night Mode On)
www.myabdurrahim.com/2019/01/membuat-button-with-effect-slide.html (Dark Mode Off)

Well, if you want to apply to your blog, use this session storage / local storage.
please continue reading down. But, if you only use night mode without using local storage, you don't need to continue reading my article. You can search for tutors on google, because many bloggers apply this. But if you still want to read it, then let's continue.


Well, if you still don't understand the meaning of session storage, you can search on Google. But if you already understand the meaning of localstorage a little, you can move on to the point of application to your web.

1. Please login to your blog / web.
2. Go to Themes> Edit HTML
3. Add the CSS dark mode below, save it above the </head> code


<style type='text/css'>
/* Dark Mode www.myabdurrahim.com */
.dark-mode body{background:#121212;color:#fff}
.dark-mode #header-wrapper{background:#232323;color:#fff}
.dark-mode #tag-div{background:#232323;color:#fff}
.dark-mode .tag-div{background:#232323;color:#fff}
</style>

Please change the color code that I marked in  red with the dark color you like.
There I used a dark color from youtube (Dark Mode Youtube). You can change the color like twitter. (Dark Mode Twitter).
And also change your div tag, which I marked in yellow , according to the div tag on your blog. * Each blog's Div tag is usually different.

4. add CSS buttons for night mode, like on this blog.


<style type='text/css'>
/* Dark Mode Button www.myabdurrahim.com */
.mydark{background:#f80538;float:right;color:#fff;display:inline-block;height:30px;line-height:30px;padding:0 10px;border-radius:3px;font-size:13px;font-weight:700;animation:anim 2s ease-in infinite}
.mydark:hover{background:#444;color:#fff}
#dark-myar{width:95%;position:absolute;top:0;left:0;margin:12px 0}
@keyframes anim{5%{-webkit-transform:scale(1.1,.9);transform:scale(1.1,.9)}10%{-webkit-transform:scale(.9,1.1) translateY(-.5rem);transform:scale(.9,1.1) translateY(-.5rem)}15%{-webkit-transform:scale(1);transform:scale(1)}}
</style>

The CSS button settings depend on the blog template, so if the buttons don't match, you can change / adjust the CSS. because the usual buttons that I use are not suitable or suitable to be applied to your blog / template.

5. Next, please add this JavaScript, put it in between

<body> ... </body>

The JavaScript, because I took the JS from my blog, the JS is encrypted,
you can decrypt it using an obfuscator 😂


<script type='text/javascript'>
var _0x2f0e=['innerHTML','addEventListener','click','preventDefault','classList','toggle','dark-mode','setItem','removeItem','localStorage','getItem','myDarkMode','documentElement','\x20dark-mode','querySelector','#dark-myar'];(function(_0x1b79a7,_0x3a0621){var _0x966a12=function(_0x3e79fd){while(--_0x3e79fd){_0x1b79a7['push'](_0x1b79a7['shift']());}};_0x966a12(++_0x3a0621);}(_0x2f0e,0xa9));var _0x2b5b=function(_0x462a3a,_0x3e5e7f){_0x462a3a=_0x462a3a-0x0;var _0x26f27e=_0x2f0e[_0x462a3a];return _0x26f27e;};;(function(_0x512a50,_0x163dc1,_0x16c793){if(!(_0x2b5b('0x0')in _0x512a50))return;var _0x1d0913=localStorage[_0x2b5b('0x1')](_0x2b5b('0x2'));if(_0x1d0913){_0x163dc1[_0x2b5b('0x3')]['className']+=_0x2b5b('0x4');}}(window,document));;(function(_0x78db9c,_0x2d7dec,_0x44c5fe){if(!('localStorage'in _0x78db9c))return;var _0x41c733=_0x2d7dec[_0x2b5b('0x5')](_0x2b5b('0x6'));if(!_0x41c733)return;_0x41c733[_0x2b5b('0x7')]+='<li\x20id=\x22dark-mode\x22><a\x20class=\x22mydark\x22\x20role=\x22button\x22\x20href=\x22#\x22><i\x20class=\x22fas\x20fa-moon\x22></i>\x20Dark\x20Mode</a></li>';var _0x42910d=_0x2d7dec[_0x2b5b('0x5')]('#dark-mode');if(!_0x42910d)return;_0x42910d[_0x2b5b('0x8')](_0x2b5b('0x9'),function(_0x186dc3){_0x186dc3[_0x2b5b('0xa')]();_0x2d7dec[_0x2b5b('0x3')][_0x2b5b('0xb')][_0x2b5b('0xc')](_0x2b5b('0xd'));if(_0x2d7dec['documentElement'][_0x2b5b('0xb')]['contains'](_0x2b5b('0xd'))){localStorage[_0x2b5b('0xe')](_0x2b5b('0x2'),!![]);return;}localStorage[_0x2b5b('0xf')](_0x2b5b('0x2'));},![]);}(window,document));
</script>

6. And add the HTML menu tag / button


<ul id='dark-myar'/>

Save your blog menu, or save it in an html / javascript widget.
depending on you, where do you like it And check out your blog.

For the Demos, you can see on my blog, please click the red (Dark Mode) button, if it's active. you try to go to another post, and the dark mode is still active.
Since the demo is this blog, at any time, the dark mode on this blog may disappear, or it is no longer installed.

Ok, maybe it's enough to just discuss this article this time. If you experience problems / have questions during implementation, you can ask in the comments below. Thank you.
Make Dark Mode with Local Storage
4/ 5
Oleh

Comments