Mobile App Development Dark Mode এবং Light Mode এর জন্য Styling কৌশল গাইড ও নোট

Ionic অ্যাপে Dark Mode এবং Light Mode স্টাইলিং সাপোর্ট করার জন্য CSS কাস্টমাইজেশন এবং কিছু কৌশল ব্যবহার করা যায়, যাতে ব্যবহারকারীরা তাদের পছন্দের মোডে অ্যাপটি ব্যবহার করতে পারে। বর্তমানে, বেশিরভাগ আধুনিক অ্যাপ এবং ওয়েবসাইট ডার্ক মোড এবং লাইট মোডের সাপোর্ট দেয় এবং Ionic ফ্রেমওয়ার্কও এই সুবিধা প্রদান করে।

এখানে Ionic অ্যাপে Dark Mode এবং Light Mode কিভাবে প্রয়োগ করবেন তার বিস্তারিত কৌশল তুলে ধরা হয়েছে।

১. CSS Variables এর মাধ্যমে Dark Mode এবং Light Mode Styling

Ionic অ্যাপ্লিকেশনে CSS Variables ব্যবহার করে সহজেই ডার্ক মোড এবং লাইট মোডের স্টাইলিং কনফিগার করা যায়। Ionic 5+ এর মধ্যে এটি একটি বিল্ট-ইন ফিচার হিসাবে এসেছে।

১.১ Global CSS Variables সেটআপ

Ionic এর global.scss বা variables.scss ফাইলে আপনি গ্লোবাল স্টাইলিং সেট করতে পারেন। এখানে ডার্ক মোড এবং লাইট মোডের জন্য আলাদা আলাদা ভ্যারিয়েবল ডিফাইন করা হয়।

/* variables.scss */

/* Light mode styles */
:root {
  --ion-background-color: #ffffff;
  --ion-text-color: #000000;
  --ion-toolbar-background: #f8f8f8;
  --ion-button-background: #3880ff;
  --ion-button-color: white;
}

/* Dark mode styles */
[aria-selected='true'] {
  --ion-background-color: #1e1e1e;
  --ion-text-color: #ffffff;
  --ion-toolbar-background: #333333;
  --ion-button-background: #bb86fc;
  --ion-button-color: white;
}

• Light mode: লাইট মোডের জন্য স্টাইল সেট করা হয়েছে, যেখানে ব্যাকগ্রাউন্ড সাদা এবং টেক্সট কালো।
• Dark mode: ডার্ক মোডের জন্য স্টাইল সেট করা হয়েছে, যেখানে ব্যাকগ্রাউন্ড কালো এবং টেক্সট সাদা।

২. User Preference অনুযায়ী Theme Detection

Ionic অ্যাপে Media Queries ব্যবহার করে ব্যবহারকারীর ডিভাইসের ডিফল্ট থিম (ডার্ক বা লাইট) সনাক্ত করা সম্ভব। এটি CSS এর মাধ্যমে সহজেই করা যায়।

২.১ Media Query দিয়ে Theme Detect করা

/* global.scss */

/* Default theme for light mode */
:root {
  --ion-background-color: #ffffff;
  --ion-text-color: #000000;
  --ion-toolbar-background: #f8f8f8;
  --ion-button-background: #3880ff;
  --ion-button-color: white;
}

/* Dark mode styles using media query */
@media (prefers-color-scheme: dark) {
  :root {
    --ion-background-color: #1e1e1e;
    --ion-text-color: #ffffff;
    --ion-toolbar-background: #333333;
    --ion-button-background: #bb86fc;
    --ion-button-color: white;
  }
}

এখানে:

• @media (prefers-color-scheme: dark): এটি ডিভাইসের ডিফল্ট থিম (ডার্ক বা লাইট) সনাক্ত করে এবং অটো-অ্যাপ্লাই করে।

এভাবে ব্যবহারকারী ডিভাইসের সেটিংস অনুযায়ী অ্যাপের থিম পরিবর্তন হবে।

৩. Theme Toggle Button তৈরি করা

আপনি চাইলে ব্যবহারকারীর পছন্দ অনুযায়ী থিম পরিবর্তন করার জন্য একটি toggle button তৈরি করতে পারেন, যা লাইট এবং ডার্ক মোডের মধ্যে সুইচ করবে।

