Jadi pada tutorial kali ini saya akan membahas cara buat animasi transisi navbar saat di scroll dengan vanila javascript dan nanti hasilnya kaya gini:
Video diatas adalah yang aling sederhana. Tapi kalau mau yang lebih kompleks, bisa cek di sini (source codenya di sini). Tapi untuk tutorial kali ini saya akan bikin kaya video diatas jadi langsung saja!
Template HTML
Buat index.html, lalu pastekan tamplate dari Bootstrap 5 dibawah ini:
Selanjutnya
Cara Membuat Dark Mode pada Website (2 metode)
2
0
Di tutorial kali ini, kita akan bahas bagaimana cara membuat website jadi dark mode dalam 2 metode. Dua metode tersebut yaitu toggle (localStorage pada JS) dan argoritma browser (prefers-color-scheme pada CSS)Tapi sebelum itu... bahas var() duluVar() di css lebih mirip valiable di beberapa pemograman (padahal css bukan termasuk memograman). Caranya bisa cek video dibawah:Jika gak paham bahasa inggris, coba cek video ini:Bahan pembelajaranUntuk bahannya, anda bisa download dark-mode-template.zip diatas! Dan untuk code editor terserah anda. Tapi jika pakai VSCode download extensi Live Server biar bisa lihat hasilnya saat direfresh.Metode 1: toggleUntuk mengunakan toggle, kita akan gunakan var() dan localStorage (plus value !important biar pemanen). Singkatnya localStorage adalah element window yang dapat menyimpan sebuah data ke cache browser argar bisa digunakan lagi jika direfresh. Element ini tidak akan dihapus jika anda tutup browser sampai shut down komputer anda. Saudara localStorage adalah sessionStorage yang fungsinya mirip variable global $_SESSION pada php.Di index.html, masukan code ini di atas </head> <!-- Biar tidak menggangu style.css -->
<link rel=stylesheet href=dark.css />
<!-- Masukan defer jika ingin taruh dih atas </head> -->
<script defer>Dan buat file dark.css, dan kita buat variable untuk warna dark-mode, kodenya seperti ini::root {
--grey1: #303030;
--grey2: #3f3f3f;
--grey2: #858585;
--white2: #aaaaaa;
--black: #000;
--white1: #fff;
}Lalu buat class baru bernama .dark-body (atau apalah), lalu masukan kode didalamnya:.dark-body {
--bg: var(--grey2);
--bg-nav: var(--grey1);
--nav-link: var(--grey4);
--hover-nav-link: var(--grey3);
--section-h1: var(--white);
--section-h5: var(--grey4);
}Class ini berfungsi sebagai bahan unytuk toggle. Dan mungkin nanti akan buat change theme expand (di fitur bebayar) untuk ganti warna pada aplikasi (wpa dan electron).Lalu masukan disetiap class warna pada class/tag html.body {
background-color: var(--bg);
}
nav {
background-color: var(--bg-nav);
}
nav li a {
color: var(--nav-link);
}
nav li a:hover {
color: var(--hover-nav-link);
}
section h1 {
color: var(--section-h1);
}
section h5 {
color: var(--section-h5);
}
PROTIP: untuk masukan value var() di VScode, cukup masukan variabelnya saja lalu tab, maka var() dibuat otomatis (contoh: ketik --bg-nav maka saat di tab dan nama variable tersedia pada file css, maka akan menghasilkan var(--bg-nav)).Lalu kita coba dark modenya berfungsi dengan masukan class dark-body pada tag body. Jika berhasil, hapus lagi classnya.Lalu kita buat script.js dan ambil link Dark Mode dengan getElementById, berserta tag bodynyaconst darkBtn = document.getElementById(dark-mode);
const body = document.body;Kemudian kita tambahkan fungsi tombol pada darkBtndarkBtn. = e => {
e.preventDefault();
if (!body.classList.contains(dark-body)) {
body.classList.add(dark-body);
} else {
body.classList.remove(dark-body);
}
};Jadi darkBtn. sama saja kaya darkBtn.addEventListener(", function), cuma dipersingat biar rapih aja. Lalu e.preventDefault() berfungsi untuk memblokir fungsi yang dijalankan link Dark Mode secara default. lalu kita kasih kondisi jika body terdapat class dark-body maka hapus class tersebut. Begitu pula sebaliknya.Maka hasilnya seperti ini:Dan untuk theme tetap diterapkan walaupun sudah di-refresh, tambahkan fitur localStorage. Pertama pada dibawah const body, tambahkan kode berikut:const darkTheme = localStorage.getItem(dark);Lalu kita buat kondisi jika localStorage diterapkanif (darkTheme)
body.classList.add(dark-body);PROTIP: Jika baris code pada if cuma sebaris, tidak usah pake kurung kurawal { }Lalu pada fungsi link Dark Mode, tambahkan sedikit code berikut:darkBtn. = e => {
e.preventDefault();
if (!body.classList.contains(dark-body)) {
body.classList.add(dark-body);
localStorage.setItem(dark, true);
} else {
body.classList.remove(dark-body);
localStorage.removeItem(dark);
}
};Jadi, jika class dark-body tidak ada di tag body, kita tambahkan localStorage data berupa valiable dark yang valuenya true (boolean). Dan jika ada class tersebut, hapus variable dark pada localSorage. Jadi jika di-refresh, dark modenya tetap jalan.Mengunakan media-query prefers-color-scheme"prefers-color-scheme adalah media query yang berfungsi sebagai reaksi CSS jika browser/OS bertema terang/gelap. Baca lengkap di MDN.Jadi buka dark.css dan tambahkan code berikut:@media (prefers-color-scheme: dark) {
// masukan css disini
}Jadi prefers-color-scheme: dark akan berfungsi jika browser anda bertema gelap/dark-mode. Ada pula prefers-color-scheme: light yang aktif jika tema terang/tidak diterapkan tema sama sekali. Dan tinggal tambahkan code css didalamnya.
@media (prefers-color-scheme: dark) {
body {
background-color: var(--grey2);
}
nav {
background-color: var(--grey1);
}
nav li a {
color: var(--grey4);
}
nav li a:hover {
color: var(--grey3);
}
section h1 {
color: var(--white);
}
section h5 {
color: var(--grey4);
}
}
Maka hasilnya seperti ini.Untuk mengeceknya, coba pada inspect element (Firefox) klik icon bulan (atau matahari jika tema pada OS anda gelap). Atau toggle tema OS anda dengan klik Setting > Personalization > Colors lalu coba ubah Choose your color ke light/dark di Windows 10. Atau ubah tema untuk os yang lain (bisa cek aja caranya di google).prefers-color-scheme akan kepakai jika ingin tema auto pada setting saat buat aplikasi PWA/Neutron.Jadi sekian dulu, ヨーソロー!!!
