थीम बनाई जा रही है

यहां तक कि ब्रैंडिंग भी रिस्पॉन्सिव हो सकती है. उपयोगकर्ता की पसंद के हिसाब से, अपनी वेबसाइट के प्रज़ेंटेशन में बदलाव किया जा सकता है. लेकिन सबसे पहले, ब्राउज़र को शामिल करने के लिए अपनी वेबसाइट की ब्रैंडिंग को बढ़ाने का तरीका यहां बताया गया है.

ब्राउज़र इंटरफ़ेस को पसंद के मुताबिक बनाएं

कुछ ब्राउज़र आपको अपनी वेबसाइट के पैलेट के आधार पर, थीम के रंग का सुझाव देने की सुविधा देते हैं. ब्राउज़र का इंटरफ़ेस, आपके सुझाए गए रंग के हिसाब से काम करता है. अपने head पेजों में theme-color नाम के meta एलिमेंट में रंग जोड़ें.

<meta name="theme-color" content="#00D494">

JavaScript का इस्तेमाल करके, theme-color की वैल्यू को अपडेट किया जा सकता है. हालांकि, इसका इस्तेमाल सोच-समझकर ही करें. अगर उपयोगकर्ताओं के ब्राउज़र की कलर स्कीम बार-बार बदलती है, तो यह उनके लिए मुश्किल हो सकता है. थीम के रंग को बदलने के आसान तरीकों के बारे में सोचें. अगर बदलाव बहुत परेशान करने वाले हैं, तो उपयोगकर्ता नाराज़ हो जाएंगे.

वेब ऐप्लिकेशन मेनिफ़ेस्ट फ़ाइल में, थीम का रंग भी तय किया जा सकता है. यह एक JSON फ़ाइल है, जिसमें आपकी वेबसाइट के मेटाडेटा की जानकारी है.

अपने दस्तावेज़ों के head से मेनिफ़ेस्ट फ़ाइल का लिंक करें. manifest के rel वैल्यू वाले link एलिमेंट का इस्तेमाल करें.

<link rel="manifest" href="/manifest.json">

मेनिफ़ेस्ट फ़ाइल में, की/वैल्यू पेयर का इस्तेमाल करके अपने मेटाडेटा की सूची बनाएं.

{
  "short_name": "Clearleft",
  "name": "Clearleft design agency",
  "start_url": "/",
  "background_color": "#00D494",
  "theme_color": "#00D494",
  "display": "standalone"
}

अगर वेबसाइट पर आने वाला कोई व्यक्ति आपकी वेबसाइट को अपनी होम स्क्रीन पर जोड़ने का फ़ैसला करता है, तो ब्राउज़र आपकी मेनिफ़ेस्ट फ़ाइल में दी गई जानकारी का इस्तेमाल करके, सही शॉर्टकट दिखाएगा.

गहरे रंग वाला मोड उपलब्ध कराएं

कई ऑपरेटिंग सिस्टम, उपयोगकर्ताओं को हल्के या गहरे रंग वाले पटल की प्राथमिकता तय करने की सुविधा देते हैं. आपकी साइट को उपयोगकर्ता की थीम से जुड़ी प्राथमिकताओं के हिसाब से ऑप्टिमाइज़ करना एक अच्छा आइडिया है. इस सेटिंग को prefers-color-scheme नाम की मीडिया सुविधा में ऐक्सेस किया जा सकता है.

@media (prefers-color-scheme: dark) {
  // Styles for a dark theme.
}

meta एलिमेंट में prefers-color-scheme मीडिया सुविधा की मदद से, थीम का रंग तय करें.

<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)">

SVG में prefers-color-scheme मीडिया सुविधा का भी इस्तेमाल किया जा सकता है. अगर फ़ेविकॉन के लिए किसी SVG फ़ाइल का इस्तेमाल किया जाता है, तो उसे गहरे रंग वाले मोड में अडजस्ट किया जा सकता है. थॉमस स्टाइनर ने गहरे रंग वाले मोड वाले आइकॉन के लिए SVG फ़ेविकॉन में prefers-color-scheme के बारे में लिखा.

कस्टम प्रॉपर्टी के साथ थीम बनाना

