papopporking-oss/opencode-nextjs-standard

daisyUI 5 Farben

daisyUI Farbnamen

• primary: Die Hauptmarkenfarbe.
• primary-content: Vordergrundinhaltsfarbe für die Verwendung auf primary.
• secondary: Eine optionale sekundäre Markenfarbe.
• secondary-content: Vordergrundinhaltsfarbe für die Verwendung auf secondary.
• accent: Eine optionale Akzentfarbe.
• accent-content: Vordergrundinhaltsfarbe für die Verwendung auf accent.
• neutral: Eine dunkle neutrale Farbe für UI-Bereiche, die keine gesättigten Farben verwenden.
• neutral-content: Vordergrundinhaltsfarbe für die Verwendung auf neutral.
• base-100: Die Seiten-Grundflächenfarbe für leere Hintergründe.
• base-200: Ein dunklerer Grundton, der Erhebung verleiht.
• base-300: Ein noch dunklerer Grundton, der noch mehr Erhebung verleiht.
• base-content: Vordergrundinhaltsfarbe für die Verwendung auf einer Grundfarbe.
• info: Farbe für Informations- und Hilfemeldungen.
• info-content: Vordergrundinhaltsfarbe für die Verwendung auf info.
• success: Farbe für Erfolgs- und Sicherheitsmeldungen.
• success-content: Vordergrundinhaltsfarbe für die Verwendung auf success.
• warning: Farbe für Warn- und Vorsichtsmeldungen.
• warning-content: Vordergrundinhaltsfarbe für die Verwendung auf warning.
• error: Farbe für Fehler-, Gefahren- und Zerstörungsmeldungen.
• error-content: Vordergrundinhaltsfarbe für die Verwendung auf error.

daisyUI Farbregeln

1. daisyUI fügt den Tailwind CSS Farben semantische Farbnamen hinzu.
2. Verwende daisyUI Farbnamen in Utility-Klassen wie du andere Tailwind CSS Farbnamen verwendest. Zum Beispiel verwendet bg-primary die Primärfarbe für den Hintergrund.
3. Der Wert jedes daisyUI Farbnamens ist eine Variable. Daher kann sich die Farbe mit dem Theme ändern.
4. Verwende dark: nicht mit daisyUI Farbnamen.
5. Verwende nach Möglichkeit nur daisyUI Farbnamen. Dadurch können sich Farben automatisch mit dem Theme ändern.
6. Wenn du einen Tailwind CSS Farbnamen wie red-500 verwendest, bleibt seine Farbe in allen Themes gleich.
7. Wenn du einen daisyUI Farbnamen wie primary verwendest, ändert sich seine Farbe mit dem Theme.
8. Vermeide Tailwind CSS Farbnamen für Text. Zum Beispiel wird text-gray-800 auf bg-base-100 in einem dunklen Theme unleserlich, weil bg-base-100 dunkel ist.
9. *-content-Farben müssen einen klaren Kontrast zu ihren zugehörigen Farben haben.
10. Verwende base-*-Farben für den größten Teil der Seite. Verwende die Standardvariante für alle Elemente. Verwende primary nur für das wichtigste Element auf der Seite. Verwende es nur einmal.
11. In seltenen Fällen kannst du eine Tailwind CSS Farbe verwenden, wenn Inhalte in allen Themes dieselbe Farbe behalten müssen. Zum Beispiel kannst du text-red-500 anstelle von text-error verwenden. Bei einem SVG-Icon oder Diagramm kann eine feste Farbe notwendig sein.

Themes aktivieren und anwenden

Die Standardkonfiguration aktiviert light und dark. Wähle im daisyUI-Plugin angegebene Themes, alle Themes oder keine eingebauten Themes:

@plugin "daisyui" {
  themes: light --default, dark --prefersdark, cupcake;
}

• Verwende themes: all;, um alle eingebauten Themes zu aktivieren.
• Verwende themes: false;, um alle eingebauten Themes zu deaktivieren. Mache dies normalerweise, bevor du nur benutzerdefinierte Themes definierst.
• Füge data-theme="THEMEN_NAME" zum <html>-Element oder einem verschachtelten Element hinzu. Du kannst Themes ohne Tiefenbeschränkung verschachteln.

<html data-theme="dark">
  <section data-theme="light">
    <div data-theme="retro">Verschachteltes Theme</div>
  </section>
</html>

Benutzerdefiniertes daisyUI Theme mit eigenen Farben

Eine CSS-Datei, die Tailwind CSS, daisyUI und ein benutzerdefiniertes daisyUI Theme enthält, hat diese Struktur:

