यह कैसे पता लगाया जाए कि ब्राउज़र में ओएस डार्क मोड में है?

Question

" कैसे पता लगाने के लिए कि ओएस एक्स डार्क मोड में है? "

क्या किसी ने पाया है कि क्या पता लगाने का कोई तरीका है कि उपयोगकर्ता का सिस्टम सफारी / क्रोम / फ़ायरफ़ॉक्स में नए ओएस एक्स डार्क मोड में है या नहीं?

हम वर्तमान ऑपरेटिंग मोड के आधार पर अपनी साइट के डिज़ाइन को डार्क-मोड फ्रेंडली होना चाहते हैं।

Comments

जहाँ तक मुझे पता है, प्रकाश या अंधेरे मोड का पता लगाने के लिए सफारी के लिए कोई सीएसएस मीडिया क्वेरी नहीं है, लेकिन सफारी निश्चित रूप से HTML पृष्ठों में अंधेरे विजेट का समर्थन करती है। इसके लिए रडार दर्ज करना मददगार हो सकता है।

— mschmidt

मुझे hiurt नहीं है, लेकिन बाद Stackoverflow अंधेरे मोड शुरू की मैं googled कि वे किस तरह "प्रणाली" मोड लागू किया और इस सवाल पर ठोकर खाई। मुझे इस पर बहुत ट्रैफ़िक की उम्मीद है :-)

— usr-local-

Answer 1

नया मानक W3C पर मीडिया क्वेरी स्तर 5 में पंजीकृत है ।

नोट: वर्तमान में केवल सफारी प्रौद्योगिकी पूर्वावलोकन रिलीज 68 में उपलब्ध है

मामले में उपयोगकर्ता की प्राथमिकता है light:

/* Light mode */
@media (prefers-color-scheme: light) {
    body {
        background-color: white;
        color: black;
    }
}

मामले में उपयोगकर्ता की प्राथमिकता है dark:

/* Dark mode */
@media (prefers-color-scheme: dark) {
    body {
        background-color: black;
        color: white;
    }
}

no-preferenceउपयोगकर्ता द्वारा कोई वरीयता नहीं होने की स्थिति में भी विकल्प होता है। लेकिन मैं आपको सलाह देता हूं कि आप उस स्थिति में सामान्य सीएसएस का उपयोग करें और अपने सीएसएस को सही ढंग से कैस्केड करें।

EDIT (7 डेस 2018):

में सफारी टैक्नोलॉजी प्रीव्यू रिलीज 71 वे सफारी में एक टॉगल स्विच की घोषणा की आसान परीक्षण बनाने के लिए। मैंने ब्राउज़र व्यवहार को देखने के लिए एक परीक्षण पृष्ठ भी बनाया ।

यदि आपके पास सफ़ारी प्रौद्योगिकी पूर्वावलोकन रिलीज़ 71 स्थापित है, तो आप इसके माध्यम से सक्रिय कर सकते हैं:

विकसित करें> प्रायोगिक विशेषताएं> डार्क मोड सीएसएस सपोर्ट

फिर यदि आप परीक्षण पृष्ठ खोलते हैं और तत्व निरीक्षक खोलते हैं तो आपके पास डार्क / लाइट मोड को चालू करने के लिए एक नया आइकन है।

-

EDIT (11 feb 2019): नए सफारी 12.1 डार्क मोड में Apple जहाज

-

EDIT (5 sep 2019): वर्तमान में दुनिया के 25% लोग डार्क मोड CSS का उपयोग कर सकते हैं। स्रोत: caniuse.com

आगामी ब्राउज़र:

• iOS 13 (मुझे लगता है कि इसे अगले हफ्ते Apple के कीनोट के बाद भेज दिया जाएगा)
• EdgeHTML 76 (सुनिश्चित नहीं है कि जब भेज दिया जाएगा)

-

EDIT (5 nov 2019): वर्तमान में दुनिया के 74% लोग डार्क मोड CSS का उपयोग कर सकते हैं। स्रोत: caniuse.com

-

EDIT (3 फरवरी 2020): Microsoft एज 79 डार्क मोड को सपोर्ट करता है। (15 जनवरी 2020 को जारी)

-

मेरा सुझाव यह होगा: कि आपको डार्क मोड को लागू करने पर विचार करना चाहिए क्योंकि अधिकांश उपयोगकर्ता अब इसका उपयोग कर सकते हैं (विशेषकर मोबाइल उर्फ ​​बैटरी की बचत के लिए)।

नोट: सभी प्रमुख ब्राउज़र अब अंधेरे मोड का समर्थन कर रहे हैं, सिवाय इसके: आईई, एज

