Mengganti-logo-blog-versi-dark-mode

How to Switch Logo in Dark Mode - Dizaman yang berkembang seperti sekarang, banyak para blogger memasang dark mode di website nya, tidak terkecuali saya.

Dark mode sangat berguna untuk mengatur pencahayaan pada saat membaca artikel, saya kurang tahu jelas siapa orang pertama yang menciptakan ide bagus ini.

Namun dibalik kelebihannya, pasti ada kekurangannya, dimana kekurangan dari dark mode ini?

Kekurangannya terletak pada logo blog, dimana apabila kita menggunakan logo blog yang gelap dan cocok di pakai pada saat light mode, ketika di swif ke dark mode, logo tersebut akan tidak terlihat atau tidak kontras dengan warna.

Seharusnya logo blog harus kontras dengan warna header, apabila headernya terang, logo blog harus gelap begitu juga sebaliknya.

Saya sudah search dan berselancar di internet mencari solusinya, tapi tidak ada satu pun yang membagikan tutorial ini, saya rasa saya orang pertama yang membuat tutorial ini.

Solusi logo blog versi dark mode

Disini saya menemukan beberapa solusi antar lain. 

1. Menggunakan CSS Filter

Sebenarnya CSS Filter ini ada cukup banyak pilihan antara lain :

blur()
brightness()
contrast()
drop-shadow()
grayscale()
hue-rotate()
invert()
opacity()
saturate()
sepia()
url() /* Untuk menerapkan filter SVG. */

Namun disini kita menggunakan filter:invert(1)

Mengapa memakai filter:invert() ?

Karena filter ini berfungsi membalikkan warna dari gelap menjadi terang atau juga sebaliknya Mirip seperti kolase foto.

Jadi pas banget untuk merubah warna logo dari warna hitam menjadi warna putih.

Cara Pemasangan filter:invert ke dark mode

Disini saya mencontohkan pemasangan filternya dengan menggunakan dark mode variabel CSS.

Pertama tama kita buat dulu variabel untuk light mode nya seperti ini.

: root {
--logofilter : none;
}

Kode di atas berfungsi agar logo blog kamu tidak memakai filter.

Kedua buat variabel untuk dark mode nya seperti ini.

[data-theme="dark"] {
--logofilter : invert(1);
}

Kode di atas berfungsi agar logo blog kamu memakai filter invert.

Langkah selanjutnya. Pertama tama kamu harus tahu dulu class dari logo blog kamu.

Misalnya seperti blog ini menggunakan class #header p.title-img img

Maka cara pasangnya seperti ini.

#header p.title-img img {
filter : var (--logofilter)
}

Dengan mengikuti 3 langkah di atas anda sudah berhasil memasang filter pada logo blog.

Bagi blog yang tidak memakai variabel pada dark modenya. Caranya cukup gampang dan anda harus tahu dulu class dari logo blog anda.

Disini saya mencontohkan dengan class logo blog saya.

Biasanya dark mode menggunakan .night atau .dark

Maka cara pemasangannya seperti ini.

.night #header p.title-img img {
filter : invert(1) ;
}

Atau

.dark #header p.title-img img {
filter : invert(1) ;
}

2. Memakai Warna Netral

Solusi kedua ini, adalah cara yang paling gampang tanpa harus otak atik CSS, Gunakan warna yang netral (cocok untuk dark mode dan light mode) Untuk penggunaan warna hitam diganti dengan warna Abu abu.

Akhir kata

Itulah sedikit tutorial cara mengganti logo blog versi dark mode. Berikutnya tutorial apa lagi?

Komen ya dibawah, saya gak gigit loh hehehe, www.dionzi.com