থিম

আপনি কী তৈরি করবেন

একটি অ্যাপ যার পুরো চেহারা ব্যবহারকারী বদলাতে পারেন — একটি লিংক করা স্টাইলশিট দিয়ে শুরু করে, স্থায়ী চলার-সময়ের থিম বদলকারীতে শেষ — প্রায় ১৫ মিনিটে।

শুরু করার আগে

আগে সম্পন্ন করুন ফ্রেমওয়ার্ক টিউটোরিয়াল আপনার স্ট্যাকের জন্য আগে, যাতে থিম দেওয়ার জন্য আপনার একটি ছোট Lily ফর্ম থাকে। এখানকার সবকিছু সাতটি ফ্রেমওয়ার্কেই কাজ করে; কোড নমুনা Svelte ও সাধারণ HTML দেখায়।

ধাপ ১ — একটি তৈরি থিম লিংক করুন

themes/ ডিরেক্টরিতে ৪৫টি স্বতন্ত্র স্টাইলশিট আছে। সেগুলো আপনার অ্যাপের স্থির সম্পদে কপি করুন আর একটি লিংক করুন:

<link rel="stylesheet" href="/assets/themes/united-kingdom-national-health-service-england-for-patients.css" />

সেটের উল্লেখযোগ্য অংশ:

• সরকারি খাত — NHS England / Scotland / Wales, প্রতিটি রোগীমুখী ও চিকিৎসকমুখী রূপে; GOV.UK (united-kingdom-government-digital-service); USWDS (united-states-web-design-system).
• বিক্রেতা-অনুপ্রাণিত — adobe-spectrum, mozilla-protocol.
• সাধারণ উদ্দেশ্য — light, dark, nord, dracula, wireframe, corporate, synthwave, এবং আরও অনেক।

ধাপ ২ — যেকোনো কিছু ওভাররাইড করুন

থিম নির্বাচকগুলো মোড়ানো আছে :where(...)যার নির্দিষ্টতা শূন্য — তাই আপনার লেখা যেকোনো নিয়ম জেতে, সহজভাবে:

/* After the theme link: your brand button, everything else themed */
.button {
  background: #7c3aed;
  border-radius: 9999px;
}

ধাপ ৩ — theme-picker দিয়ে চলার সময় বদল

theme-picker সহায়ক একটি হেডলেস আইকন-বোতাম + লিস্টবক্স যা থিমের পুরো জীবনচক্রের মালিক: একটি পরিচালিত <link> বদলে নির্বাচিত স্টাইলশিট লোড করে (কেবল সক্রিয় থিমই আনা হয়), নথিতে data-theme="{slug}" সেট করে, এবং ঐচ্ছিকভাবে এখানে ধরে রাখে localStorage। এখানে Svelte দেখানো হয়েছে; React, Vue, Angular, HTML, Nunjucks ও Blazor পোর্ট চুক্তি ধরে ধরে মেলে:

<script>
  import ThemePicker from "@lilydesignsystem/svelte-theme-picker";
</script>

<ThemePicker
  label="Theme"
  themesUrl="/assets/themes/"
  themes={["light", "dark", "nord", "wireframe"]}
  storageKey="my-app-theme"
/>

সম্পূর্ণ একীকরণ এটুকুই। কিবোর্ড আচরণ WAI-ARIA APG লিস্টবক্স প্যাটার্ন অনুসরণ করে; নিয়ন্ত্রণ নিজে হেডলেস (ক্লাস হুক .theme-picker), তাই যে থিমই সক্রিয় থাকুক তা তুলে নেয়।

ধাপ ৪ — আপনার নিজের CSS-এ থিমে সাড়া দিন

যেহেতু সহায়ক নথির মূলে data-theme সেট করে, আপনার নিজের স্টাইল তার ওপর শাখা করতে পারে:

[data-theme="dark"] .site-logo { filter: invert(1); }

সার্ভার রেন্ডারিংয়ের জন্য টীকা

সহায়ক সব DOM লেখা ফ্রেমওয়ার্কের mount/effect জীবনচক্রের ভেতরে করে, তাই গঠনগতভাবে SSR-নিরাপদ। প্রথম আঁকায় ঝিলিক এড়াতে, সার্ভারে প্রাথমিক থিমের <link> ও data-theme রেন্ডার করুন (উদাহরণস্বরূপ কুকি থেকে) — Svelte সহায়ক রিপো একটি চালানো যায় এমন SvelteKit কুকি উদাহরণ সঙ্গে আনে, আর অন্য ক্যাটালগ নিজেদের স্ট্যাকের জন্য একই প্যাটার্ন নথিভুক্ত করে।

পরবর্তী ধাপ

• পছন্দ সহায়ক — ভাষা, লেখার আকার, শেয়ারিং ও তারিখ/সময় ইনপুটের জন্য একই প্যাটার্ন।
• একটি থিম অবদান রাখুন — প্রতিটি একটি স্বতন্ত্র স্টাইলশিট যা ক্লাস হুক লক্ষ্য করে; দেখুন অবদান.

পথে প্রশ্ন আছে? সহায়তা পাতা উত্তরে ভরা — আর কোনো ধাপ আরও পরিষ্কার হতে পারলে, আমাদের জানান আর আমরা খুশি মনে টিউটোরিয়াল উন্নত করব।