Default Theme Color Palette
The defaultTheme object defines the color palette for both light and dark modes in your application. Below are the details of the colors used in the theme.
Fonts
- Font Name: 'Lato', sans-serif
- Font URL: Lato Font Family (opens in a new tab)
Spacing
- Spacing: 16px (You can adjust this according to your design needs)
Colors
The default theme includes a comprehensive color palette designed to provide a cohesive and visually appealing user interface. Below are the key color categories used in the theme:
Light Mode
| Element | Property | Color Value | Color Preview |
|---|---|---|---|
| Border | border | #eee | |
| Background | background | #ffffff | |
| Midnight | midnight | #303030 | |
| White | white | #ffffff | |
| Primary | primary.DEFAULT | #fd3f0f | |
primary.accent | #ffffff | ||
primary.foreground | #3d3d3d | ||
| Secondary | secondary.DEFAULT | #d1d5db | |
secondary.foreground | #9ca3af | ||
| Success | success.DEFAULT | #f0fdf4 | |
success.foreground | #166534 | ||
| Card | card.DEFAULT | #f4f4f5 | |
| Disabled | disabled.DEFAULT | #f3f4f6 | |
disabled.foreground | #9ca3af | ||
| Panel | panel.DEFAULT | #fff7ed | |
panel.foreground | #FED7CB | ||
| Badge | badge.error | #ffe4e6 | |
badge.errorForeground | #f87171 | ||
badge.info | #fed7aa | ||
badge.infoForeground | #ea580c |
Dark Mode
Note:
For now, the default theme's dark mode colors are similar to the light mode colors. We will update them later, so feel free to adjust the colors according to your preference.
| Element | Property | Color Value | Color Preview |
|---|---|---|---|
| Border | border | #eee | |
| Background | background | #ffffff | |
| Midnight | midnight | #303030 | |
| Primary | primary.DEFAULT | #fd3f0f | |
primary.accent | #ffffff | ||
primary.foreground | #3d3d3d | ||
| Secondary | secondary.DEFAULT | #d1d5db | |
secondary.foreground | #9ca3af | ||
| Success | success.DEFAULT | #f0fdf4 | |
success.foreground | #166534 | ||
| Card | card.DEFAULT | #f4f4f5 | |
| Disabled | disabled.DEFAULT | #f3f4f6 | |
disabled.foreground | #9ca3af | ||
| Panel | panel.DEFAULT | #fff7ed | |
panel.foreground | #FED7CB | ||
| Badge | badge.error | #ffe4e6 | |
badge.errorForeground | #f87171 | ||
badge.info | #fed7aa | ||
badge.infoForeground | #ea580c |
Color Variants
Primary Colors
| Shade | Light Mode | Dark Mode | Color Preview |
|---|---|---|---|
| 500 | #fb923c | #97316 | |
| 400 | #fb923c | #fb923c | |
| 300 | #fdba74 | #fdba74 | |
| 200 | #fed7aa | #fed7aa | |
| 100 | #ffedd5 | #ffedd5 |
Secondary Colors
| Shade | Light Mode | Dark Mode | Color Preview |
|---|---|---|---|
| 500 | #404040 | #404040 |
Default Theme Implementation Overview
The SDK ensures the application of the default theme, providing a cohesive and visually appealing user experience. You can compare the colors and see where they are utilized within the components.
For a hands-on experience, explore the hosted example of the Tenderize SDK (opens in a new tab).
