Custom Theme এবং CSS কাস্টমাইজেশন

Polymer ফ্রেমওয়ার্ক ব্যবহার করে Custom Theme এবং CSS কাস্টমাইজেশন খুবই গুরুত্বপূর্ণ একটি বিষয়, যা আপনার কাস্টম উপাদানগুলির আউটলুক এবং অনুভূতি পরিবর্তন করতে সহায়তা করে। Polymer আপনাকে Shadow DOM ব্যবহার করতে দেয়, যার মাধ্যমে আপনি স্টাইলিং নির্ধারণ করতে পারবেন যা কেবল নির্দিষ্ট উপাদানেই প্রযোজ্য হবে, এবং বাইরের DOM এর স্টাইলিংয়ের উপর প্রভাব ফেলবে না।

1. Custom Theme তৈরি করা

Polymer ফ্রেমওয়ার্কে কাস্টম থিম তৈরি করতে, আপনি সাধারণত theme এবং var (CSS variables) ব্যবহার করবেন। এতে আপনি আপনার কাস্টম উপাদানগুলির জন্য থিম সেট করতে পারেন এবং যেকোনো উপাদানে থিম কাস্টমাইজ করতে পারেন।

CSS Variables এবং Theme:

Polymer থিম কাস্টমাইজেশন CSS ভেরিয়েবল (variables) ব্যবহার করে সহজে করা যায়। আপনি আপনার কাস্টম উপাদানগুলিতে CSS ভেরিয়েবল সংজ্ঞায়িত করে, তারপর সেই ভেরিয়েবলগুলিকে বাইরের উপাদান বা থিম সেটিংস থেকে কাস্টমাইজ করতে পারেন।

একটি কাস্টম থিম উদাহরণ:

ধরা যাক, একটি কাস্টম বাটন উপাদান তৈরি করছি, যার থিম পরিবর্তনযোগ্য হবে।

<dom-module id="custom-button">
  <template>
    <style>
      :host {
        --button-background-color: #007bff; /* Default background color */
        --button-text-color: white; /* Default text color */
      }

      button {
        background-color: var(--button-background-color);
        color: var(--button-text-color);
        padding: 10px;
        border: none;
        cursor: pointer;
      }

      button:hover {
        background-color: darken(var(--button-background-color), 10%);
      }
    </style>
    <button>{{buttonLabel}}</button>
  </template>
  <script>
    Polymer({
      is: 'custom-button',
      properties: {
        buttonLabel: {
          type: String,
          value: 'Click Me'
        }
      }
    });
  </script>
</dom-module>

ব্যাখ্যা:

1. CSS Variables (--button-background-color, --button-text-color): এই ভেরিয়েবলগুলি :host সিলেক্টর দিয়ে উপাদানটির শ্যাডো DOM এর বাইরে বাইরে স্টাইল সংজ্ঞায়িত করেছে।
2. var() Function: এটি CSS ভেরিয়েবলকে স্টাইল প্রোপার্টিতে ব্যবহার করতে সাহায্য করে, যেমন background-color: var(--button-background-color)।

এখন আপনি custom-button উপাদানটি যখন ব্যবহার করবেন, তখন আপনি কাস্টম থিম পরিবর্তন করতে পারবেন।

বাইরে থিম কাস্টমাইজ করা:

<custom-button style="--button-background-color: #28a745; --button-text-color: black;"></custom-button>

এখানে, style অ্যাট্রিবিউটের মাধ্যমে, বাটনের ব্যাকগ্রাউন্ড এবং টেক্সট রঙ পরিবর্তন করা হচ্ছে।

2. CSS কাস্টমাইজেশন (Shadow DOM Styling)

Polymer এর শক্তিশালী বৈশিষ্ট্য হলো Shadow DOM ব্যবহার করে উপাদানের ভেতরের স্টাইল আলাদা রাখা। এর মাধ্যমে আপনি উপাদানের স্টাইল কাস্টমাইজ করতে পারবেন যেটি বাইরের DOM এর প্রভাব থেকে মুক্ত থাকবে।

Shadow DOM এ CSS কাস্টমাইজেশন উদাহরণ:

<dom-module id="custom-card">
  <template>
    <style>
      :host {
        display: block;
        width: 300px;
        height: 200px;
        border-radius: 10px;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
        background-color: #f4f4f4;
      }
      
      .card-header {
        font-size: 18px;
        padding: 10px;
        background-color: var(--card-header-bg, #007bff);
        color: var(--card-header-color, white);
      }

      .card-body {
        padding: 15px;
        color: #333;
      }
    </style>
    <div class="card-header">Card Title</div>
    <div class="card-body">This is some content inside the card.</div>
  </template>
  <script>
    Polymer({
      is: 'custom-card'
    });
  </script>
</dom-module>

ব্যাখ্যা:

• এখানে Shadow DOM ব্যবহার করে একটি কাস্টম কার্ড উপাদান তৈরি করা হয়েছে।
• .card-header ক্লাসের স্টাইলিং এবং --card-header-bg ও --card-header-color CSS ভেরিয়েবল ব্যবহার করে, আপনি বাইরের থিম কাস্টমাইজেশন যোগ করতে পারবেন।

বাইরে থিম কাস্টমাইজ করা:

<custom-card style="--card-header-bg: #ff5733; --card-header-color: black;"></custom-card>

এখানে, কাস্টম কার্ডের হেডারের ব্যাকগ্রাউন্ড এবং টেক্সট রঙ বাইরের থেকে পরিবর্তন করা হচ্ছে।

3. Polymer 3.x-এ স্টাইল সিস্টেম

Polymer 3.x সংস্করণে, CSS ভেরিয়েবল এবং থিম কাস্টমাইজেশন একটি উন্নত এবং সহজতর সিস্টেমে রূপান্তরিত হয়েছে। Polymer এর css ফাংশন, ::part এবং ::theme পদ্ধতি ব্যবহার করে থিম কাস্টমাইজেশন আরও শক্তিশালী হয়েছে।

::part এবং ::theme সিলেক্টর ব্যবহার:

Polymer 3.x-এ ::part এবং ::theme সিলেক্টর ব্যবহার করে উপাদানগুলি থিম কাস্টমাইজ করা যায়।

:host {
  --primary-color: #007bff;
}

:host([theme="dark"]) {
  --primary-color: #343a40;
}

button {
  background-color: var(--primary-color);
}

এখানে, theme="dark" অ্যাট্রিবিউট ব্যবহার করে আপনি বাটনের রঙ কাস্টমাইজ করতে পারেন।

Polymer ফ্রেমওয়ার্কের মাধ্যমে Custom Themes এবং CSS কাস্টমাইজেশন করা সহজ এবং সুবিধাজনক। CSS ভেরিয়েবল এবং Shadow DOM ব্যবহার করে আপনি আপনার কাস্টম উপাদানগুলির স্টাইল এবং থিম কাস্টমাইজ করতে পারবেন, যা একটি মডুলার, পুনঃব্যবহারযোগ্য এবং স্কেলেবল ডিজাইন তৈরি করতে সহায়তা করে।