Label

Menggaya background dan color theme light dan theme dark

09 Oktober 2022

Js

Ini adalah pekerjaan di mana pengembang desain harus membuat gaya pada sebuah tampilan web dengan background dan color yang dapat di rubah.

Dasar dari semua itu adalah bagaimana tampilan yang di buat harus mampu menjaga keseimbangan nya dari waktu ke waktu.

Untuk di awal mari Kita buat selector root css yang nantinya akan menjadi dasar dari tampilan gelap dan terang, untuk tampilan Kita akan membuatnya menjadi 2 bagian, Pertama untuk tampilan terang dan ke dua untuk tampilan gelap.

Tampilan mode gelap tidak semuanya di harus menjadi gelap, Anda dapat merubahnya sesuai keinginan, mulai dari terang dan gelap, atau terang dan orange atau juga orange dan gelap, semua tergantung pada minat yang di suka.

Namun dari rekomendasi di atas lebih banyak menggunakan mode standar yaitu terang dan gelap.

Ini adalah 2 slector css yang pertama harus Kita tulis.

Css 
/* Mode Tampilan Terang
-------------------------------*/
.theme-light {
  --bg-base: #eaeef6;
  --cl-body: #191919;
}

/* Mode Tampilan Gelap
-------------------------------*/
.theme-dark {
  --bg-base: #37474F;
  --cl-body: #b0bec5;
}

See the Pen Design light and dark- by Firmansyah (@firmansyahbio) on CodePen.

Label