CSS-Variablen

Nuxt UI verwendet CSS-Variablen als Design-Token für flexibles, konsistentes Theming mit eingebauter Unterstützung für den hellen und dunklen Modus.

@@ph000@@gmail.com

Nuxt UI bietet Tailwind CSS Utility Classes für jede semantic color, die Sie definieren, so dass Sie Klassennamen wie text-error oder bg-success verwenden können:

Bearbeiten@ph007 @ Bearbeiten@@ph008 Erfolg@ph009 Info@ph010 Warnung@@ph011 Fehler@@ph012

Jede Utility-Class verwendet eine CSS-Variable, um ihre Farbe für den hellen und dunklen Modus festzulegen:

:root {
  --ui-primary: var(--ui-color-primary-500);
  --ui-secondary: var(--ui-color-secondary-500);
  --ui-success: var(--ui-color-success-500);
  --ui-info: var(--ui-color-info-500);
  --ui-warning: var(--ui-color-warning-500);
  --ui-error: var(--ui-color-error-500);
}

.dark {
  --ui-primary: var(--ui-color-primary-400);
  --ui-secondary: var(--ui-color-secondary-400);
  --ui-success: var(--ui-color-success-400);
  --ui-info: var(--ui-color-info-400);
  --ui-warning: var(--ui-color-warning-400);
  --ui-error: var(--ui-color-error-400);
}

Sie können einstellen, welche Schattierung jede Dienstprogrammklasse für den Hell-und Dunkelmodus in Ihrer main.css-Datei verwendet:

app/assets/css/main.css

@import "tailwindcss";
@import "@nuxt/ui";

:root {
  --ui-primary: var(--ui-color-primary-700);
}

.dark {
  --ui-primary: var(--ui-color-primary-200);
}

Sie können primary: 'black' in Ihrem verwenden, da black keine mehrfachen Schattierungen hat.

app/assets/css/main.css

@import "tailwindcss";
@import "@nuxt/ui";

:root {
  --ui-primary: black;
}

.dark {
  --ui-primary: white;
}

@@ph077@@text @@ Übersetzung

Nuxt UI bietet Tailwind CSS Utility Classes für Textfarben, so dass Sie Klassennamen wie text-dimmed oder text-muted verwenden können:

Bearbeiten@ph080 Bearbeiten@ph081 Bearbeiten@@ph082 Text@@ph083 @ HervorhebungBearbeiten@@ph085

Jede Utility-Klasse verwendet eine CSS-Variable, um ihre Farbe für den hellen und dunklen Modus festzulegen:

:root {
  --ui-text-dimmed: var(--ui-color-neutral-400);
  --ui-text-muted: var(--ui-color-neutral-500);
  --ui-text-toned: var(--ui-color-neutral-600);
  --ui-text: var(--ui-color-neutral-700);
  --ui-text-highlighted: var(--ui-color-neutral-900);
  --ui-text-inverted: white;
}

.dark {
  --ui-text-dimmed: var(--ui-color-neutral-500);
  --ui-text-muted: var(--ui-color-neutral-400);
  --ui-text-toned: var(--ui-color-neutral-300);
  --ui-text: var(--ui-color-neutral-200);
  --ui-text-highlighted: white;
  --ui-text-inverted: var(--ui-color-neutral-900);
}

Sie können diese CSS-Variablen in Ihrer main.css Datei anpassen:

app/assets/css/main.css

@import "tailwindcss";
@import "@nuxt/ui";

:root {
  --ui-text: var(--ui-color-neutral-900);
}

.dark {
  --ui-text: white;
}

Um mehrere dieser Variablen gleichzeitig zu ändern, weisen Sie stattdessen in Ihrer Konfiguration eine andere Farbe zu.

@@134 @ Hintergrund

Nuxt UI bietet Tailwind CSS Utility Classes für Hintergrundfarben, so dass Sie Klassennamen wie bg-default oder bg-muted verwenden können:

