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">
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);
}
}
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>
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.