CSS-variabelen

Nuxt UI gebruikt CSS-variabelen als ontwerptokens voor flexibele, consistente thema 's met ingebouwde ondersteuning voor lichte en donkere modus.

Kleuren

Nuxt UI biedt Tailwind CSS utility classes voor elke semantic color u definieert, zodat u klassenamen zoals text-error of bg-success kunt gebruiken:

Primair {class="text-primary text-sm px-4 py-1.5 inline-block"} Secundair {class="text-secondary text-sm px-4 py-1.5 inline-block"} Gelukt {class="text-success text-sm px-4 py-1.5 inline-block"} Info {class="text-info text-sm px-4 py-1.5 inline-block"} Waarschuwing {class="text-warning text-sm px-4 py-1.5 inline-block"} Fout {class="text-error text-sm px-4 py-1.5 inline-block"}

<template>
  <span class="text-primary">Primary</span>
  <span class="text-secondary">Secondary</span>
  <span class="text-success">Success</span>
  <span class="text-info">Info</span>
  <span class="text-warning">Warning</span>
  <span class="text-error">Error</span>
</template>

Elke utility-klasse gebruikt een CSS-variabele om de kleur in te stellen voor lichte en donkere modi:

: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);
}
U kunt aanpassen welke tint elke utility-klasse gebruikt voor de lichte en donkere modus in uw main.css-bestand:
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);
}
Je kunt primary: 'black' niet gebruiken in je config omdat black niet meerdere tinten heeft. Om effen zwart of wit als primaire kleur te gebruiken, stel je het direct in je main.css bestand in:
app/assets/css/main.css
@import "tailwindcss";
@import "@nuxt/ui";

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

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

Tekst

Nuxt UI biedt Tailwind CSS utility-klassen voor tekstkleuren, zodat u klassenamen zoals text-dimmed of text-muted kunt gebruiken:

Gedimd {class="text-dimmed text-sm px-4 py-1.5 inline-block rounded-md"} Gedempt {class="text-muted text-sm px-4 py-1.5 inline-block rounded-md"} Afgestemd {class="text-toned text-sm px-4 py-1.5 inline-block rounded-md"} Tekst {class="text-default text-sm px-4 py-1.5 inline-block rounded-md"} Uitgelicht {class="text-highlighted text-sm px-4 py-1.5 inline-block rounded-md"} Omgekeerd {class="text-inverted bg-inverted text-sm px-4 py-1.5 inline-block rounded-md"}

<template>
  <span class="text-dimmed">Dimmed</span>
  <span class="text-muted">Muted</span>
  <span class="text-toned">Toned</span>
  <span class="text-default">Text</span>
  <span class="text-highlighted">Highlighted</span>
  <span class="text-inverted bg-inverted">Inverted</span>
</template>

Elke utility-klasse gebruikt een CSS-variabele om de kleur in te stellen voor lichte en donkere modi:

: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;
}
U kunt deze CSS-variabelen aanpassen in uw main.css-bestand:
app/assets/css/main.css
@import "tailwindcss";
@import "@nuxt/ui";

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

.dark {
  --ui-text: white;
}
Als u meerdere van deze variabelen tegelijk wilt wijzigen, wijst in plaats daarvan een andere kleur toe aan neutral in uw configuratie.

Achtergrond

Nuxt UI biedt Tailwind CSS utility-klassen voor achtergrondkleuren, zodat u klassenamen zoals bg-default of bg-muted kunt gebruiken:

Standaard {class="bg-default text-sm px-4 py-1.5 inline-block rounded-md"} Gedempt {class="bg-muted text-sm px-4 py-1.5 inline-block rounded-md"} Verhoogd {class="bg-elevated text-sm px-4 py-1.5 inline-block rounded-md"} Geaccentueerd {class="bg-accented text-sm px-4 py-1.5 inline-block rounded-md"} Omgekeerd {class="bg-inverted text-inverted text-sm px-4 py-1.5 inline-block rounded-md"}

<template>
  <div class="bg-default">Default</div>
  <div class="bg-muted">Muted</div>
  <div class="bg-elevated">Elevated</div>
  <div class="bg-accented">Accented</div>
  <div class="bg-inverted text-inverted">Inverted</div>
</template>

Elke utility-klasse gebruikt een CSS-variabele om de kleur in te stellen voor lichte en donkere modi:

: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);
}
U kunt deze CSS-variabelen aanpassen in uw main.css-bestand:
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);
}

Grens

Nuxt UI biedt Tailwind CSS utility-klassen voor randkleuren, zodat u klassenamen zoals border-default of border-muted kunt gebruiken:

