Hier können Sie eine Vorschau der vordefinierten Themes anzeigen. Erkunden Sie sie, wechseln Sie für jedes Theme zwischen Hell- und Dunkelmodus und finden Sie heraus, welcher Stil am besten zu Ihrem Projekt passt. Wenn Ihnen ein Theme gefällt, kopieren Sie dessen CSS-Code und fügen Sie ihn in Ihr Projekt ein, um das Theme sofort anzuwenden. So bringen Sie die visuelle Grundlage Ihres Projekts schnell und unkompliziert zum Laufen.
Farbpalette
primary
primary-content
secondary
secondary-content
accent
accent-content
neutral
neutral-content
base-100
base-200
base-300
base-content
info
info-content
success
success-content
warning
warning-content
error
error-content
Additional Variables
--prbc
Mix of primary & base-content
Mix of primary & base-content
--subc
Mix of success & base-content
Mix of success & base-content
--wabc
Mix of warning & base-content
Mix of warning & base-content
--erbc
Mix of error & base-content
Mix of error & base-content
Komponentenbeispiel
Badge (sm)
neutral
primary
secondary
accent
ghost
Toggle
Checkbox
Key ⌘+Ctrl+Z Shift+Alt+→
Gefällt Ihnen, was Sie sehen?
Ersetzen Sie in src/styles/global.css
die aktuellen Hell- und Dunkel-Themes durch folgenden Code-Schnipsel: