Tema

Bahkan branding pun bisa responsif. Anda dapat menyesuaikan presentasi situs web Anda untuk mencocokkan dengan preferensi pengguna. Namun sebelumnya, berikut cara memperluas branding situs Anda untuk menyertakan browser itu sendiri.

Menyesuaikan antarmuka browser

Beberapa browser memungkinkan Anda menyarankan warna tema berdasarkan palet situs web Anda. Antarmuka browser akan menyesuaikan dengan warna yang Anda sarankan. Tambahkan warna dalam elemen meta yang bernama theme-color di head halaman Anda.

<meta name="theme-color" content="#00D494">

Anda dapat memperbarui nilai theme-color menggunakan JavaScript. Namun, gunakan kemampuan ini dengan bijak. Pengguna dapat merasa kewalahan jika skema warna browser mereka terlalu sering berubah. Pikirkan cara halus untuk menyesuaikan warna tema. Jika perubahannya terlalu mencolok, pengguna akan merasa terganggu.

Anda juga dapat menentukan warna tema dalam file manifes aplikasi web. Ini adalah file JSON dengan metadata tentang situs Anda.

Tautkan ke file manifes dari head dokumen Anda. Gunakan elemen link dengan nilai rel manifest.

<link rel="manifest" href="/manifest.json">

Dalam file manifes, cantumkan metadata Anda menggunakan key-value pair.

{
  "short_name": "Clearleft",
  "name": "Clearleft design agency",
  "start_url": "/",
  "background_color": "#00D494",
  "theme_color": "#00D494",
  "display": "standalone"
}

Jika pengunjung memutuskan untuk menambahkan situs web Anda ke layar beranda, browser akan menggunakan informasi dalam file manifes Anda untuk menampilkan pintasan yang sesuai.

Menyediakan mode gelap

Banyak sistem operasi memungkinkan pengguna untuk menentukan preferensi palet warna terang atau gelap, Anda sebaiknya mengoptimalkan situs sesuai preferensi tema pengguna. Anda dapat mengakses preferensi ini di fitur media yang disebut prefers-color-scheme.

@media (prefers-color-scheme: dark) {
  // Styles for a dark theme.
}

Tentukan warna tema dengan fitur media prefers-color-scheme dalam elemen meta.

<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)">

Anda juga dapat menggunakan fitur media prefers-color-scheme di dalam SVG. Jika Anda menggunakan file SVG untuk favicon, file tersebut dapat disesuaikan untuk mode gelap. Thomas Steiner menulis tentang prefers-color-scheme di favicon SVG untuk ikon mode gelap.

Penerapan tema dengan properti kustom

Jika Anda menggunakan nilai warna yang sama di beberapa tempat di seluruh CSS, akan sangat membosankan jika mengulangi semua pemilih dalam kueri media prefers-color-scheme.

body {
  background-color: white;
  color: black;
}
input {
  background-color: white;
  color: black;
  border-color: black;
}
button {
  background-color: black;
  color: white;
}
@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
  input {
    background-color: black;
    color: white;
    border-color: white;
  }
  button {
    background-color: white;
    color: black;
  }
}

Gunakan properti khusus CSS untuk menyimpan nilai warna. Properti kustom berfungsi seperti variabel dalam bahasa pemrograman. Anda dapat memperbarui nilai variabel tanpa memperbarui namanya.

Jika Anda memperbarui nilai properti kustom dalam kueri media prefers-color-scheme, Anda tidak perlu menulis semua pemilih dua kali.

html {
  --page-color: white;
  --ink-color: black;
}
@media (prefers-color-scheme: dark) {
  html {
    --page-color: black;
    --ink-color: white;
  }
}
body {
  background-color: var(--page-color);
  color: var(--ink-color);
}
input {
  background-color: var(--page-color);
  color: var(--ink-color);
  border-color: var(--ink-color);
}
button {
  background-color: var(--ink-color);
  color: var(--page-color);
}

Lihat membuat skema warna untuk contoh penerapan tema yang lebih canggih dengan properti kustom.

Gambar

Jika Anda menggunakan SVG di HTML, Anda juga dapat menerapkan properti khusus di sana.

svg {
  stroke: var(--ink-color);
  fill: var(--page-color);
}

Sekarang ikon Anda akan berubah warnanya bersama dengan elemen lain di laman Anda.

Jika ingin mengurangi kecerahan gambar fotografi saat ditampilkan dalam mode gelap, Anda dapat menerapkan filter dalam CSS.

@media (prefers-color-scheme: dark) {
  img {
    filter: brightness(.8) contrast(1.2);
  }
}

Untuk beberapa gambar, Anda mungkin ingin menukarnya sepenuhnya dalam mode gelap. Misalnya, Anda mungkin ingin menampilkan peta dengan skema warna yang lebih gelap. Gunakan elemen <picture> yang berisi elemen <source> dengan kueri media prefers-color-scheme.

<picture>
  <source srcset="darkimage.png" media="(prefers-color-scheme: dark)">
  <img src="lightimage.png" alt="A description of the image.">
</picture>

Formulir

Browser menyediakan palet warna default untuk kolom formulir. Beri tahu browser bahwa situs Anda menawarkan mode gelap dan terang. Dengan begitu, browser dapat memberikan gaya default yang sesuai untuk formulir.

Tambahkan ini ke CSS Anda:

html {
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  html {
    color-scheme: dark;
  }
}

Anda juga dapat menggunakan HTML. Tambahkan ini di head dokumen Anda:

<meta name="supported-color-schemes" content="light dark">

Gunakan properti accent-color di CSS untuk menata gaya kotak centang, tombol pilihan, dan beberapa kolom formulir lainnya.

html {
  accent-color: red;
}

Biasanya tema gelap memiliki warna merek yang lebih tenang. Anda dapat memperbarui nilai accent-color untuk mode gelap.

html {
  accent-color: red;
}
@media (prefers-color-scheme: dark) {
  html {
    accent-color: pink;
  }
}

Masuk akal untuk menggunakan properti kustom untuk ini sehingga Anda dapat menyimpan semua deklarasi warna di satu tempat.

html {
  color-scheme: light;
  --page-color: white;
  --ink-color: black;
  --highlight-color: red;
}
@media (prefers-color-scheme: dark) {
  html {
    color-scheme: dark;
    --page-color: black;
    --ink-color: white;
    --highlight-color: pink;
  }
}
html {
  accent-color: var(--highlight-color);
}
body {
  background-color: var(--page-color);
  color: var(--ink-color);
}

Menyediakan mode gelap hanyalah salah satu contoh cara menyesuaikan situs Anda agar sesuai dengan preferensi pengguna. Selanjutnya, Anda akan mempelajari cara membuat situs dapat disesuaikan dengan semua jenis pertimbangan aksesibilitas.

Menguji pemahaman Anda

Uji pengetahuan Anda tentang tema