Marka bilinci oluşturma stratejisi bile duyarlı olabilir. Web sitenizin sunumunu, kullanıcının tercihine uyacak şekilde ayarlayabilirsiniz. Ancak öncelikle, web sitenizin markasını tarayıcının kendisini içerecek şekilde nasıl genişleteceğinize değineceğiz.
Tarayıcı arayüzünü özelleştirme
Bazı tarayıcılar, web sitenizin paletine dayalı bir tema rengi önermenize izin verir.
Tarayıcının arayüzü, önerdiğiniz renge uyum sağlar. Rengi sayfalarınızın head
bölümünde theme-color
adlı bir meta
öğesine ekleyin.
<meta name="theme-color" content="#00D494">
.
ziyaret edin.
theme-color
değerini JavaScript kullanarak güncelleyebilirsiniz. Ancak bu gücü akıllıca kullanın.
Tarayıcılarının renk şeması çok sık değişirse kullanıcılar da bunaltıcı gelebilir.
Tema rengini düzenlemenin incelikli yollarını düşünün. Değişiklikler çok rahatsız edici olursa kullanıcılar rahatsız olur.
Web uygulaması manifest dosyasında da tema rengi belirtebilirsiniz. Bu, web sitenizle ilgili meta verileri içeren bir JSON dosyasıdır.
Dokümanlarınızın head
bölümünden 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, meta verilerinizi anahtar/değer çiftlerini kullanarak listeleyin.
{
"short_name": "Clearleft",
"name": "Clearleft design agency",
"start_url": "/",
"background_color": "#00D494",
"theme_color": "#00D494",
"display": "standalone"
}
Bir ziyaretçi 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 bir açık veya koyu renk paleti için tercih belirtmesine olanak tanır.
Bu da sitenizi kullanıcının tema tercihlerine göre optimize etmek için iyi bir fikirdir.
Bu tercihe prefers-color-scheme
adlı medya özelliğinden erişebilirsiniz.
@media (prefers-color-scheme: dark) {
// Styles for a dark theme.
}
Tema renklerini, meta
öğesindeki prefers-color-scheme
medya özelliğini kullanarak belirtin.
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)">
SVG'nin içindeki prefers-color-scheme
medya özelliğini de kullanabilirsiniz.
Site simgeniz için bir SVG dosyası kullanıyorsanız bu dosya koyu moda göre ayarlanabilir.
Thomas Steiner'ın
Koyu mod simgeleri için SVG site simgelerinde prefers-color-scheme
.
Özel özelliklerle tema oluşturma
CSS'nizin tamamındaki birden çok yerde aynı renk değerlerini kullanıyorsanız tüm seçicilerinizi bir prefers-color-scheme
medya sorgusu içinde tekrarlamak çok 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 depolamak için CSS özel özelliklerini kullanın. Özel mülkler, bir programlama dilindeki değişkenler gibi çalışır. Bir değişkenin değerini, adını güncellemeden güncelleyebilirsiniz.
prefers-color-scheme
medya sorgusu içindeki ö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 özelliklerle tema oluşturma hakkında daha gelişmiş örnekler için renk şeması oluşturma konusuna bakın.
Resimler
HTML'nizde SVG kullanıyorsanız özel özellikleri de oradan 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örüntülerinizin parlaklığını azaltmak istiyorsanız CSS'de bir filtre uygulayabilirsiniz.
@media (prefers-color-scheme: dark) {
img {
filter: brightness(.8) contrast(1.2);
}
}
Bazı resimleri koyu modda tamamen değiştirebilirsiniz.
Örneğin, daha koyu renk şemasına sahip bir harita göstermek isteyebilirsiniz.
<source>
öğesi içeren <picture>
öğesini prefers-color-scheme
medya sorgusuyla kullanın.
<picture>
<source srcset="darkimage.png" media="(prefers-color-scheme: dark)">
<img src="lightimage.png" alt="A description of the image.">
</picture>
Formlar
Tarayıcılar, form alanları için varsayılan bir renk paleti sağlar. Tarayıcıya, sitenizde hem koyu hem de açık mod sunduğunu bildirin. Bu şekilde, tarayıcı formlar için uygun varsayılan stilleri sağlayabilir.
CSS'nize şunu ekleyin:
html {
color-scheme: light;
}
@media (prefers-color-scheme: dark) {
html {
color-scheme: dark;
}
}
HTML de kullanabilirsiniz. Dokümanlarınızın head
bölümüne bunu ekleyin:
<meta name="supported-color-schemes" content="light dark">
Onay kutularının, radyo düğmelerinin ve diğer bazı form alanlarının stilini belirlemek için CSS'de accent-color
özelliğini kullanın.
html {
accent-color: red;
}
Koyu temalarda ise daha soluk marka renklerinin bulunması sık karşılaşılan 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 kullanmak mantıklıdır. 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 uyacak şekilde uyarlamaya ilişkin örneklerden yalnızca biridir. Ardından, sitenizi her türlü erişilebilirlik açısından nasıl uyumlu hale getirebileceğinizi öğreneceksiniz.
Öğrendiklerinizi sınayın
Tema belirlemeyle ilgili bilginizi test edin
Tarayıcıyı web sayfası dışında etkileyen tema renkleri sağlamak için şunları kullanın:
<meta>
etiketi.manifest.json
sağlanabilir ve uygulamanın mobil ana ekrandan açılma şeklini belirlemek için tema renklerini belirten alanlar içerir.<meta>
etiket<head>
etiketinde bu tema rengini fark ederek istenmeyen renk geçişlerini önler.Kullanıcının açık veya koyu temayla ilgili sistem tercihini belirlemek için şunu kullanın:
(prefers-color-scheme)
medya sorgusuBu nedenle koyu temayı destekliyorsunuz ancak formdaki tüm girişler açık temaya sahip. Yapabilecekleriniz
html { color-scheme: light dark; }
ekleyin.<head>
etiketinize <meta name="supported-color-schemes" content="light dark">
ekleyin.