Bahkan {i>branding<i} pun bisa bersifat responsif. Anda dapat menyesuaikan penyajian situs web Anda agar sesuai dengan preferensi pengguna. Namun sebelumnya, berikut cara memperluas branding situs web dengan 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 bernama theme-color di head halaman Anda.
<meta name="theme-color" content="#00D494">
Anda dapat memperbarui nilai theme-color menggunakan JavaScript. Namun, gunakan kekuatan ini dengan bijak.
Ini bisa sangat melelahkan bagi pengguna jika skema warna browser mereka terlalu sering berubah.
Pikirkan cara yang halus untuk menyesuaikan warna tema. Jika perubahannya terlalu mengagetkan, pengguna akan merasa kesal.
Anda juga dapat menentukan warna tema di 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">
Di 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 di file manifes untuk menampilkan pintasan yang sesuai.
Menyediakan mode gelap
Banyak sistem operasi memungkinkan pengguna menentukan preferensi palet warna terang atau gelap,
yang merupakan ide yang baik untuk mengoptimalkan situs Anda sesuai preferensi tema pengguna Anda.
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.
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 mungkin akan merepotkan.
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 khusus berfungsi seperti variabel dalam bahasa pemrograman. Anda dapat memperbarui nilai variabel tanpa memperbarui namanya.
Jika Anda memperbarui nilai properti khusus 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 mengetahui contoh tema lanjutan lainnya 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 pada halaman 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 demikian, browser bisa menyediakan penataan 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;
}
Tema gelap biasanya memiliki warna merek yang tidak terlalu mencolok. 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 sehingga Anda bisa 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 agar sesuai dengan preferensi pengguna Anda. Berikutnya, Anda akan mempelajari cara membuat situs Anda mudah disesuaikan dengan segala macam pertimbangan aksesibilitas.
Menguji pemahaman Anda
Uji pengetahuan Anda tentang tema
Untuk memberikan warna tema yang memengaruhi browser di luar halaman web, gunakan:
<meta> 'warna tema'.manifest.json dapat diberikan dan menyertakan kolom untuk menentukan warna tema guna menambahkan tint tampilan aplikasi saat dibuka dari layar utama seluler.<meta> 'warna tema'<head> untuk menghindari flash warna yang tidak diinginkan.Untuk menyesuaikan dengan preferensi sistem pengguna terkait tema terang atau gelap, gunakan:
(prefers-color-scheme)Jadi, Anda mendukung tema gelap, tetapi semua input formulir masih bertema terang. Apa yang dapat Anda lakukan?
html { color-scheme: light dark; } ke CSS Anda.<meta name="supported-color-schemes" content="light dark"> ke tag <head> HTML Anda.