Standaard {class="border-2 border-default text-sm px-4 py-1.5 inline-block rounded-md"} Gedempt {class="border-2 border-muted text-sm px-4 py-1.5 inline-block rounded-md"} Geaccentueerd {class="border-2 border-accented text-sm px-4 py-1.5 inline-block rounded-md"} Omgekeerd {class="border-2 border-inverted text-sm px-4 py-1.5 inline-block rounded-md"}

<template>
  <div class="border border-default">Default</div>
  <div class="border border-muted">Muted</div>
  <div class="border border-accented">Accented</div>
  <div class="border border-inverted">Inverted</div>
</template>

Elke utility-klasse gebruikt een CSS-variabele om de kleur in te stellen voor lichte en donkere modi:

: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);
}
U kunt deze CSS-variabelen aanpassen in uw main.css-bestand:
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);
}

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

Nuxt UI past een focus-visible-omtrek toe op elk interactief element, getint met de color-prop van de component, bijv. outline-primary/25 wanneer color="primary" of outline-inverted/25 wanneer color="neutral".

Als u de voorkeur geeft aan één omtrekkleur in uw hele app, ongeacht de kleur van de component, kunt u een algemene regel toevoegen aan uw main.css-bestand:

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

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

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

De eerste regel kleurt de focusomtrek van elk onderdeel, de tweede lijnt de ringverkleuring uit die op focus is aangebracht door varianten met een zichtbare rand zoals outline of subtle, inclusief kaarten die markeren wanneer hun link is gericht.

Zorg ervoor dat u deze regels buiten een @layer declareert, zodat ze voorrang hebben op de kleuren die zijn ingesteld door de componentthema 's. Houd er rekening mee dat de eerste regel ook de native focusschets van uw eigen elementen kleurt, en varianten die een border opnieuw kleuren op focus zoals FileUpload of ContentSurround de component color blijven volgen .

Radius

Nuxt UI overschrijft de standaard rounded-*-hulpprogramma 's van Tailwind CSS met een uniform randradiussysteem, zodat u een normale border-straal kunt gebruiken utilities zoals rounded-xs of rounded-2xl:

xs {class="border-2 border-accented text-sm px-4 py-1.5 inline-block rounded-xs"} sm {class="border-2 border-accented text-sm px-4 py-1.5 inline-block rounded-sm"} md {class="border-2 border-accented text-sm px-4 py-1.5 inline-block rounded-md"} lg {class="border-2 border-accented text-sm px-4 py-1.5 inline-block rounded-lg"} xl {class="border-2 border-accented text-sm px-4 py-1.5 inline-block rounded-xl"} 2xl {class="border-2 border-accented text-sm px-4 py-1.5 inline-block rounded-2xl"} 3xl {class="border-2 border-accented text-sm px-4 py-1.5 inline-block rounded-3xl"}

<template>
  <div class="rounded-xs">xs</div>
  <div class="rounded-sm">sm</div>
  <div class="rounded-md">md</div>
  <div class="rounded-lg">lg</div>
  <div class="rounded-xl">xl</div>
  <div class="rounded-2xl">2xl</div>
  <div class="rounded-3xl">3xl</div>
</template>

Deze hulpprogramma-klassen worden berekend op basis van een globale --ui-radius CSS-variabele, die de basisradiuswaarde definieert die op alle componenten wordt toegepast voor een consistent uiterlijk.

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

Elk hulpprogramma vermenigvuldigt deze basiswaarde:

@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);
}
U kunt de basisradiuswaarde in uw main.css-bestand aanpassen:
app/assets/css/main.css
@import "tailwindcss";
@import "@nuxt/ui";

:root {
  --ui-radius: 0.5rem;
}
Het wijzigen van --ui-radius heeft ook invloed op de klassen rounded-xs naar rounded-3xl op uw eigen markup en componenten van derden, niet alleen op Nuxt UI-componenten.
Probeer het themamenu: prose-icon{name="i-lucide-palette" class="text-primary"} in de kop hierboven om de basisradiuswaarde te wijzigen.

Container

Nuxt UI biedt een --ui-container CSS-variabele die de maximale breedte van de Container regelt.

:root {
  --ui-container: 80rem; /* var(--container-7xl) */
}
U kunt deze waarde in uw main.css-bestand aanpassen om de containerbreedtes consistent aan te passen tijdens uw toepassing:
app/assets/css/main.css
@import "tailwindcss";
@import "@nuxt/ui";

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

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

Header

Nuxt UI biedt een --ui-header-height CSS-variabele die de hoogte van de Header regelt.

:root {
  --ui-header-height: 4rem;
}
U kunt deze waarde aanpassen in uw main.css om de headerhoogte consistent aan te passen tijdens uw toepassing:
app/assets/css/main.css
@import "tailwindcss";
@import "@nuxt/ui";

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

Lichaam

Nuxt UI past standaardklassen toe op het <body>-element van uw app voor consistente thema 's in lichte en donkere modi:

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.