Framework7 একটি ফিচার-সমৃদ্ধ ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক, যা অ্যাপ্লিকেশনে ডার্ক মোড এবং কাস্টম থিম সাপোর্ট করে। ডার্ক মোড ব্যবহারকারীদের জন্য কম আলোতে পড়া সহজ এবং চোখের উপর কম চাপ সৃষ্টি করে। Framework7 এ থিম কাস্টমাইজেশন এবং ডার্ক মোড ব্যবহারের মাধ্যমে আপনার অ্যাপ্লিকেশনের লুক ও ফিল উন্নত করা যায়।
Dark Mode ব্যবহার Framework7 এ
Framework7 এর ডার্ক মোড ফিচার ব্যবহার করা খুবই সহজ। এটি স্বয়ংক্রিয়ভাবে ডিভাইসের প্রিফারেন্স অনুযায়ী সক্রিয় হতে পারে অথবা ম্যানুয়ালি কনফিগার করা যায়।
ডার্ক মোড সক্রিয় করা
Framework7 এ ডার্ক মোড সক্রিয় করতে আপনাকে theme-dark ক্লাস যুক্ত করতে হবে।
উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dark Mode Example</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/framework7/framework7-bundle.min.css">
</head>
<body class="theme-dark">
<div id="app">
<div class="view view-main">
<div class="page">
<div class="navbar">
<div class="navbar-inner">
<div class="title">Dark Mode</div>
</div>
</div>
<div class="page-content">
<p>This is Dark Mode!</p>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/framework7/framework7-bundle.min.js"></script>
</body>
</html>
উপরের উদাহরণে:
theme-darkক্লাস ব্যবহার করে ডার্ক মোড সক্রিয় করা হয়েছে।- এই ক্লাসটি সরিয়ে নিলে ডিফল্ট লাইট মোড চালু থাকবে।
ডার্ক মোড টগল (Switch)
আপনার অ্যাপ্লিকেশনে ব্যবহারকারীর জন্য ডার্ক মোড টগল করার ব্যবস্থা করতে পারেন। Framework7 এ ডার্ক মোড টগল করার জন্য ক্লাস theme-dark অ্যাড বা রিমুভ করা হয়।
উদাহরণ:
<div class="page">
<div class="navbar">
<div class="navbar-inner">
<div class="title">Dark Mode Toggle</div>
</div>
</div>
<div class="page-content">
<button class="button button-fill" id="toggle-dark-mode">Toggle Dark Mode</button>
</div>
</div>
<script>
var body = document.body;
var toggleButton = document.getElementById('toggle-dark-mode');
toggleButton.addEventListener('click', function () {
body.classList.toggle('theme-dark');
});
</script>
ব্যাখ্যা:
classList.toggle('theme-dark')ব্যবহার করে ক্লাস টগল করা হয়।- ব্যবহারকারী যখন বোতাম ক্লিক করে, তখন ডার্ক মোড অন বা অফ হয়।
Framework7 এর থিমস
Framework7 iOS এবং Android প্ল্যাটফর্মের জন্য আলাদা থিম সাপোর্ট করে। এর মধ্যে রয়েছে:
- iOS থিম: Apple এর iOS ডিভাইসের জন্য।
- Material Design থিম: Android ডিভাইসের জন্য।
স্বয়ংক্রিয় থিম ডিটেকশন
Framework7 ডিফল্টভাবে ডিভাইস প্ল্যাটফর্ম অনুযায়ী থিম নির্ধারণ করে। তবে, আপনি এটি ম্যানুয়ালি সেট করতে পারেন।
থিম ম্যানুয়ালি সেট করা:
var app = new Framework7({
root: '#app',
theme: 'md', // Material Design
});
থিমের অপশন:
ios: iOS থিম।md: Material Design থিম।auto: ডিভাইসের প্ল্যাটফর্ম অনুযায়ী থিম নির্বাচন (ডিফল্ট)।
ডার্ক মোড এবং থিমস একত্রে ব্যবহার
Framework7 এ আপনি থিম এবং ডার্ক মোড একত্রে ব্যবহার করতে পারেন। এটি আপনার অ্যাপ্লিকেশনের লুক এবং ফিল আরও উন্নত করে।
উদাহরণ:
var app = new Framework7({
root: '#app',
theme: 'ios', // iOS থিম
});
document.body.classList.add('theme-dark'); // ডার্ক মোড অ্যাক্টিভ করা
ডার্ক মোডের CSS কাস্টমাইজেশন
Framework7 এর ডার্ক মোড থিম আরও কাস্টমাইজ করতে আপনার নিজের CSS যোগ করতে পারেন।
উদাহরণ:
:root.theme-dark {
--f7-navbar-bg-color: #000000;
--f7-navbar-text-color: #ffffff;
--f7-page-bg-color: #121212;
}
Framework7 এর ডার্ক মোড এবং থিম ব্যবহার অ্যাপ্লিকেশনকে আরও আকর্ষণীয় এবং ব্যবহারকারী-বান্ধব করে তোলে। ডিফল্ট ফিচার ব্যবহার করে সহজেই লাইট এবং ডার্ক মোড টগল করা যায় এবং iOS ও Material Design থিমের মাধ্যমে প্ল্যাটফর্ম অনুযায়ী অ্যাপের লুক কাস্টমাইজ করা সম্ভব।
Read more
