Marka bilinci oluşturma bile duyarlı olabilir. Web sitenizin sunumunu, kullanıcının tercihine uyacak şekilde ayarlayabilirsiniz. Ancak öncelikle, web sitenizin marka öğelerini tarayıcının kendisini içerecek şekilde nasıl genişleteceğiniz anlatılmaktadır.
Tarayıcı arayüzünü özelleştirme
Bazı tarayıcılar, web sitenizin paletine uygun bir tema rengi önermenize olanak tanır.
Tarayıcının arayüzü, önerdiğiniz renge uyar. Rengi, sayfalarınızın head
tanesinde theme-color
adlı bir meta
öğesine ekleyin.
<meta name="theme-color" content="#00D494">
![Açık sol nokta com.](https://web.dev/static/learn/design/theming/image/clearleft-dot-com-fc330772c30d.png?authuser=5&hl=tr)
![Dayanıklı Web Tasarımı nokta com.](https://web.dev/static/learn/design/theming/image/resilient-web-design-dot-79ec7ad52532.png?authuser=5&hl=tr)
![Oturum nokta org.](https://web.dev/static/learn/design/theming/image/the-session-dot-org-138442c2e4689.png?authuser=5&hl=tr)
theme-color
değerini JavaScript kullanarak güncelleyebilirsiniz. Ancak bu gücü akıllıca kullanın.
Tarayıcılarının renk şemasının çok sık değişmesi, kullanıcıların gözünü korkutabilir.
Tema rengini ince bir şekilde nasıl ayarlayabileceğinizi düşünün. Değişiklikler çok rahatsız edici olursa kullanıcılar rahatsız edici bir şekilde ayrılacaktır.
Web uygulaması manifest dosyasında da bir tema rengi belirtebilirsiniz. Bu, web sitenizle ilgili meta verileri içeren bir JSON dosyasıdır.
Dokümanlarınızın head
kısmından manifest dosyasına bağlantı oluşturun. rel
değeri manifest
olan bir link
öğesi kullanın.
<link rel="manifest" href="/manifest.json">
Manifest dosyasında anahtar/değer çiftlerini kullanarak meta verilerinizi listeleyin.
{
"short_name": "Clearleft",
"name": "Clearleft design agency",
"start_url": "/",
"background_color": "#00D494",
"theme_color": "#00D494",
"display": "standalone"
}
Ziyaretçiler web sitenizi ana ekranına eklemeye karar verirse tarayıcı, uygun bir kısayolu görüntülemek için manifest dosyanızdaki bilgileri kullanır.
Koyu mod sağla
Birçok işletim sistemi, kullanıcıların açık veya koyu renk paleti için bir tercih belirtmesine izin verir. Bu, sitenizi kullanıcılarınızın tema tercihlerine göre optimize etmek için iyi bir fikirdir.
Bu tercihe prefers-color-scheme
adlı medya özelliğinde erişebilirsiniz.
@media (prefers-color-scheme: dark) {
// Styles for a dark theme.
}
meta
öğesindeki prefers-color-scheme
medya özelliğini kullanarak tema renklerini belirtin.
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)">
SVG'deki prefers-color-scheme
medya özelliğini de kullanabilirsiniz.
Site simgeniz için SVG dosyası kullanıyorsanız bu dosya koyu moda göre ayarlanabilir.
Thomas Steiner, koyu mod simgeleri için SVG site simgelerindeki prefers-color-scheme
hakkında bilgi verdi.
Özel özelliklerle tema oluşturma
CSS'nizde birden fazla yerde aynı renk değerlerini kullanıyorsanız tüm seçicilerinizi bir prefers-color-scheme
medya sorgusu içinde tekrarlamak oldukça yorucu olabilir.
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;
}
}
Renk değerlerinizi saklamak için CSS özel özelliklerini kullanın. Özel özellikler bir programlama dilindeki değişkenler gibi çalışır. Bir değişkenin değerini, adını güncellemeden güncelleyebilirsiniz.
Bir prefers-color-scheme
medya sorgusunda özel özelliklerinizin değerlerini güncellerseniz tüm seçicilerinizi iki kez yazmanız gerekmez.
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);
}
Özel özelliklere sahip tema oluşturma örnekleri için renk şeması oluşturma bölümüne bakın.
Resimler
HTML'nizde SVG kullanıyorsanız özel özellikleri oradan da uygulayabilirsiniz.
svg {
stroke: var(--ink-color);
fill: var(--page-color);
}
Artık simgeleriniz, sayfanızdaki diğer öğelerle birlikte renklerini değiştirir.
Koyu modda görüntülenirken fotoğraf görsellerinizin parlaklığını azaltmak isterseniz CSS'de filtre uygulayabilirsiniz.
@media (prefers-color-scheme: dark) {
img {
filter: brightness(.8) contrast(1.2);
}
}
![Normal parlaklıkta üç fotoğraf.](https://web.dev/static/learn/design/theming/image/three-photographs-normal-e7cfaee065a3.png?authuser=5&hl=tr)
![Biraz daha az parlaklığa sahip üç fotoğraf.](https://web.dev/static/learn/design/theming/image/three-photographs-slight-6ca40f542a4e9.png?authuser=5&hl=tr)
Bazı resimleri koyu modda tamamen değiştirmek isteyebilirsiniz.
Örneğin, daha koyu renk şemasına sahip bir haritayı göstermek isteyebilirsiniz.
prefers-color-scheme
medya sorgusuyla birlikte <source>
öğesi içeren <picture>
öğesini kullanın.
<picture>
<source srcset="darkimage.png" media="(prefers-color-scheme: dark)">
<img src="lightimage.png" alt="A description of the image.">
</picture>
![Birinde açık renkler, diğerinde ise koyu renkler kullanılan iki Broolyn haritası.](https://web.dev/static/learn/design/theming/image/two-maps-broolyn-using-5ab9d5d846e67.png?authuser=5&hl=tr)
Formlar
Tarayıcılar form alanları için varsayılan bir renk paleti sağlar. Tarayıcıya, sitenizin hem koyu hem de açık mod sunduğunu bildirin. Böylece tarayıcı, formlar için uygun varsayılan stili sağlayabilir.
CSS'nize şunu ekleyin:
html {
color-scheme: light;
}
@media (prefers-color-scheme: dark) {
html {
color-scheme: dark;
}
}
HTML de kullanabilirsiniz. Bunu dokümanlarınızın head
bölümüne ekleyin:
<meta name="supported-color-schemes" content="light dark">
Onay kutuları, radyo düğmeleri ve diğer bazı form alanlarının stilini belirlemek için CSS'deki accent-color
özelliğini kullanın.
html {
accent-color: red;
}
Koyu temalarda yumuşak marka renklerinin kullanılması yaygın bir durumdur. Koyu mod için accent-color
değerini güncelleyebilirsiniz.
html {
accent-color: red;
}
@media (prefers-color-scheme: dark) {
html {
accent-color: pink;
}
}
Bunun için özel bir özellik kullanmanız önerilir. Böylece tüm renk beyanlarınızı tek bir yerde tutabilirsiniz.
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);
}
Koyu mod sağlamak, sitenizi kullanıcılarınızın tercihlerine uygun hale getirmenin yalnızca bir örneğidir. Ardından, sitenizi her türlü erişilebilirlik konusuna nasıl uyarlayabileceğinizi öğreneceksiniz.
Öğrendiklerinizi sınayın
Tema oluşturma konusundaki bilginizi test edin
Tarayıcıyı web sayfasının dışında etkileyen tema renkleri sağlamak için şunu kullanın:
<meta>
etiketini güncellemek için kullanırsanız.manifest.json
sağlanabilir ve uygulamanın mobil ana ekrandan açılma şeklinin tonlanması için tema renklerini belirtmeyi sağlayan alanlar içerir.<meta>
etiketi<head>
etiketinde bu tema rengini fark edebilir.Kullanıcının açık veya koyu temaya ilişkin sistem tercihini etkilemek için şunları kullanın:
(prefers-color-scheme)
medya sorgusuBu nedenle koyu temayı destekliyorsunuz ancak tüm form girişlerinde hâlâ açık tema kullanılıyor. Yapabilecekleriniz
html { color-scheme: light dark; }
öğesini CSS'nize ekleyin.<head>
etiketinize <meta name="supported-color-schemes" content="light dark">
kodunu ekleyin.