10x DevKit offers three distinct approaches for customizing your project's appearance. You can choose from 26 carefully curated built-in themes, provide your own daisyUI theme, or create a fully personalized theme using the built-in theme generation utility. With just three colors and the option to adjust the "brutality" level of corners and backgrounds, you can effortlessly craft a unique look that fits your exact needs.
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/config/SITE.ts, replace the STYLE theme with the following value:
const STYLE = {
/* ...Other Settings... */
...makeTheme(themePresets.),
};