VoreinstellungBearbeiten@ph138 HochgestelltHervorhebungBearbeiten

Jede Utility-Klasse verwendet eine CSS-Variable, um ihre Farbe für den hellen und dunklen Modus festzulegen:

:root {
  --ui-bg: white;
  --ui-bg-muted: var(--ui-color-neutral-50);
  --ui-bg-elevated: var(--ui-color-neutral-100);
  --ui-bg-accented: var(--ui-color-neutral-200);
  --ui-bg-inverted: var(--ui-color-neutral-900);
}

.dark {
  --ui-bg: var(--ui-color-neutral-900);
  --ui-bg-muted: var(--ui-color-neutral-800);
  --ui-bg-elevated: var(--ui-color-neutral-800);
  --ui-bg-accented: var(--ui-color-neutral-700);
  --ui-bg-inverted: white;
}

Sie können diese CSS-Variablen in Ihrer main.css-Datei anpassen:

app/assets/css/main.css

@import "tailwindcss";
@import "@nuxt/ui";

:root {
  --ui-bg: var(--ui-color-neutral-50);
}

.dark {
  --ui-bg: var(--ui-color-neutral-950);
}

@@182@bmdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdbdb

Nuxt UI bietet Tailwind CSS Utility Classes für Rahmenfarben, so dass Sie Klassennamen wie border-default oder border-muted verwenden können:

VoreinstellungBearbeitenHervorhebungBearbeiten

Jede Utility-Klasse verwendet eine CSS-Variable, um ihre Farbe für den hellen und dunklen Modus festzulegen:

:root {
  --ui-border: var(--ui-color-neutral-200);
  --ui-border-muted: var(--ui-color-neutral-200);
  --ui-border-accented: var(--ui-color-neutral-300);
  --ui-border-inverted: var(--ui-color-neutral-900);
}

.dark {
  --ui-border: var(--ui-color-neutral-800);
  --ui-border-muted: var(--ui-color-neutral-700);
  --ui-border-accented: var(--ui-color-neutral-700);
  --ui-border-inverted: white;
}

Sie können diese CSS-Variablen in Ihrer main.css-Datei anpassen:

app/assets/css/main.css

@import "tailwindcss";
@import "@nuxt/ui";

:root {
  --ui-border: var(--ui-color-neutral-100);
}

.dark {
  --ui-border: var(--ui-color-neutral-900);
}

Fokus: badge{label="4.9+" class="align-text-top"}

Nuxt UI wendet auf jedes interaktive Element eine focus-visible-Gliederung an, die mit der color-Prop der Komponente eingefärbt ist, z. B.outline-primary/25 when color="primary" oder outline-inverted/25 when color="neutral".

Wenn Sie eine einzelne Umrissfarbe für Ihre gesamte App unabhängig von der Komponentenfarbe bevorzugen, können Sie eine globale Regel in Ihrer main.cssDatei hinzufügen:

@import "tailwindcss";
@import "@nuxt/ui";

*,
::before,
::after {
  @apply outline-primary/25;
}

*:focus-visible,
*:has(> a:focus-visible) {
  --tw-ring-color: var(--ui-primary);
}

@import "tailwindcss";
@import "@nuxt/ui";

*,
::before,
::after {
  @apply outline-inverted/25;
}

*:focus-visible,
*:has(> a:focus-visible) {
  --tw-ring-color: var(--ui-border-inverted);
}

Die erste Regel färbt die Fokuskontur jeder Komponente, die zweite richtet die Ringfarbe aus, die auf den Fokus von Varianten mit einem sichtbaren Rahmen wie outline oder subtle angewendet wird, einschließlich Karten, die hervorheben, wenn ihre Verbindung fokussiert ist.

