थीम

UnoCSS भी थीमिंग सिस्टम का समर्थन करता है जिससे आप Tailwind CSS / Windi CSS से परिचित हो सकते हैं। उपयोगकर्ता स्तर पर, आप अपने कॉन्फ़िगरेशन में theme प्रॉपर्टी निर्दिष्ट कर सकते हैं, और यह डिफ़ॉल्ट थीम में गहराई से मर्ज हो जाएगा।

उपयोग

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

पार्सिंग प्रक्रिया के दौरान, theme हमेशा context में मौजूद रहेगा।

rules में उपयोग

नियमों में थीम का उपयोग करने के लिए:

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

variants में उपयोग

वेरिएंट्स में थीम का उपयोग करने के लिए:

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

shortcuts में उपयोग

गतिशील शॉर्टकट में थीम का उपयोग करने के लिए:

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

ब्रेकपॉइंट्स

WARNING

जब एक कस्टम breakpoints ऑब्जेक्ट प्रदान किया जाता है तो डिफ़ॉल्ट को ओवरराइड किया जाएगा, मर्ज नहीं किया जाएगा।

निम्नलिखित उदाहरण के साथ, आप केवल sm: और md: ब्रेकपॉइंट वेरिएंट्स का उपयोग कर सकेंगे:

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

यदि आप original थीम ब्रेकपॉइंट्स को विरासत में लेना चाहते हैं, तो आप extendTheme का उपयोग कर सकते हैं:

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

INFO

verticalBreakpoints breakpoints के समान है लेकिन लंबवत लेआउट के लिए।

इसके अलावा हम स्क्रीन बिंदुओं को आकार (समान इकाई) के आधार पर क्रमबद्ध करेंगे। विभिन्न इकाइयों में स्क्रीन बिंदुओं के लिए, त्रुटियों से बचने के लिए, कृपया कॉन्फ़िगरेशन में एकीकृत इकाइयों का उपयोग करें।

theme: {
  // ...
  breakpoints: {
    sm: '320px',
    // Because uno does not support comparison sorting of different unit sizes, please convert to the same unit.
    // md: '40rem',
    md: `${40 * 16}px`,
    lg: '960px',
  },
}

ExtendTheme

ExtendTheme आपको पूर्ण थीम ऑब्जेक्ट प्राप्त करने के लिए गहराई से मर्ज की गई थीम को संपादित करने की अनुमति देता है।

कस्टम फ़ंक्शन थीम ऑब्जेक्ट को बदलते हैं।

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

यह मूल थीम ऑब्जेक्ट को पूरी तरह से बदलने के लिए एक नया थीम ऑब्जेक्ट लौटाना भी संभव है।

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"
      },
    },
  }
}