[Script] Auto Dark Mode Untuk Website Dan Blog

---

Script auto dark mode adalah kode script untuk merubah warna background dan tulisan secara otomatis sesuai jam perangkat pengguna menjadi warna yang lembut dan tidak menyilaukan mata untuk membaca artikel yang ada dihalaman blog kamu ketika pengunjung datang ke halaman blog pada saat malam hari atau kondisi lampu ruangan sedang dimatikan.

script auto dark mode bukan saja sebagai fitur pelengkap tetapi merupakan tambahan fitur yang sangat bermanfaat untuk membantu mata pengunjung agar tidak membahayakan mata dan merasa nyaman ketika membaca artikel blog melalui perangkat komputer atau hp smartphone pada kondisi rungan gelap atau pada saat pengunjung akan beristirahat dimalam hari. Selain itu dengan adanya fitur auto dark mode akan menjadikan website atau blog yang kamu miliki menjadi terlihat dinamis dan user friendly.

Penggunaan dark mode (mode baca) sebenarnya sudah tersedia untuk pengguna hp smartphone namun pengguna masih perlu melakukan setting manual untuk mengaktifkan fitur mode baca. Nah, agar pengunjung blog kamu tidak perlu repot dan langsung bisa membaca artikel dengan nyaman dimalam hari silakan gunakan script auto dark mode ini.

Ada bayak tutorial pembuatan script auto dark mode namun semuanya masih semi otomatis dan sulit untuk diterapkan pada halaman blog, terutama jika blog yang kamu kelola menggunakan template kustom, sudah pasti akan mengalami banyak kesulitan dalam penerapannya. Tapi jangan khawatir pada artikel ini codeflare akan membagikan script auto dark mode premium buatan codeflare sendiri yang keren dan mudah digunakan.

Informasi Singkat

---

Mata Manusia

Mata manusia adalah organ sensorik, bagian dari sistem saraf sensorik, yang bereaksi terhadap cahaya tampak dan memungkinkan kita menggunakan informasi visual untuk berbagai tujuan termasuk melihat sesuatu, menjaga keseimbangan, dan menjaga ritme sirkadian.