Stellen Sie sicher, dass Sie diese Regeln außerhalb von @layer deklarieren, damit sie Vorrang vor den Farben haben, die von den Komponententhemen festgelegt werden. Denken Sie daran, dass die erste Regel auch die native Fokuskontur Ihrer eigenen Elemente einfärbt,border auf Fokus wie FileUpload oder ContentSurround Folgen Sie der Komponente color.

@@@@@@@@@@@@@@@@@@ph278@@@@radius

Nuxt UI überschreibt Tailwind CSS Standard rounded-* utilities mit einem einheitlichen Grenzradius-System, so dass Sie reguläre border radius utilities wie rounded-xs oder rounded-2xl:

xs@@@@@@@@@@@@@@286 sm@@@@@@@@@@@@@@@@@@287 md@@@@@@@@@@@@@@288 lg@@@@@@@@@@@@@289 xl@@@@@@@@290 2xl@@@@@@@@291 3xl@@@@@@@@@@@@@@292

Diese Utility-Klassen werden auf Basis einer globalen --ui-radius CSS-Variablen berechnet, die den Basisradiuswert definiert, der für ein konsistentes Erscheinungsbild auf alle Komponenten angewendet wird.

:root {
  --ui-radius: 0.25rem;
}

Jeder Nutzen multipliziert diesen Basiswert mit:

@theme {
  --radius-xs: calc(var(--ui-radius) * 0.5);
  --radius-sm: var(--ui-radius);
  --radius-md: calc(var(--ui-radius) * 1.5);
  --radius-lg: calc(var(--ui-radius) * 2);
  --radius-xl: calc(var(--ui-radius) * 3);
  --radius-2xl: calc(var(--ui-radius) * 4);
  --radius-3xl: calc(var(--ui-radius) * 6);
}

Sie können den Basisradiuswert in Ihrer main.css Datei anpassen:

app/assets/css/main.css

@import "tailwindcss";
@import "@nuxt/ui";

:root {
  --ui-radius: 0.5rem;
}

Die Änderung von --ui-radius betrifft auch die Klassen rounded-xs zu rounded-3xl auf Ihrem eigenen Markup und Drittanbieterkomponenten, nicht nur Nuxt-UI-Komponenten.

Versuchen Sie das: prose-icon {name="i-lucide-palette" class="text-primary"} theme-Menü in der Kopfzeile oben, um den Basisradiuswert zu ändern.

@@334@Einweg-Container

Nuxt UI stellt eine --ui-container CSS-Variable zur Verfügung, die die maximale Breite der Komponente Container steuert.

:root {
  --ui-container: 80rem; /* var(--container-7xl) */
}

Sie können diesen Wert in Ihrer main.css-Datei anpassen, um die Containerbreiten in Ihrer gesamten Anwendung einheitlich anzupassen:

app/assets/css/main.css

@import "tailwindcss";
@import "@nuxt/ui";

@theme {
  --container-8xl: 90rem;
}

:root {
  --ui-container: var(--container-8xl);
}

@@358@gmail.de

Nuxt UI stellt eine --ui-header-height CSS-Variable zur Verfügung, die die Höhe der Komponente Header steuert.

:root {
  --ui-header-height: 4rem;
}

Sie können diesen Wert in Ihrem main.css anpassen, um die Kopfhöhe in Ihrer gesamten Anwendung konsistent anzupassen:

app/assets/css/main.css

@import "tailwindcss";
@import "@nuxt/ui";

:root {
  --ui-header-height: --spacing(24);
}

@@@@@@@378@@bmdbdbdbdbdbd.de

Nuxt UI wendet Standardklassen auf das <body> Element Ihrer App an, um eine konsistente Thematisierung über den hellen und dunklen Modus hinweg zu ermöglichen:

body {
  @apply antialiased text-default bg-default scheme-light dark:scheme-dark;
}

Design System

Nuxt UI's design system uses Tailwind CSS for simple theming and easy customization.

Components

Learn how to customize Nuxt UI components with the Tailwind Variants API for advanced, flexible, and maintainable styling.