Theme

UnoCSS unterstützt auch das Theme-System, das Sie möglicherweise aus Tailwind CSS / Windi CSS kennen. Auf Benutzerebene können Sie die theme Eigenschaft in Ihrer Konfiguration angeben, und sie wird tief mit dem Standard-Theme zusammengeführt.

Verwendung

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

Während des Parsing-Prozesses wird theme immer im context vorhanden sein.

Verwendung in rules

Um das Theme in Regeln zu verwenden:

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

Verwendung in variants

Um das Theme in Varianten zu verwenden:

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

Verwendung in shortcuts

Um das Theme in dynamischen Shortcuts zu verwenden:

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

Breakpoints

WARNING

Wenn ein benutzerdefiniertes breakpoints Objekt bereitgestellt wird, wird das Standard-Objekt überschrieben anstatt zusammengeführt.

Mit dem folgenden Beispiel können Sie nur die sm: und md: Breakpoint-Varianten verwenden:

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

Wenn Sie die original Theme-Breakpoints erben möchten, können Sie extendTheme verwenden:

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

INFO

verticalBreakpoints ist dasselbe wie breakpoints, aber für vertikales Layout.

Zusätzlich sortieren wir Bildschirmpunkte nach Größe (gleiche Einheit). Für Bildschirmpunkte in verschiedenen Einheiten, um Fehler zu vermeiden, verwenden Sie bitte einheitliche Einheiten in der Konfiguration.

theme: {
  // ...
  breakpoints: {
    sm: '320px',
    // Da uno keinen Vergleichssortierung von verschiedenen Einheitsgrößen unterstützt, konvertieren Sie bitte zur gleichen Einheit.
    // md: '40rem',
    md: `${40 * 16}px`,
    lg: '960px',
  },
}

ExtendTheme

ExtendTheme ermöglicht es Ihnen, das tief zusammengeführte Theme zu bearbeiten, um das vollständige Theme-Objekt zu erhalten.

Benutzerdefinierte Funktionen mutieren das Theme-Objekt.

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

Es ist auch möglich, ein neues Theme-Objekt zurückzugeben, um das Original vollständig zu ersetzen.

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