Force Dark Mode সেই সব ওয়েবসাইটে ডার্ক কালার স্কিম প্রয়োগ করে যেগুলোতে ডার্ক মোডের সুবিধা নেই — অথবা কোনো সাইটের ডিফল্ট লাইট থিমকে পরিবর্তন করে। এই টুলটি বুদ্ধিমত্তার সাথে ব্যাকগ্রাউন্ড কালারগুলোকে ডার্ক টোনে ইনভার্ট করে, পঠনযোগ্যতা (readability) বাড়াতে টেক্সট কালার অ্যাডজাস্ট করে এবং ইমেজ, ভিডিও, লোগো ও ব্র্যান্ডের এলিমেন্টগুলোর আসল কালার বজায় রাখে। মাত্র এক ক্লিকেই এটি অন বা অফ করা যায় — কোনো পেজ রিলোড করার প্রয়োজন হয় না।
অনেক ওয়েবসাইটে এখনো ডার্ক মোড অপশন নেই, যার ফলে রাতে কোডিং সেশন বা রিসার্চের সময় ব্যবহারকারীদের উজ্জ্বল সাদা ব্যাকগ্রাউন্ডের দিকে তাকিয়ে থাকতে হয়। ব্রাউজার-লেভেলের ডার্ক মোড (color-scheme-এর মাধ্যমে) কেবল সেই সাইটগুলোতে কাজ করে যেগুলোতে এটি সাপোর্ট দেওয়া আছে। 'Force Dark Mode' প্রতিটি ওয়েবসাইটে কাজ করে — এটি CSS ফিল্টার এবং কাস্টম স্টাইল ওভাররাইড ব্যবহারের মাধ্যমে উজ্জ্বল ব্যাকগ্রাউন্ডকে ডার্ক টোনে রূপান্তর করে এবং একই সাথে ইমেজ কালার ও পঠনযোগ্যতা বজায় রাখে। এই ইনভার্সন প্রক্রিয়াটি বেশ বুদ্ধিদীপ্ত — এটি কেবল ঢালাওভাবে 'filter: invert(1)' প্রয়োগ করে না (যা ইমেজগুলোকে নষ্ট করে এবং টেক্সট অপঠনযোগ্য করে তোলে)। বরং, এটি সুনির্দিষ্টভাবে ব্যাকগ্রাউন্ড কালারকে টার্গেট করে, নতুন ডার্ক ব্যাকগ্রাউন্ডের সাথে টেক্সটের কন্ট্রাস্ট ঠিক রাখে এবং হিউ-রোটেশন (hue-rotation) ব্যবহারের মাধ্যমে সাইটের ব্র্যান্ড কালারগুলো যতটা সম্ভব আসল রাখার চেষ্টা করে। এর ফলে সাইটের ভিজ্যুয়াল আইডেন্টিটি বজায় রেখেই আপনি একটি আরামদায়ক ডার্ক রিডিং এক্সপেরিয়েন্স পাবেন।
এক ক্লিকেই ডার্ক মোড অন বা অফ করুন। কোনো পেজ রিলোড করার প্রয়োজন নেই — CSS ক্লাস টগল করার মাধ্যমে তাৎক্ষণিকভাবে ডার্ক থিম প্রয়োগ করা বা সরিয়ে নেওয়া যায়। এই পরিবর্তনটি কোনো সাদা ফ্ল্যাশ ছাড়াই খুব স্মুথভাবে সম্পন্ন হয়।
পঠনযোগ্যতা ঠিক রাখতে ব্যাকগ্রাউন্ড ডার্ক করা হয় এবং টেক্সট কালার হালকা করা হয়। অ্যালগরিদমটি ঢালাওভাবে পরিবর্তন না করে সুনির্দিষ্টভাবে background-color প্রোপার্টিকে টার্গেট করে, যা সাইটের কালার রিলেশনশিপ এবং ভিজ্যুয়াল হায়ারার্কি বজায় রাখতে সাহায্য করে।
ইমেজ, ভিডিও, SVG এবং ক্যানভাস এলিমেন্টগুলো কালার ইনভার্সন থেকে মুক্ত থাকে। ফটোগুলো স্বাভাবিক দেখায়, লোগোগুলো তাদের ব্র্যান্ড কালার বজায় রাখে এবং ভিডিও কন্টেন্ট স্বাভাবিকভাবেই চলে — কেবল পেজের ব্যাকগ্রাউন্ড এবং টেক্সট কালার পরিবর্তিত হয়।
যেকোনো সাইটের CSS আর্কিটেকচার যাই হোক না কেন, এটি সবখানে কার্যকর। স্ট্যাটিক HTML সাইট, React SPA, WordPress থিম, ওয়েব অ্যাপ বা ডকুমেন্টেশন সাইট — সবখানে এটি কাজ করে। কোনো সাইট-স্পেসিফিক কনফিগারেশনের প্রয়োজন নেই।
ডার্ক ব্যাকগ্রাউন্ডে হালকা টেক্সট স্ক্রিন থেকে নির্গত আলোর পরিমাণ কমিয়ে দেয়, যা দীর্ঘ সময় কাজ করার সময় চোখের ক্লান্তি কমায়। অন্ধকার পরিবেশে বা রাতে কাজ করার জন্য এটি বিশেষ উপকারী।
ডার্ক মোড ততক্ষণই সক্রিয় থাকে যতক্ষণ টুলটি অন থাকে। অন্য পেজে নেভিগেট করলেও এই ইফেক্ট বজায় থাকে। কাজ শেষ হলে অফ করে দিন — সাইটের কোনো ডেটা পরিবর্তিত হয় না বা কোনো প্রেফারেন্স সেভ থাকে না।
রাতে কোডিং করার সময় ডকুমেন্টেশন সাইট, Stack Overflow, MDN বা যেকোনো রেফারেন্স পেজে ডার্ক মোড ব্যবহার করুন। সাইটে ডার্ক থিম ইমপ্লিমেন্ট হওয়ার অপেক্ষায় না থেকে সরাসরি চোখের ক্লান্তি কমিয়ে আনুন।
আপনি যদি সব জায়গায় ডার্ক মোড পছন্দ করেন, তবে এই টুলটি আপনার ওয়ার্কফ্লোর সেই সব সাইটেও ডার্ক থিম প্রয়োগ করবে যেগুলোতে এর নিজস্ব কোনো ডার্ক মোড নেই।
আপনার নিজের সাইটে ডার্ক মোড প্রয়োগ করে দেখুন ইনভার্টেড কালারে এটি কেমন দেখায়। পূর্ণাঙ্গ ডার্ক থিম ইমপ্লিমেন্ট করার আগে এটি আপনাকে একটি প্রাথমিক ধারণা দেবে।
অন্ধকার বা কম আলো থাকা রুমে প্রেজেন্টেশন দিচ্ছেন? স্ক্রিন গ্লেয়ার কমাতে যেকোনো সাইটে ডার্ক মোড ব্যবহার করুন যা প্রজেক্টরের কন্টেন্ট পড়তে সাহায্য করবে।
ডার্ক ব্যাকগ্রাউন্ড উজ্জ্বল সাদা পেজের তুলনায় অনেক কম ব্লু লাইট নির্গত করে, যা রাতে ব্রাউজ করার সময় আপনার ঘুমের ওপর বিরূপ প্রভাব কমাতে সাহায্য করতে পারে।
DevSuite Pro ফ্লোটিং ডক ওপেন করুন এবং Force Dark Mode আইকনে ক্লিক করুন। পেজটি তাৎক্ষণিকভাবে ডার্ক কালার স্কিমে পরিবর্তিত হবে।
স্বাভাবিকভাবেই ওয়েবসাইট ব্রাউজ করা চালিয়ে যান। একই সাইটের অন্য পেজগুলোতে গেলেও ডার্ক মোড সক্রিয় থাকবে।
তাৎক্ষণিকভাবে আসল লাইট থিমে ফিরে আসতে Force Dark Mode আইকনে পুনরায় ক্লিক করুন। কোনো পেজ রিলোড করার প্রয়োজন হবে না।
বিনামূল্যে DevSuite Pro ইনস্টল করুন এবং আপনার ব্রাউজারের জন্য ৩৯+ ডেভলপার টুল আনলক করুন।
