ব্রাউজারগুলিতে ওএস অন্ধকার মোডে রয়েছে কীভাবে সনাক্ত করবেন?

Question

" ব্রাউজারগুলির জন্য ওএস এক্স অন্ধকার মোডে থাকলে কীভাবে সনাক্ত করবেন? " এর মতো।

ব্যবহারকারীর সিস্টেমটি সাফারি / ক্রোম / ফায়ারফক্সে নতুন ওএস এক্স ডার্ক মোডে রয়েছে কিনা তা সনাক্ত করার কোনও উপায় আছে কি কেউ খুঁজে পেয়েছেন?

আমরা বর্তমান অপারেটিং মোডের উপর ভিত্তি করে আমাদের সাইটের ডিজাইনকে ডার্ক-মোড বান্ধব হতে চাই।

Comments

যতদূর আমি জানি, হালকা বা গা dark় মোড সনাক্ত করার জন্য সাফারিটির জন্য কোনও সিএসএস মিডিয়া কোয়েরি নেই, তবে সাফারি অবশ্যই HTML পৃষ্ঠাগুলিতে অন্ধকার উইজেটগুলি সমর্থন করে। এটির জন্য একটি রাডার ফাইল করা সহায়ক হতে পারে।

— এমএসসিমিট

আমাকে hiurt না, কিন্তু পরে Stackoverflow অন্ধকার মোড চালু আমি googled কিভাবে তারা "সিস্টেম" মোড বাস্তবায়িত এই প্রশ্নের উপর পদস্খলিত। আমি এতে প্রচুর ট্র্যাফিকের প্রত্যাশা করব :-)

— usr-local-r

Answer 1

নতুন মানটি ডাব্লু 3 সিতে মিডিয়া ক্যোয়ারী স্তর 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ব্যবহারকারীর পছন্দ না থাকলে ক্ষেত্রেও বিকল্প রয়েছে। তবে আমি আপনাকে কেবল সেই ক্ষেত্রে সাধারণ সিএসএস ব্যবহার এবং আপনার সিএসএসকে সঠিকভাবে ক্যাসকেড করার পরামর্শ দিচ্ছি।

সম্পাদনা (7 ডিসেম্বর 2018):

ইন সাফারি প্রযুক্তিগত প্রি-ভিউ রিলিজ 71 তারা সাফারি একটি টগল সুইচ ঘোষণা সহজ পরীক্ষা করা। ব্রাউজারের আচরণ দেখতে আমি একটি পরীক্ষার পৃষ্ঠাও তৈরি করেছি।

আপনার যদি সাফারি প্রযুক্তি পূর্বরূপ রিলিজ 71 ইনস্টল করা থাকে তবে আপনি এর মাধ্যমে সক্রিয় করতে পারেন:

বিকাশ> পরীক্ষামূলক বৈশিষ্ট্য> গাark় মোড CSS সমর্থন

তারপরে আপনি যদি পরীক্ষা পৃষ্ঠাটি খুলেন এবং উপাদান পরিদর্শকটি খুলেন তবে ডার্ক / লাইট মোড টগল করার জন্য আপনার কাছে একটি নতুন আইকন রয়েছে।

-

সম্পাদনা (11 ফেব্রুয়ারী 2019): নতুন সাফারি 12.1 ডার্ক মোডে অ্যাপল জাহাজগুলি

-

সম্পাদনা (5 সেপ্টেম্বর 2019): বর্তমানে বিশ্বের 25% ডার্ক মোড সিএসএস ব্যবহার করতে পারে। সূত্র: caniuse.com

আগত ব্রাউজারগুলি:

