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

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

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

कुछ ब्राउज़र, आपकी वेबसाइट के पैलेट के आधार पर थीम के रंग का सुझाव देने की सुविधा देते हैं. ब्राउज़र का इंटरफ़ेस, आपके सुझाए गए रंग के हिसाब से बदल जाता है. अपने पेजों के 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)">

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

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

अगर आपने अपनी सीएसएस में कई जगहों पर एक ही रंग की वैल्यू का इस्तेमाल किया है, तो 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 {
  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);
}

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

देखें कि आपको कितना समझ आया

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