Make Dark Mode Button on Blogger (New Style)

Hello TopBlog Pk Viewers ,   Today I will share another interesting Tutorial through which you can easily Make Dark Mode on Blogger. Dark mode / night mode is a feature to change the color of your blog template that should be light to dark, the goal is to make the blog look brighter.

How to make dark mode quite easy, for more details you can follow the tutorial below.

How To Make Dark Mode on Blogger Easily 

1) Open Blogger> Themes> Edit HTML

2 ) Put the following Jquery above </body>

<script type='text/javascript'>//<![CDATA[

// Jquery cookie

$(() => {

  const theme = 'dark';

  const darkMode = localStorage.getItem(theme);

  $('html').toggleClass(theme, darkMode === 'true');

  $('#' + theme).prop('checked', darkMode === 'true').click(function() {

    $("html").toggleClass(theme, $(this).is(':checked'));

    localStorage.setItem(theme, String($(this).is(':checked')));

  });

});

//]]></script>

3) Save the following CSS in <b:skin>... </b:skin> or <style>...</style>

/* Button Switch dark  by Top Blog Pk */

.theme{/* Empty */}

.theme .text{text-transform:uppercase;font-size:.7rem;font-weight:600;padding:5px 0}

.theme .switch{position:relative;display:inline-block;width:30px;height:15px;margin:0 5px 0 10px;vertical-align:0}

.theme .switch input{display:none}

.theme .geser{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;-webkit-transition:.4s;transition:.4s;background:#ccc}

.theme .geser:before{position:absolute;content:"";height:15px;width:15px;left:0;bottom:0;background-color:#fff;-webkit-transition:.4s;transition:.4s}

.theme input:checked+.geser{background-color:#000}

.theme input:focus+.geser{box-shadow:0 0 1px #000}

.theme input:checked+.geser:before{-webkit-transform:translateX(15px);-ms-transform:translateX(15px);transform:translateX(15px)}

.theme .geser.round{border-radius:34px}

.theme .geser.round:before{border-radius:50%;background:#0eafc1}

4) Save the dark mode switch button anywhere you want .... 

<div class='theme'>

<label class='switch'>

    <input id='dark' name='toggle-flip' type='checkbox'/>

    <span class='geser round'/>

</label>

</div>

5) Next, choose the part of the template that will be made dark, by adding CSS to the theme

6) All parts that want to be made dark are given css .dark, for example (Also follow step7) 

.dark body {

    background-color: #333;

    color: #ddd;

}

.dark::-webkit-scrollbar {background-color: #1d1f20;color: #cfcbc3;}

.dark::-webkit-scrollbar-corner{background-color:#191b1c}

.dark::-webkit-scrollbar-thumb{background-color:#2c2e30}

Here, how to add dark mode to the blog is ready, but it has not run properly because you have to do the last step so that the dark mode display really works. The last two step (6,7) you have to do is adjust the CSS Dark Mode on your template because the CSS on the template that circulates on the internet is not all the same, some use Class  and some use  ID . Example of using CSS Class on .header and CSS ID on header , both of them are using CSS but with different Class.

So to apply this Dark Mode, you must pay attention to the class or ID of each CSS used in your template. Note how to apply CSS Dark Mode in the following template. 

7) If all the Dark CSS has been created, 

add the following CSS code(As in step 6), right inside the code please save it in <b:skin>... </b:skin> or <style>...</style>

Ok that's all the tutorial for today, if you have questions please fill in the comments column, and I'll see you in the next article.