Mata dapat dianggap sebagai perangkat optik hidup. Bentuknya kira-kira bulat, dengan lapisan luarnya, seperti bagian terluar, bagian putih mata (sklera) dan salah satu lapisan dalamnya (koroid berpigmen) menjaga mata pada dasarnya tetap terang kecuali pada sumbu optik mata. Agar, sepanjang sumbu optik, komponen optik terdiri dari lensa pertama (kornea—bagian bening mata) yang menyelesaikan sebagian besar pemfokusan cahaya dari dunia luar; kemudian bukaan (pupil) di diafragma (iris—bagian berwarna dari mata yang mengontrol jumlah cahaya yang masuk ke bagian dalam mata; kemudian lensa lain (lensa kristal) yang menyelesaikan pemfokusan cahaya yang tersisa menjadi gambar ; kemudian bagian mata yang peka cahaya (retina) tempat gambar jatuh dan diproses. Retina membuat koneksi ke otak melalui saraf optik. Komponen mata yang tersisa menyimpannya dalam bentuk yang diperlukan, memelihara dan menjaganya, dan melindunginya.

Tiga jenis sel di retina mengubah energi cahaya menjadi energi listrik yang digunakan oleh sistem saraf: sel batang merespons cahaya intensitas rendah dan berkontribusi pada persepsi gambar hitam-putih beresolusi rendah; kerucut merespons cahaya intensitas tinggi dan berkontribusi pada persepsi gambar berwarna beresolusi tinggi; dan sel-sel ganglion fotosensitif yang baru-baru ini ditemukan merespons berbagai intensitas cahaya dan berkontribusi untuk menyesuaikan jumlah cahaya yang mencapai retina, untuk mengatur dan menekan hormon melatonin, dan untuk melatih ritme sirkadian.

---

Sumber : Wikipedia

DAFTAR ISI

1. Cara Pemasangan Widget Pada Blogger
2. Cara Mendapatkan Elemen HTML ID atau Class
3. Membuat Ikon Dark Mode Melayang

#1 Cara Pemasangan Widget Pada Blogger

Script auto dark mode ini dibuat menggunakan plugin JQuery dan plugin Font Awesome jadi pastikan pada template website atau template blog kamu sudah terpasang dengan plugin tersebut.

<link rel="stylesheet" href="cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js'></script>

Perhatian ! Jika pada kode template website atau blog kamu belum terpasang dengan plugin JQuery dan FontAwesome silakan kamu pasang kode plugin di atas kedalam kode template yang kamu gunakan. Kode plugin tersebut dipasang tepat diatas elemen kode HTML </Head>. Jika sudah kita lanjutkan tutorialnya...

Terdapat tiga mode dasar yaitu : Auto Mode, Light Mode dan Dark Mode. Settingan default akan mengacu pada Auto Mode yang mana pada mode ini akan disesuaikan berdasarkan waktu yang ada pada perangkat pengunjung. Apabila pengunjung datang pada waktu jam 6 pagi maka tampilan warna akan otomatis berubah menjadi light mode sedangkan apabila pengunjung datang pada jam 20.00 malam maka tampilan warna akan berubah menjadi dark mode.

Selain tampilan auto mode, pengunjung juga diberi kebebasan untuk memilih mode baca secara manual dan hasil mode yang dipilih akan tersimpan di cache browser pengunjung sehingga apabila pengunjung datang kembali maka pilihan mode yang dipilih akan langsung menyesuaikan dengan pilihan pengunjung.

Oke buat yang berminat memasang script auto dark mode codeflare ini silakan langsung aja menuju ke TKP. Sebagai langkah pertama silakan kamu salin kode script dibawah ini ke dalam template website atau template blog kamu. Jika kamu pengguna blogspot berikut cara pemasangan script ke dalam template blogger.

• Silakan login dahulu ke blog Anda.


• Klik tombol Tema untuk masuk ke tema editor.
  
  
  


• Klik tombol Edit Tema untuk menampilkan kode HTML Template Blog.
  
  
  


• Geser scrollbar ke posisi paling bawah.
  
  
  


• Letakan kode dibawah ini tepat diatas kode </body>.
  
  
  
  
  
  <!-- Day and Night Color Mode by CodeFlare -->
  <script>
  //<![CDATA[
  /* ------- Element Data ------- */
  var elmBGData = "body, #block-id-1, #block-id-2 li > a, .block-class-3";
  var elmTXData = "body, #block-id-1, #block-id-2 li > a, .block-class-3";
  var elmBGColor = "#1a1a1a";
  var elmTXColor = "#ddd";
  var btnColorMode = "#icon-id";
  var ntfNotifIcon = '<i class="fa fa-exclamation-circle" aria-hidden="true"></i>';
  /* ------- Global Variabel ------- */
  var elmStrBGData = [];var elmStrTXData = [];
  var setDataArray = false;var txtModeColorNotify='';
  var cfldarkmodechk = localStorage.getItem("cfldarkmode");
  var cfldarkmodehours = new Date().getHours();
  var cflDayTime = cfldarkmodehours > 6 && cfldarkmodehours < 20;
  if($(btnColorMode).find('i')==false){$(btnColorMode).html('<i class="fa fa-sun-o"></i>');}
  function getDataArrayColorMode(){
  var a = document.createElement('div');
  a.id = 'cflmodetip';
  a.style.cssText = 'position:fixed;background:rgba(0,0,0,.5);color:white;padding:5px;z-index:+99999;border-radius:0 0 5px 5px;font-size:14px;box-shadow:0px 3px 3px rgba(0,0,0,.4);transition:opacity 0.3s;top:0;left:calc(50% - 150px);clear:both;width:300px;text-align:center;display:none;';
  document.body.appendChild(a);
  elmStrBGData = elmBGData.split(',');
  elmStrTXData = elmTXData.split(',');
  for(var i=0;i<elmStrBGData.length;i++){elmStrBGData[i]=elmStrBGData[i].trim();}
  for(var i=0;i<elmStrTXData.length;i++){elmStrTXData[i]=elmStrTXData[i].trim();}
  }
  /* ------- Global Function ------- */
  function colorMode(){
  $(btnColorMode).off('click');
  var a=$(btnColorMode+" > i").attr('class');
  if(a=="fa fa-star-half-o"){colorNightMode();cfldarkmodechk='0';localStorage.setItem("cfldarkmode","0");}
  if(a=="fa fa-moon-o"){colorLightMode();cfldarkmodechk='2';localStorage.setItem("cfldarkmode","2");}
  if(a=="fa fa-sun-o"){
  var tmpTxtMode="";
  if(cflDayTime==false){colorNightMode();tmpTxtMode="Dark Color";}else{colorLightMode();tmpTxtMode="Light Color";}
  $(btnColorMode+" > i").attr('class', 'fa fa-star-half-o');
  $(btnColorMode).attr('title', 'Auto Mode');
  localStorage.setItem("cfldarkmode","1");
  txtModeColorNotify=ntfNotifIcon + ' Auto Mode : ' + tmpTxtMode;
  }showModeTip();}
  function colorNightMode(){
  for(var i=0;i<elmStrBGData.length;i++){$(elmStrBGData[i]).css({'background':elmBGColor,'transition':'background .5s linear,color .5s linear'});}
  for(var i=0;i<elmStrTXData.length;i++){$(elmStrTXData[i]).css({'color':elmTXColor});}
  $(btnColorMode+" > i").attr('class', 'fa fa-moon-o');
  $(btnColorMode).attr('title', 'Dark Mode');
  txtModeColorNotify=ntfNotifIcon + ' Dark Color Mode Activated';
  }
  function colorLightMode(){
  for(var i=0;i<elmStrBGData.length;i++){$(elmStrBGData[i]).css({'background':'','transition':'background .5s linear,color .5s linear'});}
  for(var i=0;i<elmStrTXData.length;i++){$(elmStrTXData[i]).css({'color':''});}
  $(btnColorMode+" > i").attr('class', 'fa fa-sun-o');
  $(btnColorMode).attr('title', 'Light Mode');
  txtModeColorNotify=ntfNotifIcon + ' Light Color Mode Activated';
  }
  function showModeTip(){
  $('#cflmodetip').html(txtModeColorNotify);
  $('#cflmodetip').slideDown();
  var b = setTimeout(function(){
  $(btnColorMode).on("click", function(){colorMode();});for(var i=0;i<elmStrBGData.length;i++){$(elmStrBGData[i]).css('transition','');};$('#cflmodetip').slideUp();
  }, 3000);}
  function startDarkMode(){
  getDataArrayColorMode();
  if(cfldarkmodechk=="0"){$(btnColorMode+" > i").attr('class', 'fa fa-star-half-o');colorMode();}
  if(cfldarkmodechk=="1"||cfldarkmodechk==""||cfldarkmodechk==null||cfldarkmodechk=="undefined"){$(btnColorMode+" > i").attr('class', 'fa fa-sun-o');colorMode();}
  if(cfldarkmodechk=="2"){$(btnColorMode+" > i").attr('class', 'fa fa-moon-o');colorMode();}
  }setTimeout(startDarkMode, 2000);
  //]]>
  </script>
  <!-- Day and Night Color Mode by CodeFlare -->
  
  
  KETERANGAN
  

  Update : 12 July 2022
  Revisi : v1.5.0

  Setelah memasang kode script di atas maka selanjutnya adalah mengatur beberapa parameter utama agar bisa menyesuaikan dengan template website atau blog yang kamu gunakan.

  ---

  Pada parameter variabel :
  var elmBGData = "body, #block-id-1, #block-id-2 li > a, .block-class-3";
  

  Merupakan variabel untuk semua elemen tag HTML yang akan dirubah warna bacground (latar belakang) menjadi warna gelap yang nyaman dan kalem. Elemen HTML bisa berupa TAG HTML, elemen ID dan Elemen Class. Silakan kamu tentukan elemen tersebut dan masukan ke dalam variabel seperti contoh di atas. Ingat ! variabel contoh ini hanyalah sebuah contoh untuk penggunaan variabel, jadi kamu harus menentukan variabel dari kode template website atau blog yang kamu gunakan.

  ---

  Pada parameter variabel :
  var elmTXData = "body, #block-id-1, #block-id-2 li > a, .block-class-3, div p, #block-lainnya";
  

  Merupakan variabel untuk semua elemen tag HTML yang akan dirubah warna teks (karakter huruf) menjadi warna terang yang nyaman dan sejuk. Elemen HTML bisa sama dengan variabel untuk penggunaan warna latar bisa juga ditambahkan elemen lainnya yang memang memerlukan perubahan warna untuk teks tertentu. Silakan kamu tentukan elemen tersebut dan masukan ke dalam variabel seperti contoh di atas. Ingat ! variabel contoh ini hanyalah sebuah contoh untuk penggunaan variabel, jadi kamu harus menentukan variabel dari kode template website atau blog yang kamu gunakan.

  ---

  Pada parameter variabel :
  var elmBGColor = "#1a1a1a"; [ ]
  var elmTXColor = "#ddd";        [ ]
  

  Merupakan variabel untuk kode warna background dan warna text. Jika dirasa kurang cocok silakan kamu rubah kode warna tersebut dalam hexadecimal. Kode warna dalam hexadesimal bisa dilihat pada halaman : Kode Warna HTML.

  ---

  Pada parameter variabel :
  var btnColorMode = "#icon-id";
  

  Merupakan elemen HTML ID untuk menaruh icon fontawesome. Silakan kamu tentukan atau buat penempatan elemen HTML ID untuk menampilkan ikon dark mode di dalam kode template website atau blog kamu. Bebas penempatan ikon ini bisa dilokasi mana saja yang penting bisa terlihat dan mudah diakses oleh pengunjung. Sebagai contoh seperti yang terlihat pada gambar di bawah ini.

  

  
  

  ---

  Pada parameter variabel :
  var ntfNotifIcon = '<i class="fa fa-exclamation-circle" aria-hidden="true"></i>';
  

  Merupakan kode untuk ikon notifikasi, kamu boleh menggunakan ikon fontawesome lainnya jika dirasa ikon default ini kurang cocok dengan setelan template yang kamu gunakan. Penggantian ikon fontawesome bisa kamu lihat pada halaman : FontAwesome Icon 4.7 Page.

#2 Cara Mendapatkan Elemen HTML ID atau Class

Cara menentukan elemen HTML dari template website atau blog yang kamu gunakan sebagai input variabel untuk merubah warna background dan text cukup mudah. Silakan kamu jalankan aplikasi browser menggunakan PC Komputer dan buka halaman utama dan halaman artikel website atau blog kamu kemudian tekan tombol keyboard F12 (Khusus browser : Firefox, Chrome dan Edge) untuk menampilkan developer tools. Hal ini dilakukan untuk mempermudah pelacakan elemen HTML dan mengetahui jenis elemen yang tertera pada kode HTML template yang digunakan. Lebih jelasnya seperti yang terlihat pada gambar di bawah ini.

Sebagai contoh berdasarkan gambar di atas terlihat untuk penempatan ikon yang ada pada blog codeflare, admin menempatkan ikon tersebut pada elemen ID search-icon maka pada variabel input menjadi :

var btnColorMode = "#search-icon";

Tanda pagar (#) digunakan apabila elemen HTML merupakan atribut ID sedangkan tanda titik (.) digunakan untuk menandakan atribut Class. Jadi jangan sampai salah penggunaan notasi kode antara atribut ID dengan atribut Class.

Untuk menentukan dan mengetahui tipe elemen lainnya yang akan digunakan sebagai variabel input background dan text cara sama dengan cara di atas, kamu tinggal tentukan area mana yang akan dirubah warnanya kemudian tinggal masukan jenis elemen area tersebut ke dalam variabel input. Berikut contoh elemen area HTML yang admin gunakan pada template blog codeflare.

CONTOH :
var elmBGData = "body, #footer-wrapper, .footer-wrapper, .main-post-wrap, .videos-widget, ul.post-nav, #sidebar-wrapper .widget-content, #sidebar-tabs, .coulmn-wid, .mainFrmAst, #mainbar-tabs, #stickyDaftarIsi, .ty-author-box";
var elmTXData = "body, #nav3 li > a, .footer-wrapper .copyright a, .copyright, .item .post-body, .related-posts h3 a, .post-nav li a, .ty-author-box, .item .post-title, #mainbar-tabs, #daftarIsiPost2 li a, .PopularPosts ul li a";
var elmBGColor = "#1a1a1a";
var elmTXColor = "#ddd";
var btnColorMode = "#search-icon";
var ntfNotifIcon = '<i class="fa fa-exclamation-circle" aria-hidden="true"></i>';

Ingat ! variabel contoh ini hanyalah sebuah contoh untuk penggunaan variabel, jadi kamu harus menentukan variabel dari kode template website atau blog yang kamu gunakan.

#3 Membuat Ikon Dark Mode Melayang

Selain penempatan ikon dark mode secara statis, kamu juga bisa membuat ikon dark mode menjadi float (melayang) pada layar browser. Membuat tombol ikon dark mode melayang biasanya digunakan untuk mempermudah pengunjung agar bisa secara langsung dan fleksibel mengakses tombol dark mode (mode baca) ini.

Membuat suatu elemen HTML menjadi melayang cukup menggunakan kode CSS yang sederhana, yaitu dengan menentukan properti posisi suatu elemen HTML (fixed atau absolute), properti top dan properti left.

Properti posisi dalam kode CSS digunakan utuk menentukan jenis metode penentuan posisi yang digunakan untuk elemen (statis, relatif, tetap, absolut, atau lengket).

Misalkan :

Membuat tombol ikon dark mode pada posisi melayang tetap dengan lokasi di sebelah kiri (left) layar browser dan letak posisi dari atas (top) berada di tengah layar browser.

<style>
#tombol_ikon {
position:fixed;
top:calc(50% - 20px);
left:0;
padding:10px;
border:none;
background-color:#0083da;
color:#fff;
border-radius:0 5px 5px 0;
}
</style>
<div id="tombol_ikon"><i class="fa fa-star-half-o" aria-hidden="true"></i></div>
<!-- Day and Night Color Mode by CodeFlare -->
<script>
//<![CDATA[
/* ------- Element Data ------- */
var elmBGData = "body, #block-id-1, #block-id-2 li > a, .block-class-3";
var elmTXData = "body, #block-id-1, #block-id-2 li > a, .block-class-3";
var elmBGColor = "#1a1a1a";
var elmTXColor = "#ddd";
var btnColorMode = "#icon-id";
var ntfNotifIcon = '<i class="fa fa-exclamation-circle" aria-hidden="true"></i>';
/* ------- Global Variabel ------- */
var elmStrBGData = [];var elmStrTXData = [];
var setDataArray = false;var txtModeColorNotify='';
var cfldarkmodechk = localStorage.getItem("cfldarkmode");
var cfldarkmodehours = new Date().getHours();
var cflDayTime = cfldarkmodehours > 6 && cfldarkmodehours < 20;
if($(btnColorMode).find('i')==false){$(btnColorMode).html('<i class="fa fa-sun-o"></i>');}
function getDataArrayColorMode(){
var a = document.createElement('div');
a.id = 'cflmodetip';
a.style.cssText = 'position:fixed;background:rgba(0,0,0,.5);color:white;padding:5px;z-index:+99999;border-radius:0 0 5px 5px;font-size:14px;box-shadow:0px 3px 3px rgba(0,0,0,.4);transition:opacity 0.3s;top:0;left:calc(50% - 150px);clear:both;width:300px;text-align:center;display:none;';
document.body.appendChild(a);
elmStrBGData = elmBGData.split(',');
elmStrTXData = elmTXData.split(',');
for(var i=0;i<elmStrBGData.length;i++){elmStrBGData[i]=elmStrBGData[i].trim();}
for(var i=0;i<elmStrTXData.length;i++){elmStrTXData[i]=elmStrTXData[i].trim();}
}
/* ------- Global Function ------- */
function colorMode(){
$(btnColorMode).off('click');
var a=$(btnColorMode+" > i").attr('class');
if(a=="fa fa-star-half-o"){colorNightMode();cfldarkmodechk='0';localStorage.setItem("cfldarkmode","0");}
if(a=="fa fa-moon-o"){colorLightMode();cfldarkmodechk='2';localStorage.setItem("cfldarkmode","2");}
if(a=="fa fa-sun-o"){
var tmpTxtMode="";
if(cflDayTime==false){colorNightMode();tmpTxtMode="Dark Color";}else{colorLightMode();tmpTxtMode="Light Color";}
$(btnColorMode+" > i").attr('class', 'fa fa-star-half-o');
$(btnColorMode).attr('title', 'Auto Mode');
localStorage.setItem("cfldarkmode","1");
txtModeColorNotify=ntfNotifIcon + ' Auto Mode : ' + tmpTxtMode;
}showModeTip();}
function colorNightMode(){
for(var i=0;i<elmStrBGData.length;i++){$(elmStrBGData[i]).css({'background':elmBGColor,'transition':'background .5s linear,color .5s linear'});}
for(var i=0;i<elmStrTXData.length;i++){$(elmStrTXData[i]).css({'color':elmTXColor});}
$(btnColorMode+" > i").attr('class', 'fa fa-moon-o');
$(btnColorMode).attr('title', 'Dark Mode');
txtModeColorNotify=ntfNotifIcon + ' Dark Color Mode Activated';
}
function colorLightMode(){
for(var i=0;i<elmStrBGData.length;i++){$(elmStrBGData[i]).css({'background':'','transition':'background .5s linear,color .5s linear'});}
for(var i=0;i<elmStrTXData.length;i++){$(elmStrTXData[i]).css({'color':''});}
$(btnColorMode+" > i").attr('class', 'fa fa-sun-o');
$(btnColorMode).attr('title', 'Light Mode');
txtModeColorNotify=ntfNotifIcon + ' Light Color Mode Activated';
}
function showModeTip(){
$('#cflmodetip').html(txtModeColorNotify);
$('#cflmodetip').slideDown();
var b = setTimeout(function(){
$(btnColorMode).on("click", function(){colorMode();});for(var i=0;i<elmStrBGData.length;i++){$(elmStrBGData[i]).css('transition','');};$('#cflmodetip').slideUp();
}, 3000);}
function startDarkMode(){
getDataArrayColorMode();
if(cfldarkmodechk=="0"){$(btnColorMode+" > i").attr('class', 'fa fa-star-half-o');colorMode();}
if(cfldarkmodechk=="1"||cfldarkmodechk==""||cfldarkmodechk==null||cfldarkmodechk=="undefined"){$(btnColorMode+" > i").attr('class', 'fa fa-sun-o');colorMode();}
if(cfldarkmodechk=="2"){$(btnColorMode+" > i").attr('class', 'fa fa-moon-o');colorMode();}
}setTimeout(startDarkMode, 2000);
//]]>
</script>
<!-- Day and Night Color Mode by CodeFlare -->

Pada kode diatas dapat dilihat untuk membuat tombol dark mode cukup dengan menentukan beberapa properti kode CSS kemudian tinggal membuat elemen HTML dengan atribut yang ditentukan. Oke sampai disini saya kira kamu sudah bisa memasang kode auto dark mode ini dengan mudah.

Demikian artikel blog tentang [Script] Auto Dark Mode Untuk Website Dan Blog terima kasih sudah berkunjung, jangan lupa Like, Share dan Subscribe, untuk pertanyaan, kritik ataupun saran silakan ditulis pada kotak komentar di bawah. Apabila ada kata-kata yang kurang berkenan atau informasi yang kurang akurat, harap dimaklumi. Akhir kata Semoga Bermanfaat.

Keyword

Blog, Blogger, Blogspot, Website, Auto, Dark, Mode, Background, Text, Javascript, CSS, HTML, Reading, Color, Change, Baca, Artikel, Modifikasi

Incoming Search Term

Cara membuat mode baca auto dark mode halaman blog, Cara bikin script mode baca dark mode dengan cepat dan mudah, Cara pasang kode HTML otomatis dark color mode, Script mode malam premium yang keren dan oke punya, Javascript settingan warna gelap untuk baca artikel di malam hari, Kode CSS bikin halaman artikel menjadi night mode, Cara setting warna gelap untuk halaman blogger

script code here...