Cara Menambahkan Script Dark Mode di Template Blogspot

Blog maupun website saat ini sudah maklum dibarengi tampilan mode malam. Fitur ini membantu pengunjung blog yang bermasalah dengan kesehatan matanya. Tidak hanya itu, netizen yang sehat juga merasa nyaman. Terutama bagi mereka yang suka bergelut dengan dunia maya. Apalagi jika tidak terasa menatap layar komputer hingga larut malam. 

Untuk itulah, browser saat ini salah satunya Google Chrome menyediakan fitur night mode. Jika diaktifkan maka secara otomatis merubah tampilan website menjadi mode gelap. Baik website yang disertai kemampuan bawaan dark mode maupun tidak. Dan kemarin kita sudah coba cara seting dark mode di Chrome yang terpasang di Linux Mint.

Begitu juga dengan sistem operasi mobile, laptop dan PC. Saat ini tersedia kemampuan mengelola aplikasi yang menjadikan mode malam sebagai default. Namun fitur tersebut tidak tersedia untuk semua versi. Karena untuk Windows berlaku untuk versi 10 ke atas, Mac OS versi 10.14 ke atas,  iOS versi 13 ke atas dan Android versi 5 dan yang lebih baru. 

Nah, fenomena tersebut dilihat dari sisi pengunjung. Lalu bagaimana sisi pandang pemilik blog? Karena bisa saja pengunjung blog kita tidak memiliki device sebagaimana disebutkan di atas. Oleh karena itu, ada baiknya blog kita juga dibekali dengan kemampuan dark mode. Agar pengunjung bisa memilih tampilan mana yang lebih nyaman menemani mereka.

Sayangnya, tidak semua template blogspot yang beredar menyediakan fitur ini. Mau tidak mau kita harus menyisipkan script dark mode tersebut. Dan artikel kali ini semoga bisa membantu keinginan tersebut agar terwujud.

Cara Menambahkan Script Dark Mode di Template Blogspot

Mode gelap yang ditampilkan pada theme blogspot bisa bermacam-macam. Hal ini tergantung orang yang membuat script tersebut. Dan pada kesempatan kali ini saya ingin mengumpulkan beberapa macam script mode malam tersebut.

Script Mode Malam Model Pertama (Untuk Theme EvoMagz dan yang semisalnya)

Langkah pertama yang harus dilakukan adalah login ke dashboard blogger. Kemudian klik Theme dan backup templatenya terlebih dahulu. Hal ini untuk mengantisipasi adanya error pada saat memasukan script. Berikut ini tutorial selengkapnya cara menambahkan script night mode di template blogspot.

1. Login ke dashboard > Theme > Edit HTML.

2. Tempatkan script berikut ini sebelum </body>. Gunakan tombol Ctrl + F, ketikan </body> dan tekan enter biar cepet ketemu.

<div class='Switchbtn'> <span class='nightly'>Night Mode</span> <input class='togglenight togglenight-switch' id='nightmode' type='checkbox'/> <label class='togglenight-btn' for='nightmode'/></div> <script type='text/javascript'> //<![CDATA[ // Night Mode $("#nightmode").click(function(){$("body").toggleClass("nightmode")}),$("body").toggleClass(localStorage.toggled),$("#nightmode").click(function(){"nightmode"!=localStorage.toggled?($("body").toggleClass("nightmode",!0),localStorage.toggled="nightmode"):($("body").toggleClass("nightmode",!1),localStorage.toggled="")}); //]]></script>

3. Tempatkan kode berikut sebelum </head>. Gunakan tombol Ctrl + F, ketikan </head> dan tekan enter biar cepet ketemu.