Comments

बस इसका परीक्षण किया। यदि आप अपने मैक ओएस सेटिंग्स में थीम बदलते हैं, तो आपको ब्राउज़र को पुनरारंभ करने की आवश्यकता है। बहुत बुरा यह मक्खी पर सिंक नहीं है।

— हरमन Starikov

@HermanStarikov मैंने इस मुद्दे पर एक अपडेट पोस्ट किया है जिसका आप वर्णन कर रहे हैं। नई सफारी टेक्नोलॉजी प्रिव्यू रिलीज़ 71 के साथ आप रियलटाइम में टॉगल कर सकते हैं।

— डेवी डी

अच्छा! मैंने बूटस्ट्रैप के साथ कौन सी थीमिंग दिखाई देगी, इसका थोड़ा डेमो किया: twitter.com/Hermanhasawish/status/1071517994302562305

— हरमन स्टारिकोव

क्या जावास्क्रिप्ट में इसका पता लगाने का कोई तरीका है?

— आकाश काव

@AkashKava मैं चारों ओर गुगली हुई, हाँ यह संभव है यदि आप इस तरह से कुछ का उपयोग करते हैं: window.matchMedia("(prefers-color-scheme: dark)").matchesयदि मेरे पास कुछ खाली समय है तो मैं अपने उत्तर के लिए एक पूर्ण जावास्क्रिप्ट समाधान जोड़ूंगा ।

— डेवी डी

Answer 2

यदि आप जेएस से इसका पता लगाना चाहते हैं, तो आप इस कोड का उपयोग कर सकते हैं:

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    // dark mode
}

परिवर्तनों को देखने के लिए:

window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
    const newColorScheme = e.matches ? "dark" : "light";
});

Comments

नमस्ते! यह बहुत अच्छा काम करता है। हालांकि मैं उत्सुक हूँ - यह वाक्य रचना वास्तव में कैसे काम करती है?

— स्टॉर्बलेस

@Stormblessed पहले यह जाँच करेगा कि क्या ब्राउज़र समर्थन करता है matchMediaऔर फिर यह prefers-color-scheme: darkस्ट्रिंग से मिलान करने का प्रयास करेगा । यदि यह मेल खाता है तो हम अंधेरे मोड में हैं।

— मार्क स्जाबो

नए एल्विस ऑपरेटर के साथ इसे लिखा जा सकता हैif (window.matchMedia?('(prefers-color-scheme: dark)').matches) { }

— मार्क स्जाबो

ओह, यह समझ में आता है! .Matches के साथ वाक्यविन्यास ऐसा लग रहा था कि यह पहली चीज़ और दूसरी या कुछ के बीच तुलना कर रहा है। धन्यवाद!

— स्ट्रॉब्लेस्ड

चेक किया हुआ उत्तर होना चाहिए।

— पॉडपर्सन

Answer 3

यह वर्तमान में (सितंबर 2018) "सीएसएस वर्किंग ग्रुप एडिटर ड्राफ्ट" में चर्चा की जा रही है । मीडिया लॉन्च के रूप में युक्ति (ऊपर देखें) लॉन्च की गई है। सफारी में कुछ पहले ही उतर चुका है, यहां भी देखें । तो सिद्धांत रूप में आप इसे सफारी / वेबकिट में कर सकते हैं:

@media (prefers-dark-interface) { color: white; background: black }

लेकिन ऐसा लगता है कि यह निजी है । एमडीएन पर एक सीएसएस मीडिया फीचर inverted-colorsका उल्लेख किया गया है । प्लग: मैंने यहां डार्क मोड के बारे में ब्लॉग किया है ।

Answer 4

मैंने हालांकि मोज़िला एपीआई की खोज की, लेकिन उन्हें ब्राउज़र-विंडोज़ रंग के अनुरूप कोई भी चर नहीं लगता है। हालाँकि मुझे एक पृष्ठ मिला है जो आपकी मदद कर सकता है: सीएसएस में ऑपरेटिंग सिस्टम शैलियों का उपयोग कैसे करें । लेख-शीर्ष लेख के बावजूद क्रोम और फ़ायरफ़ॉक्स के लिए रंग अलग-अलग हैं।

Comments

अब यह है - developer.mozilla.org/en-US/docs/Web/CSS/@media/…

— सिवालिकम

Answer 5

मोज़िला के अनुसार, यहां सितंबर 2019 तक पसंदीदा तरीका है

@media (prefers-color-scheme: dark) {
  body {
    background: #000;
  }
}
@media (prefers-color-scheme: light) {
  body {
    background: #fff;
  }
}