अगर आप अपनी पूरी सीएसएस में कई जगहों पर एक ही रंग की वैल्यू का इस्तेमाल करते हैं, तो किसी prefers-color-scheme मीडिया क्वेरी में अपने सभी सिलेक्टर को दोहराना काफ़ी मुश्किल हो सकता है.

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;
  }
}

रंग की वैल्यू को सेव करने के लिए, सीएसएस की कस्टम प्रॉपर्टी का इस्तेमाल करें. कस्टम प्रॉपर्टी, किसी प्रोग्रामिंग भाषा में वैरिएबल की तरह काम करती हैं. किसी वैरिएबल का नाम अपडेट किए बिना, उसकी वैल्यू को अपडेट किया जा सकता है.

अगर prefers-color-scheme मीडिया क्वेरी में कस्टम प्रॉपर्टी की वैल्यू अपडेट की जाती हैं, तो आपको सभी सिलेक्टर को दो बार लिखने की ज़रूरत नहीं है.

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

कस्टम प्रॉपर्टी के साथ थीम सेट करने के ज़्यादा बेहतर उदाहरणों के लिए, कलर स्कीम बनाना देखें.

इमेज

अगर आपके एचटीएमएल में SVG का इस्तेमाल हो रहा है, तो वहां भी कस्टम प्रॉपर्टी लागू की जा सकती हैं.

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

अब आपके आइकॉन, पेज पर मौजूद अन्य एलिमेंट के साथ-साथ अपना रंग बदल देंगे.

अगर आपको गहरे रंग वाले मोड में अपनी फ़ोटो की इमेज की चमक कम करनी है, तो सीएसएस में फ़िल्टर का इस्तेमाल किया जा सकता है.

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

कुछ इमेज के लिए, हो सकता है कि आप उन्हें गहरे रंग वाले मोड में पूरी तरह बदलना चाहें. उदाहरण के लिए, हो सकता है कि आप गहरे कलर स्कीम वाला मैप दिखाना चाहें. ऐसे <picture> एलिमेंट का इस्तेमाल करें जिसमें prefers-color-scheme मीडिया क्वेरी के साथ <source> एलिमेंट हो.

<picture>
  <source srcset="darkimage.png" media="(prefers-color-scheme: dark)">
  <img src="lightimage.png" alt="A description of the image.">
</picture>

फ़ॉर्म

ब्राउज़र, फ़ॉर्म फ़ील्ड के लिए डिफ़ॉल्ट रंग पटल उपलब्ध कराते हैं. ब्राउज़र को बताएं कि आपकी साइट, गहरे रंग और हल्के रंग वाले मोड, दोनों का इस्तेमाल करती है. इस तरह, ब्राउज़र फ़ॉर्म के लिए सही डिफ़ॉल्ट स्टाइल दे सकता है.

इसे अपनी सीएसएस में जोड़ें:

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

आपके पास एचटीएमएल का भी इस्तेमाल करने का विकल्प होता है. इसे अपने head दस्तावेज़ों में जोड़ें:

<meta name="supported-color-schemes" content="light dark">

चेकबॉक्स, रेडियो बटन, और फ़ॉर्म के कुछ दूसरे फ़ील्ड को स्टाइल करने के लिए, सीएसएस में accent-color प्रॉपर्टी का इस्तेमाल करें.

html {
  accent-color: red;
}

गहरे रंग वाली थीम पर ब्रैंड के हल्के रंग का दिखना आम बात है. गहरे रंग वाले मोड के लिए accent-color की वैल्यू अपडेट की जा सकती है.

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

इसके लिए कस्टम प्रॉपर्टी का इस्तेमाल करना सही होता है, ताकि आप रंग से जुड़े सभी एलान एक ही जगह पर रख सकें.

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

गहरे रंग वाला मोड देना, अपनी साइट को उपयोगकर्ताओं की पसंद के मुताबिक बनाने का सिर्फ़ एक उदाहरण है. इसके बाद, आप जानेंगे कि अपनी साइट को हर तरह की सुलभता सुविधा के हिसाब से कैसे बनाया जा सकता है.

आपने जो सीखा है उसकी जांच करें

थीम पर अपने ज्ञान को परखें