Penerapan tema

Bahkan branding dapat responsif. Anda dapat menyesuaikan tampilan situs untuk menyesuaikan preferensi pengguna. Namun, pertama-tama, berikut cara memperluas branding situs Anda agar mencakup browser itu sendiri.

Menyesuaikan antarmuka browser

Beberapa browser memungkinkan Anda menyarankan warna tema berdasarkan palet situs. Antarmuka browser akan menyesuaikan dengan warna yang Anda sarankan. Tambahkan warna dalam elemen meta yang diberi nama 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 mungkin merasa terganggu jika skema warna browser mereka terlalu sering berubah. Pikirkan cara halus untuk menyesuaikan warna tema. Jika perubahannya terlalu mencolok, pengguna akan merasa terganggu dan keluar dari situs.

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 dari 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 Anda ke layar utama, browser akan menggunakan informasi dalam file manifes Anda untuk menampilkan pintasan yang sesuai.

Menyediakan mode gelap

Banyak sistem operasi memungkinkan pengguna menentukan preferensi untuk palet warna terang atau gelap. Hal ini merupakan ide yang baik untuk mengoptimalkan situs Anda sesuai dengan preferensi tema pengguna. Anda dapat mengakses preferensi ini dalam 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.

Pemberian tema dengan properti kustom

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

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 kustom CSS untuk menyimpan nilai warna Anda. Properti kustom berfungsi seperti variabel dalam bahasa pemrograman. Anda dapat memperbarui nilai variabel tanpa memperbarui namanya.

Jika 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 pemberian tema yang lebih canggih dengan properti kustom.

Gambar

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

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

Sekarang ikon Anda akan mengubah warnanya bersama dengan elemen lain di halaman Anda.

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

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

Untuk beberapa gambar, Anda mungkin ingin menggantinya 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 kode berikut ke CSS Anda:

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

Anda juga dapat menggunakan HTML. Tambahkan kode berikut 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;
}

Tema gelap biasanya memiliki warna merek yang redup. Anda dapat memperbarui nilai accent-color untuk mode gelap.

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

Sebaiknya gunakan properti kustom untuk hal ini agar 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 penyesuaian situs Anda agar sesuai dengan preferensi pengguna. Selanjutnya, Anda akan mempelajari cara membuat situs Anda dapat disesuaikan dengan semua jenis pertimbangan aksesibilitas.

Uji pemahaman Anda

Uji pengetahuan Anda tentang pemberian tema