@import "tailwindcss";
@plugin "daisyui";
@plugin "daisyui/theme" {
  name: "meintheme";
  default: true; /* als Standard setzen */
  prefersdark: false; /* als Standard-Dunkelmodus setzen (prefers-color-scheme:dark) */
  color-scheme: light; /* Farbe der vom Browser bereitgestellten UI */

  --color-base-100: oklch(98% 0.02 240);
  --color-base-200: oklch(95% 0.03 240);
  --color-base-300: oklch(92% 0.04 240);
  --color-base-content: oklch(20% 0.05 240);
  --color-primary: oklch(55% 0.3 240);
  --color-primary-content: oklch(98% 0.01 240);
  --color-secondary: oklch(70% 0.25 200);
  --color-secondary-content: oklch(98% 0.01 200);
  --color-accent: oklch(65% 0.25 160);
  --color-accent-content: oklch(98% 0.01 160);
  --color-neutral: oklch(50% 0.05 240);
  --color-neutral-content: oklch(98% 0.01 240);
  --color-info: oklch(70% 0.2 220);
  --color-info-content: oklch(98% 0.01 220);
  --color-success: oklch(65% 0.25 140);
  --color-success-content: oklch(98% 0.01 140);
  --color-warning: oklch(80% 0.25 80);
  --color-warning-content: oklch(20% 0.05 80);
  --color-error: oklch(65% 0.3 30);
  --color-error-content: oklch(98% 0.01 30);

  --radius-selector: 1rem; /* Randradius von Selektoren (Checkbox, Toggle, Badge) */
  --radius-field: 0.25rem; /* Randradius von Feldern (Button, Input, Select, Tab) */
  --radius-box: 0.5rem; /* Randradius von Boxen (Card, Modal, Alert) */
  /* bevorzugte Werte für --radius-* : 0rem, 0.25rem, 0.5rem, 1rem, 2rem */

  --size-selector: 0.25rem; /* Basisgröße von Selektoren (Checkbox, Toggle, Badge). Der Wert muss 0.25rem betragen, es sei denn, wir möchten absichtlich größere Selektoren. Wenn ja, kann er 0.28125 oder 0.3125 sein. Wenn wir absichtlich kleinere Selektoren möchten, kann er 0.21875 oder 0.1875 sein */
  --size-field: 0.25rem; /* Basisgröße von Feldern (Button, Input, Select, Tab). Der Wert muss 0.25rem betragen, es sei denn, wir möchten absichtlich größere Felder. Wenn ja, kann er 0.28125 oder 0.3125 sein. Wenn wir absichtlich kleinere Felder möchten, kann er 0.21875 oder 0.1875 sein */

  --border: 1px; /* Randgröße. Der Wert muss 1px betragen, es sei denn, wir möchten absichtlich dickere Ränder. Wenn ja, kann er 1.5px oder 2px sein. Wenn wir absichtlich dünnere Ränder möchten, kann er 0.5px sein */

  --depth: 1; /* nur 0 oder 1 - Fügt Schatten und subtilen 3D-Tiefeneffekt zu Komponenten hinzu */
  --noise: 0; /* nur 0 oder 1 - Fügt Komponenten einen subtilen Rauscheffekt (Körnung) hinzu */
}

Regeln

• Du musst alle CSS-Variablen aus dem Beispiel einfügen.
• Farben können OKLCH, Hex oder ein anderes Format verwenden.
• Wenn du ein benutzerdefiniertes Theme erstellst, füge die Kommentare aus dem Beispiel nicht ein. Gib nur den Code an.

Optional: Verwende das visuelle Tool unter https://daisyui.com/theme-generator/, um ein benutzerdefiniertes Theme zu erstellen.

Ein eingebautes Theme ändern

Verwende den Namen des eingebauten Themes. Ändere nur die notwendigen Werte. daisyUI erbt die anderen Werte:

@plugin "daisyui/theme" {
  name: "light";
  default: true;
  --color-primary: blue;
  --color-secondary: teal;
}

Für ein benutzerdefiniertes CDN-Theme definiere dieselben Variablen in einem Selektor. Der Selektor muss mit dem ausgewählten data-theme und dem Theme-Controller übereinstimmen:

:root:has(input.theme-controller[value=meintheme]:checked),
[data-theme="meintheme"] {
  color-scheme: light;
  --color-primary: oklch(55% 0.3 240);
  /* definiere die restlichen benutzerdefinierten Theme-Variablen */
}

Damit die Tailwind dark:-Variante einem oder mehreren daisyUI Themes folgt, definiere eine benutzerdefinierte Variante:

@custom-variant dark (&:where([data-theme=night], [data-theme=night] *));