<style type='text/css'> /* Night Mode */ .nightly{color:#999;font-size:13px} .Switchbtn{position:fixed;text-align:center;display:inline-block;align-items:center;z-index:100;right:20px;top:20px} .togglenight{display:none;} .togglenight + .togglenight-btn{outline:0;display:inline-block;width:45px;height:10px;position:relative;cursor:pointer;margin-left:5px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;} .togglenight + .togglenight-btn:after,.togglenight + .togglenight-btn:before{position:relative;display:block;content:"";width:50%;height:100%} .togglenight-switch + .togglenight-btn{background:#d5d2fc;border-radius:99em;transition:all .4s ease} .togglenight-switch + .togglenight-btn:after{content:'';border-radius:100px;background:#887fff;transition:left 0.3s cubic-bezier(0.175,0.885,0.32,1.275),padding 0.3s ease,margin 0.3s ease;position:absolute;width:20px;height:20px;top:-5px;left:0;box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23)} .togglenight-switch:checked + .togglenight-btn{background:rgba(255,255,255,.15)} .togglenight:checked + .togglenight-btn:after{content:'';left:55%;background:#ff9f43} .nightmode{background:#202124;color:rgba(255,255,255,.7)} .nightmode a{color:rgba(255,255,255,.7)!important} .nightmode a:hover{color:rgba(255,255,255,.4)!important} .nightmode .class-baru{} .nightmode .class-baru{} </style>

4. Mohon diperhatikan, untuk baris kode .nightmode .class-baru{} yang terdiri atas 2 baris di atas. Maksudnya disesuaikan dengan penamaan sesuai template blogspot masing-masing. Berikut ini contoh script kode selanjutnya yang diterapkan pada template EvoMagz karya Mas Sugeng. Script ini bisa juga diterapkan pada template blogspot lain yang penamaan elemen dan widgetnya sama. 

.nightmode #wrapper{background:#111111} .nightmode .menu{background:#111111} .nightmode .menu{border:#000000} .nightmode .nav-menu li {border-right:#111111} .nightmode .nav-menu li a{background:#111111} .nightmode ul.nav-social li {border-left:#111111} .nightmode #header-wrapper{background:#111111} .nightmode .header{background:#111111} .nightmode .toggleMenu{background:#333333} .nightmode .nav-menu2{background:#333333} .nightmode .dropdowns{background:#333333} .nightmode .nav-menu2 li ul{background:#333333} .nightmode .nav-menu2 > li > a.active{background:#3a3a3a} .nightmode .nav-menu2 > li:hover > a{background:#3a3a3a} .nightmode .nav-menu2 li li a:hover{background:#3a3a3a} .nightmode .nav-menu2 li li li a{background:#333333} .nightmode .largebanner{background:#000000; border-right:1px solid #000000; border-bottom:1px solid #000000; border-left:1px solid #000000} .nightmode #post-wrapper{background:#111111} .nightmode .breadcrumbs{background:#111111; border:1px solid #333333} .nightmode #post-body table td {background:#111111} .nightmode a.home-link, #blog-pager-newer-link a, #blog-pager-older-link a { background-color:#333333; border: 1px solid #3a3a3a } .nightmode #sidebar-wrapper{background:#111111} .nightmode a.readmore{background:#3a3a3a} .nightmode .related-post{background:#111111} .nightmode #HTML2{background:#111111} .nightmode .berlangganan-box{background:#3a3a3a} .nightmode .displaypageNum a{background-color:#3a3a3a} .nightmode .displaypageNum a{border-color:#3a3a3a} .nightmode .post-info{background:#111111} .nightmode .post{background:#111111} .nightmode .post{border:#333333} .nightmode .status-msg-bg{background-color:#333333} .nightmode #bottombar{background:#000000} .nightmode #footer-wrapper{background:#333333} .nightmode .author-profile{background:#0072c6} .nightmode .author-profile{border-top:#0072c6} .nightmode .author-profile img{border:#0072c6} .nightmode .sidebar h2{color:#FFFFFF} .nightmode #feed-container{background:#111111} .nightmode #feed-container li{border:#111111} .nightmode .label-size{background:#0072c6}

5. Fitur mode malam kini sudah terpasang pada pojok kanan atas blog kita yang menggunakan theme seperti EvoMagz karya Mas Sugeng atau theme lain yang memiliki kesamaan dalam penamaan class. 

6. Perhatian! Jika theme blogger yang Anda gunakan memiliki penamaan class, widget, elemen dan lainnya tidak sama dengan penamaan seperti EvoMagz maka script dark mode versi 1 ini tidak akan berjalan (tidak berfungsi). Contoh theme blogger yang tidak sama dalam penamaan tersebut adalah Sebardi Blog Theme yang versi 2.1 sudah bisa diunduh. Makanya, theme blogger Sebardi Blog ini memiliki fitur dark mode tersendiri sebagaimana terlihat pada theme blog yang saya gunakan sampai hari ini.

7. Untuk script dark mode versi satu ini hasilnya akan terlihat tombol togglenya pada pojok kanan atas. Bagi teman-teman yang ingin merubah tampilan icon togglenya bisa lakukan percobaan sendiri agar tampilannya menjadi lebih unik.

8. Dan jika kita tekan toggle dark mode tersebut maka layar akan berubah seperti ini. 

9. Untuk menyesuaikan dengan template masing-masing silahkan ganti sendiri kode warnanya. Kode tersebut diawali dengan # dan diikuti dengan 6 karakter berikutnya. Contoh kode warna yang terlihat pada script di atas misalnya #0072c6, #111111 atau #FFFFFF. 

Script Mode Malam Model Kedua

Script di atas digunakan oleh saya sendiri pada penggunaan blog ini sewaktu menggunakan theme blogger dari Mas Sugeng. Adapun sekarang sudah tidak lagi karena sudah menggunakan theme sendiri yang dibuat dari nol dengan bantuan Bootstrap.

Bagi teman-teman yang ingin mencicipi theme blogspot hasil belajar otodidak saya silahkan download Sebardi Theme. Untuk theme blogger versi tersebut juga sudah memiliki fitur dark mode. Sehingga teman-teman tinggal menggunakannya saja. 

Oia, selain itu juga sedang membuat template Terisi Info yang sudah memiliki fitur dark mode.

Adapun bagi teman-teman yang mungkin kurang selera dengan tampilannya baik versi pertama maupun versi Sebardi Theme bisa memilih cara kedua. Berikut ini tutorial selengkapnya cara menambahkan script dark mode di blogspot dengan cara kedua.

1. Login ke dashboard blogger > Theme > Edit HTML.

2. Tempatkan kode di bawah ini sebelum tag </body>

<script type='text/javascript'> //<![CDATA[ $(document).ready(function(){$("body").toggleClass(localStorage.toggled),$("#ind-darkmode").on("click",function(){"Night"!=localStorage.toggled?($("body").toggleClass("Night",!0),localStorage.toggled="Night",$(".section-center").css("display","block")):($("body").toggleClass("Night",!1),localStorage.toggled="",$(".section-center").css("display",""))}),$("body").hasClass("Night")?$("#ind-darkmode").prop("checked",!0):$("#ind-darkmode").prop("checked",!1)}); //]]> </script>

3. Tempatkan kode CSS di bawah ini sesudah tag <b:skin><![CDATA[ dan sebelum  ]]></b:skin>.

<style> /* Button Dark Mode */ .ind-darkmode{ display:inline-block; float: right; margin-top: 3px; position:absolute; right:45px; top: 0; z-index:999; } .ind-darkmode svg{ width:24px; height:24px; vertical-align: -5px; background-repeat: no-repeat !important; content: ''; } .ind-darkmode svg path{ fill:#fff; } .ind-darkmode .check:checked ~ .NavMenu{ is opacity:1; visibility:visible; top:45px; min-width:200px; transition:all .3s ease; z-index:2; } .ind-icon { cursor: pointer; display: block; padding: 8px; background-position: center; transition: all .5s linear; } .ind-icon:hover{ border-radius: 100px; background: rgba(0,0,0,.2) radial-gradient(circle, transparent 2%, rgba(0,0,0,.2) 2%) center/15000%; } .check { display: none; } .ind-darkmode .ind-icon .openmode{ display:block; } .ind-darkmode .ind-icon .closemode{ display:none; } .ind-darkmode .check:checked ~ .ind-icon .openmode{ display:none; } .ind-darkmode .check:checked ~ .ind-icon .closemode{ display:block; } .Night { background: #353535; } </style>

4. Terakhir, tempatkan kode di bawah ini di bagian yang Anda inginkan, misalnya di menu navigasi.

<div class='ind-darkmode'><input class='check' id='ind-darkmode' title='Mode Dark' type='checkbox'/> <label class='ind-icon' for='ind-darkmode'> <svg class='openmode' viewBox='0 0 24 24'><path d='M12,18C11.11,18 10.26,17.8 9.5,17.45C11.56,16.5 13,14.42 13,12C13,9.58 11.56,7.5 9.5,6.55C10.26,6.2 11.11,6 12,6A6,6 0 0,1 18,12A6,6 0 0,1 12,18M20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31L23.31,12L20,8.69Z'/></svg> <svg class='closemode' viewBox='0 0 24 24'><path d='M14.3,16L13.6,14H10.4L9.7,16H7.8L11,7H13L16.2,16H14.3M20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31L23.31,12L20,8.69M10.85,12.65H13.15L12,9L10.85,12.65Z'/></svg> </label> </div>

5. Setelah itu klik simpan dan tampilannya akan terlihat seperti ini.

6. Ralat! Pada tanggal 5 November 2023 kembali saya cek ulang script dark modenya. Hal ini menindaklanjuti pemberitahuan dari salah seorang blogger. Katanya script model keempat tidak berfungsi. Oleh karena itu, saya cek semua script dark mode apakah masih berfungsi atau tidak. Dan ternyata script dark mode model kedua ini juga tidak berfungsi. Sedangkan blog yang sebelumnya digunakan untuk percobaan sudah menggunakan kode yang berbeda.

7. Mohon maaf buat semuanya, insya Allah nanti bisa dipelajari lagi. Jika ada pembaruan nanti ditulis di sini.

Script Mode Malam Model Ketiga

Script selanjutnya saya dapatkan dari blog wendycode yang menggunakan bantuan jQuery. Untuk itu, pastikan template Anda sudah terpasang jQuery. Jika belum silahkan install jQuery kedalam template blogspot. Terserah, bisa melalui Google CDN, Microsoft CDN, CDNJS CDN atau jsDelivr CDN.

1. Misalnya Google CDN, silahkan tempatkan kode ini pada bagian <head> dan sebelum </head>.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

2. Tempatkan kode di bawah ini sebelum tag </body>.

<div class="Switchdark"> <input class="toggledarkwendy toggledarkwendy-switch" id="darkmode" type="checkbox" /> <label class="toggledarkwendy-btn" for="darkmode"> <svg class='svg-1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g><path d='M183.72453,170.371a10.4306,10.4306,0,0,1-.8987,3.793,11.19849,11.19849,0,0,1-5.73738,5.72881,10.43255,10.43255,0,0,1-3.77582.89138,1.99388,1.99388,0,0,0-1.52447,3.18176,10.82936,10.82936,0,1,0,15.118-15.11819A1.99364,1.99364,0,0,0,183.72453,170.371Z' transform='translate(-169.3959 -166.45548)'></path></g></svg> <svg class='svg-2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><circle cx='12' cy='12' r='5'/><line x1='12' x2='12' y1='1' y2='3'/><line x1='12' x2='12' y1='21' y2='23'/><line x1='4.22' x2='5.64' y1='4.22' y2='5.64'/><line x1='18.36' x2='19.78' y1='18.36' y2='19.78'/><line x1='1' x2='3' y1='12' y2='12'/><line x1='21' x2='23' y1='12' y2='12'/><line x1='4.22' x2='5.64' y1='19.78' y2='18.36'/><line x1='18.36' x2='19.78' y1='5.64' y2='4.22'/></svg></label> </div> <script type="text/javascript"> //<![CDATA[ // Dark Mode $("#darkmode").click(function(){$("body").toggleClass("darkmode")}),$("body").toggleClass(localStorage.toggled),$("#darkmode").click(function(){"darkmode"!=localStorage.toggled?($("body").toggleClass("darkmode",!0),localStorage.toggled="darkmode"):($("body").toggleClass("darkmode",!1),localStorage.toggled="")}); //]]> </script>

3. Tempatkan kode di bawah ini di atas tag </head>.

<style type='text/css'> /* Dark Mode */ .Switchdark{position:fixed;text-align:center;display:inline-block;align-items:center;z-index:100;right:20px;top:20px} .toggledarkwendy{display:none;} .toggledarkwendy-btn{display:flex;align-items:center; width:26px;height:26px;} .toggledarkwendy-btn svg{fill:none!important;stroke:#444;stroke-linecap:round;stroke-linejoin:round;stroke-width:1} .toggledarkwendy-btn .svg-1{display:inline-block} .toggledarkwendy-btn .svg-2{display:none} .toggledarkwendy-switch:checked + .toggledarkwendy-btn .svg-1{display:none} .toggledarkwendy-switch:checked + .toggledarkwendy-btn .svg-2{display:inline-block} .darkmode{background:#1e1e1e;color:#fefefe} .darkmode .toggledarkwendy-btn svg{stroke:#fefefe} .darkmode .class-baru{} .darkmode .class-baru{} </style>

4. Klik Simpan.

5. Tampilannya akan terlihat seperti screenshot di bawah ini.

6. Update 4 November 2023!. Script model ketiga ini masih bisa berfungsi meskipun theme blogger Anda menggunakan Bootstrap maupun enggak. Berikut ini tangkapan layarnya.

7. Setelah kita klik toggle dark modenya akan tampak seperti ini. Perhatikan! Icon toggle sebelumnya berupa gambar bulan kini berganti menjadi gambar matahari. Namun, pada contoh di bawah ini, menu navigasinya dibuat dengan bantuan Bootstrap. Sehingga ketika kita klik toggle dark modenya tidak berpengaruh alias gak ngefek. Agar ikut berubah silahkan atur pada bagian kode <nav>nya dengan class dari Bootstrap.

8. Beda kasus jika menu navigasi theme blogger Anda dibuat murni dengan HTML, CSS dan JavaScript yang tentu saja menu navigasinya akan berubah menjadi "dark".

Script Mode Malam Model Keempat

Berikutnya juga masih tentang script dark mode yang tampilannya tidak kalah cantik dengan model sebelumnya. Bagi teman-teman yang belum menemukan script dark mode yang cocok silahkan coba yang satu ini.

1. Tambahkan kode CSS berikut sebelum tag  ]]></b:skin> dan sesudah <b:skin><![CDATA[.

:root { --primary-color: #302AE6; --secondary-color: #536390; --font-color: #424242; --bg-color: #fff000; --heading-color: #292922; }[data-theme="dark"] { --primary-color: #9A97F3; --secondary-color: #818cab; --font-color: #e1e1ff; --bg-color: #161625; --heading-color: #818cab; } /*Simple css to style it like a toggle switch*/ .theme-switch-wrapper { display: flex; align-items: center; em { margin-left: 10px; font-size: 1rem; } } .theme-switch { display: inline-block; height: 34px; position: relative; width: 60px; } .theme-switch input { display:none; } .slider { background-color: #ccc; bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: .4s; } .slider:before { background-color: #fff; bottom: 4px; content: ""; height: 26px; left: 4px; position: absolute; transition: .4s; width: 26px; } input:checked + .slider { background-color: #66bb6a; } input:checked + .slider:before { transform: translateX(26px); } .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; }

2. Letakan kode di bawah ini pada bagian menu navigasi atau sesuai selera. Untuk letak lebih detail ini tergantung template yang digunakan. Dan saya pikir seseorang lebih mengetahui template yang dimilikinya masing-masing. Pada contoh kali ini saya tempatkan pada bagian menu navigasi yang dibuat dengan Bootstrap.

<div class='theme-switch-wrapper'> <label class='theme-switch' for='checkbox'> <input id='checkbox' type='checkbox'/> <div class='slider round'/> </label> <em>Ini contoh Dark Mode!</em> </div>

3. Terakhir silahkan letakan kode javascript di bawah ini sebelum </body>

<script type='text/javascript'> const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]'); const currentTheme = localStorage.getItem('theme'); if (currentTheme) { document.documentElement.setAttribute('data-theme', currentTheme); if (currentTheme === 'dark') { toggleSwitch.checked = true; } } function switchTheme(e) { if (e.target.checked) { document.documentElement.setAttribute('data-theme', 'dark'); localStorage.setItem('theme', 'dark'); } else { document.documentElement.setAttribute('data-theme', 'light'); localStorage.setItem('theme', 'light'); } } toggleSwitch.addEventListener('change', switchTheme, false); </script>

4. Simpan template Anda.

5. Begini penampakannya.

6. Ralat! Ternyata benar apa yang sudah diberitahu teman blogger kita; Malik Sani Ibnu Zahir. Script model ke empat ini tidak berfungsi. Saya mencoba untuk memeriksa percobaan sebelumnya namun sayang sudah dihapus. Terimas kasih atas koreksinya dan mohon maaf buat semuanya, insya Allah nanti saya coba lagi, jika sudah ketemu dan ada perubahan nanti ditulis di sini.

Script Mode Malam Model Kelima (Menggunakan Bootstrap)

Saat ini saya menggunakan theme blogger yang sudah memiliki fitur dark mode dengan Bootstrap. Untuk menyesuaikan pada theme blogger Anda, berikut ini langkah-langkah yang bisa dilakukan.

1. Masuk ke dashboard Blogger, Edit HTML template blogger, pastikan terpasang link CDN yang mengarah ke server CSS Bootstrap berikut ini yang diletakan setelah tag <head>.

<link crossorigin='anonymous' href='https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css' integrity='sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM' rel='stylesheet'/>

2. Letakan script berikut sebelum tag </body>

<script crossorigin='anonymous' integrity='sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz' src='https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js'/>

3. Tambahkan kode JavaScript berikut sebelum tag </body> dan sebelum kode nomor 2 di atas.

<!-- Dark Mode Switcher --> <script>//<![CDATA[ /** * Light Switch @version v0.1.4 */ (function () { let lightSwitch = document.getElementById('lightSwitch'); if (!lightSwitch) { return; } /** * @function darkmode * @summary: changes the theme to 'dark mode' and save settings to local stroage. * Basically, replaces/toggles every CSS class that has '-light' class with '-dark' */ function darkMode() { document.querySelectorAll('.bg-light').forEach((element) => { element.className = element.className.replace(/-light/g, '-dark'); }); document.querySelectorAll('.link-dark').forEach((element) => { element.className = element.className.replace(/link-dark/, 'text-white'); }); document.body.classList.add('bg-dark'); if (document.body.classList.contains('text-dark')) { document.body.classList.replace('text-dark', 'text-light'); } else { document.body.classList.add('text-light'); } // Tables var tables = document.querySelectorAll('table'); for (var i = 0; i < tables.length; i++) { // add table-dark class to each table tables[i].classList.add('table-dark'); } // set light switch input to true if (!lightSwitch.checked) { lightSwitch.checked = true; } localStorage.setItem('lightSwitch', 'dark'); } /** * @function lightmode * @summary: changes the theme to 'light mode' and save settings to local stroage. */ function lightMode() { document.querySelectorAll('.bg-dark').forEach((element) => { element.className = element.className.replace(/-dark/g, '-light'); }); document.querySelectorAll('.text-white').forEach((element) => { element.className = element.className.replace(/text-white/, 'link-dark'); }); document.body.classList.add('bg-light'); if (document.body.classList.contains('text-light')) { document.body.classList.replace('text-light', 'text-dark'); } else { document.body.classList.add('text-dark'); } // Tables var tables = document.querySelectorAll('table'); for (var i = 0; i < tables.length; i++) { if (tables[i].classList.contains('table-dark')) { tables[i].classList.remove('table-dark'); } } if (lightSwitch.checked) { lightSwitch.checked = false; } localStorage.setItem('lightSwitch', 'light'); } /** * @function onToggleMode * @summary: the event handler attached to the switch. calling @darkMode or @lightMode depending on the checked state. */ function onToggleMode() { if (lightSwitch.checked) { darkMode(); } else { lightMode(); } } /** * @function getSystemDefaultTheme * @summary: get system default theme by media query */ function getSystemDefaultTheme() { const darkThemeMq = window.matchMedia('(prefers-color-scheme: dark)'); if (darkThemeMq.matches) { return 'dark'; } return 'light'; } function setup() { var settings = localStorage.getItem('lightSwitch'); if (settings == null) { settings = getSystemDefaultTheme(); } if (settings == 'dark') { lightSwitch.checked = true; } lightSwitch.addEventListener('change', onToggleMode); onToggleMode(); } setup(); })(); //]]> </script>

4. Sisipkan kode HTML untuk memunculkan icon toggle dark mode di menu navigasi yang Anda gunakan. 

<div class='form-check form-switch me-2'> <label class='form-check-label' for='lightSwitch'> <span class='theme-toggle-sr'/> <svg aria-hidden='true' class='theme-toggle__half-sun' fill='currentColor' height='1em' viewBox='0 0 32 32' width='1em' xmlns='http://www.w3.org/2000/svg'> <path d='M27.5 11.5v-7h-7L16 0l-4.5 4.5h-7v7L0 16l4.5 4.5v7h7L16 32l4.5-4.5h7v-7L32 16l-4.5-4.5zM16 25.4V6.6c5.2 0 9.4 4.2 9.4 9.4s-4.2 9.4-9.4 9.4z'/> </svg> </label> <input class='form-check-input' id='lightSwitch' type='checkbox'/> </div>

5. Simpan template, tampilan mode biasa akan terlihat seperti ini:

6. Dan setelah klik togglenya akan menjadi dark seperti ini.

7. Terakhir silahkan gunakan kode CSS agar icon yang tampil hanya icon matahari saja seperti blog ini.

Kesimpulan

Demikian tutorial kali ini tentang cara menambahkan script Dark Mode di template blogspot. Untuk saat ini saya cukupkan dengan koleksi yang masih sedikit. Mudah-mudahan ke depan bisa menambah koleksi script lagi. Ini memberikan pilihan kepada teman-teman untuk memilik tampilan yang sesuai dengan selera dan cita rasa seni masing-masing.

Adapun bagi teman-teman yang belajar membuat template blogspot dengan bootstrap. Ada pilihan lain yang bisa dicoba untuk menambahkan dark mode pada website Anda. Salah satu yang sudah diujicoba dan berhasil yaitu mengaktifkan dark mode otomatis melalui pengaturan di OS dengan menambahkan sedikit baris kode dari Bootstrap.

Semoga bermanfaat.

Baca Juga