• আইওএস 13 (আমি ধারণা করি এটি অ্যাপলের কীনোটের পরের সপ্তাহে পাঠানো হবে)
• এজ এইচটিএমএল (76 (কখন প্রেরণ করা হবে তা নিশ্চিত নয়)

-

সম্পাদনা (5 নভেম্বর 2019): বর্তমানে বিশ্বের 74% ডার্ক মোড সিএসএস ব্যবহার করতে পারে। সূত্র: caniuse.com

-

সম্পাদনা (3 ফেব্রুয়ারী 2020): মাইক্রোসফ্ট এজ 79 ডার্ক মোড সমর্থন করে। (2020 সালের 15 জানুয়ারিতে মুক্তি পেয়েছে)

-

আমার পরামর্শটি হ'ল: আপনার অন্ধকার মোড বাস্তবায়নের বিষয়টি বিবেচনা করা উচিত কারণ বেশিরভাগ ব্যবহারকারী এখনই এটি ব্যবহার করতে পারবেন (বিশেষত মোবাইল ওরফে ব্যাটারি সাশ্রয়ের জন্য)।

দ্রষ্টব্য: সমস্ত বড় ব্রাউজারগুলি এখন ডার্ক মোড সমর্থন করছে, বাদে: আইই, এজ

Comments

শুধু এটি পরীক্ষা করা। আপনি যদি আপনার ম্যাক ওএস সেটিংসে থিমটি পরিবর্তন করেন তবে আপনাকে ব্রাউজারটি পুনরায় চালু করতে হবে। খুব খারাপ এটি ফ্লাইতে সিঙ্ক হয় না।

— হারমান স্টারিকভ

@ হারমানস্টারিকভ এই বিবরণটির বিষয়ে আমি একটি আপডেট পোস্ট করেছি। নতুন সাফারি প্রযুক্তি পূর্বরূপ 71 রিলিজের সাথে আপনি রিয়েলটাইমে টগল করতে পারবেন।

— ডেভি ডি ভ্রিজ

নিস! বুটস্ট্র্যাপের মাধ্যমে তাদের দেখতে কেমন হবে সে সম্পর্কে আমি একটি সামান্য ডেমো তৈরি করেছি: twitter.com/Hermanhasawish/status/1071517994302562305

— হারমান স্টারিকভ

জাভাস্ক্রিপ্ট এ সনাক্ত করার কোন উপায় আছে?

— আকাশ কাভা

@ আকাশকাবা আমি প্রায় গুগল হয়েছি, হ্যাঁ আপনি যদি এরকম কিছু ব্যবহার করেন তবে এটি সম্ভব: 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

ওহে! এটি দুর্দান্ত কাজ করে। আমি যদিও কৌতূহলী - এই সিনট্যাক্সটি ঠিক কীভাবে কাজ করে?

— ঝড় উঠেছে

@ স্টটারম্বেলেসড এটি প্রথমে ব্রাউজারটি সমর্থন করে কিনা তা যাচাই করবে matchMediaএবং তারপরে এটি prefers-color-scheme: darkস্ট্রিংটির সাথে মেলে চেষ্টা করবে । যদি এটি মেলে তবে আমরা অন্ধকার মোডে আছি।

— মার্ক সাজাবো

নতুন এলভিস অপারেটরের সাথে এটি লিখিত হতে পারেif (window.matchMedia?('(prefers-color-scheme: dark)').matches) { }

— মার্ক সাজাবো

ওহ যে বোধগম্য হয়! । ম্যাচগুলির সাথে সিনট্যাক্সটি দেখে মনে হয়েছিল এটি প্রথম জিনিস এবং দ্বিতীয় বা কোনও কিছুর মধ্যে তুলনা করছে doing ধন্যবাদ!

— 28:12

চেক করা উত্তর হওয়া উচিত।

— পোদ্দর্পসন

Answer 3

এটি বর্তমানে (সেপ্টেম্বর 2018) "সিএসএস ওয়ার্কিং গ্রুপের সম্পাদক খসড়া" তে আলোচনা হচ্ছে । স্পেক চালু করেছে (উপরে দেখুন), মিডিয়া ক্যোয়ারী হিসাবে উপলব্ধ। ইতিমধ্যে কিছু সাফারিটিতে অবতরণ করেছে, এখানেও দেখুন । সুতরাং তাত্ত্বিকভাবে আপনি সাফারি / ওয়েবকিট এ এটি করতে পারেন:

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

তবে মনে হয় এটি ব্যক্তিগত । MDN উপর একটি CSS মিডিয়া বৈশিষ্ট্য inverted-colorsহয় উল্লিখিত । প্লাগ: আমি এখানে ডার্ক মোড সম্পর্কে ব্লগ করেছি ।

Answer 4

মজিলা এপিআই হওয়া সত্ত্বেও আমি অনুসন্ধান করেছি, তাদের ব্রাউজার-উইন্ডোজ রঙের সাথে কোনও ভেরিয়েবল আছে বলে মনে হয় না। যদিও আমি এমন একটি পৃষ্ঠা পেয়েছি যা আপনাকে সহায়তা করতে পারে: CSS এ অপারেটিং সিস্টেম স্টাইলগুলি কীভাবে ব্যবহার করবেন । আর্টিকেল-শিরোনাম সত্ত্বেও ক্রোম এবং ফায়ারফক্সের জন্য রঙগুলি আলাদা।

Comments

এটি এখন সেখানে রয়েছে - developer.mozilla.org/en-US/docs/Web/CSS/@media/…

— siwalikm

Answer 5

মজিলার মতে, সেপ্টেম্বর 2019 হিসাবে এখানে পছন্দসই পদ্ধতি

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