Here, you can preview the pre-built themes. Feel free to explore, switch between light and dark modes for each, and see which style best suits your project. When you find one you like, copy its CSS code and paste it into your project to apply the theme instantly. It's a straightforward way to get your project's visual foundation up and running quickly.
Color Palette
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
Component Sample
Badge (sm)
neutral
primary
secondary
accent
ghost
Toggle
Checkbox
Key ⌘+Ctrl+Z Shift+Alt+→
Like what you see?
In src/styles/global.css, replace the current light and dark themes with the following snippet: