- Components
- customization
- theme
Preset Ui - Theme
Simplify the customization of your project by using the theming options in the UnoCSS configuration file.
You can override the default utility classes and their behavior, as well as change colors, fonts, and default class values, to better suit your design needs.
Theming
PresetUI uses semantic color names to make it easy to understand and configure the purpose of each color. This approach ensures a consistent and intuitive theming experience.
Using semantic names like primary, success, danger, info, and warning helps maintain a clear and organized color system in your project.
-
CSS Variables
app.css --primary-50: 36 88% 96%; [!code ++] --primary-100: 36 88% 92%; [!code ++] --primary-200: 35 86% 80%; [!code ++] --primary-300: 34 85% 68%; [!code ++] --primary-400: 31 86% 55%; [!code ++] --primary-500: 30 85% 51%; [!code ++] --primary-600: 26 80% 46%; [!code ++] --primary-700: 18 78% 39%; [!code ++] --primary-800: 14 67% 34%; [!code ++] --primary-900: 12 64% 28%; [!code ++] --primary-950: 12 67% 15%; [!code ++] /* other colors */
Using a color
index.html <div class="text-primary">
Hello, <span class="text-fg-muted"></span>
</div>Themes
Want to speed up your development? We’ve got some nice premade themes for you! These themes come with all the necessary color configurations.
Default
Primary
Secondary
Accent
Success
Warning
Info
Danger
Gray
Water
Primary
Secondary
Accent
Success
Warning
Info
Danger
Gray
Earth
Primary
Secondary
Accent
Success
Warning
Info
Danger
Gray
Fire
Primary
Secondary
Accent
Success
Warning
Info
Danger
Gray
Air
Primary
Secondary
Accent
Success
Warning
Info
Danger
Gray