৩.১ Theme Toggle Button সেটআপ

প্রথমে, home.page.html এ একটি টগল বাটন তৈরি করুন:

<ion-header>
  <ion-toolbar>
    <ion-title>Dark/Light Mode Toggle</ion-title>
    <ion-buttons slot="end">
      <ion-toggle [(ngModel)]="isDarkMode" (ionChange)="toggleTheme()"></ion-toggle>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div>
    <h2>Welcome to Dark/Light Mode App</h2>
  </div>
</ion-content>

এখানে একটি ion-toggle ব্যবহার করা হয়েছে যা ব্যবহারকারীর পছন্দ অনুযায়ী থিম পরিবর্তন করবে।

৩.২ Toggle Functionality

home.page.ts ফাইলে টগল ফাংশন যোগ করুন যা থিম পরিবর্তন করবে:

import { Component } from '@angular/core';
import { IonToggle } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  isDarkMode: boolean = false;

  constructor() {}

  toggleTheme() {
    this.isDarkMode
      ? document.body.setAttribute('class', 'dark')
      : document.body.removeAttribute('class');
  }
}

এখানে:

• isDarkMode: এটি true বা false হবে, যা টগল বাটনের অবস্থার উপর ভিত্তি করে থিম স্যুইচ করবে।
• document.body.setAttribute('class', 'dark'): এটি ডার্ক মোডে চলে যাবে এবং 'dark' ক্লাস যোগ করবে।
• document.body.removeAttribute('class'): এটি লাইট মোডে ফিরে যাবে এবং ক্লাসটি রিমুভ করবে।

৩.৩ CSS এর মাধ্যমে থিম স্যুইচিং

আপনি CSS বা SCSS ফাইলের মাধ্যমে লাইট এবং ডার্ক মোডের জন্য আলাদা স্টাইল অ্যাপ্লাই করতে পারেন।

/* global.scss */

/* Light mode */
:root {
  --ion-background-color: #ffffff;
  --ion-text-color: #000000;
}

/* Dark mode */
body.dark {
  --ion-background-color: #1e1e1e;
  --ion-text-color: #ffffff;
}

এখানে, body.dark ক্লাসটি যখন অ্যাপ্লাই হবে তখন ডার্ক মোড স্টাইলস চালু হবে।

৪. Dark Mode এবং Light Mode এর জন্য অন্যান্য Styling

ডার্ক মোড এবং লাইট মোডের জন্য আপনি বিভিন্ন স্টাইলিং কৌশল ব্যবহার করতে পারেন, যেমন:

• Button Colors: ডার্ক মোডে বাটনগুলির জন্য আলাদা কালার প্যালেট ব্যবহার করা।
• Typography: টেক্সটের কালার এবং ফন্ট সাইজ কাস্টমাইজ করা।
• Images: সিস্টেমের থিম অনুযায়ী স্যুইচিং করার জন্য আলাদা ইমেজ ব্যবহার করা।

৪.১ Button Color Example

/* Light Mode Button */
:root {
  --ion-button-background: #3880ff;
  --ion-button-color: white;
}

/* Dark Mode Button */
body.dark {
  --ion-button-background: #bb86fc;
  --ion-button-color: white;
}

সারাংশ

• Dark Mode এবং Light Mode স্টাইলিং করা Ionic অ্যাপে সহজ এবং কার্যকরী। আপনি CSS variables এবং prefers-color-scheme media query ব্যবহার করে অটো থিম পরিবর্তন করতে পারেন।
• Theme Toggle ব্যবহারকারীর পছন্দ অনুযায়ী থিম স্যুইচ করার জন্য উপকারী। আপনি Toggle Button তৈরি করে ব্যবহারকারীর থিম পরিবর্তন করতে সক্ষম হবেন।
• CSS Variables ব্যবহার করে অ্যাপের ব্যাকগ্রাউন্ড, টেক্সট, বাটন কালার ইত্যাদি কাস্টমাইজ করা যায়।

এই কৌশলগুলো ব্যবহার করে আপনি আপনার Ionic অ্যাপকে আধুনিক, ব্যবহারকারী বান্ধব এবং থিম-ভিত্তিক অ্যাপ্লিকেশন বানাতে পারবেন।