থিম

UnoCSS এমন একটি থিমিং সিস্টেমও সমর্থন করে যার সাথে আপনি Tailwind CSS / Windi CSS-এ পরিচিত হতে পারেন। ব্যবহারকারী স্তরে, আপনি আপনার config-এ theme property নির্দিষ্ট করতে পারেন, এবং এটি ডিফল্ট থিমে deep-merged হবে।

ব্যবহার

theme: {
  // ...
  colors: {
    veryCool: '#0000ff', // class="text-very-cool"
    brand: {
      primary: 'hsl(var(--hue, 217) 78% 51%)', //class="bg-brand-primary"
      DEFAULT: '#942192' //class="bg-brand"
    },
  },
}

TIP

পার্সিং প্রক্রিয়ার সময়, context-এ theme সবসময় থাকবে।

rules-এ ব্যবহার

rules-এ থিম ব্যবহার করতে:

rules: [
  [/^text-(.*)$/, ([, c], { theme }) => {
    if (theme.colors[c])
      return { color: theme.colors[c] }
  }],
]

variants-এ ব্যবহার

variants-এ থিম ব্যবহার করতে:

variants: [
  {
    name: 'variant-name',
    match(matcher, { theme }) {
      // ...
    },
  },
]

shortcuts-এ ব্যবহার

ডাইনামিক shortcuts-এ থিম ব্যবহার করতে:

shortcuts: [
  [/^badge-(.*)$/, ([, c], { theme }) => {
    if (Object.keys(theme.colors).includes(c))
      return `bg-${c}4:10 text-${c}5 rounded`
  }],
]

ব্রেকপয়েন্টস

WARNING

যখন একটি কাস্টম breakpoints object প্রদান করা হয়, ডিফল্ট merged হওয়ার পরিবর্তে override হয়ে যাবে।

নিম্নলিখিত উদাহরণের সাথে, আপনি শুধুমাত্র sm: এবং md: breakpoint variants ব্যবহার করতে সক্ষম হবেন:

theme: {
  // ...
  breakpoints: {
    sm: '320px',
    md: '640px',
  },
}

আপনি যদি original থিম breakpoints inherit করতে চান, আপনি extendTheme ব্যবহার করতে পারেন:

extendTheme: (theme) => {
  return {
    ...theme,
    breakpoints: {
      ...theme.breakpoints,
      sm: '320px',
      md: '640px',
    },
  }
}

INFO

verticalBreakpoints breakpoints-এর মতোই কিন্তু vertical layout-এর জন্য।

এছাড়াও আমরা screen points-কে size অনুযায়ী sort করব (একই unit)। বিভিন্ন units-এ screen points-এর জন্য, ত্রুটি এড়াতে, অনুগ্রহ করে configuration-এ একই units ব্যবহার করুন।

theme: {
  // ...
  breakpoints: {
    sm: '320px',
    // কারণ uno বিভিন্ন unit sizes-এর comparison sorting সমর্থন করে না, অনুগ্রহ করে একই unit-এ রূপান্তর করুন।
    // md: '40rem',
    md: `${40 * 16}px`,
    lg: '960px',
  },
}

ExtendTheme

ExtendTheme আপনাকে deeply merged theme সম্পাদনা করতে দেয় সম্পূর্ণ theme object পেতে।

কাস্টম ফাংশন theme object পরিবর্তন করে।

extendTheme: (theme) => {
  theme.colors.veryCool = '#0000ff' // class="text-very-cool"
  theme.colors.brand = {
    primary: 'hsl(var(--hue, 217) 78% 51%)', // class="bg-brand-primary"
  }
}

মূলটি সম্পূর্ণ প্রতিস্থাপন করতে একটি নতুন theme object রিটার্ন করাও সম্ভব।

extendTheme: (theme) => {
  return {
    ...theme,
    colors: {
      ...theme.colors,
      veryCool: '#0000ff', // class="text-very-cool"
      brand: {
        primary: 'hsl(var(--hue, 217) 78% 51%)', // class="bg-brand-primary"
      },
    },
  }
}