Default theme
Themes are defined in root as css variables so you can extend and modify them to your liking as you can see in the following sections.
Main
| Name | value |
|---|---|
| --dash-color-primary | #8b68f5 |
| --dash-color-secondary | #a286f7 |
| --dash-font-color | #252525 |
| --dash-bg-color | #fff |
Color
| Name | value |
|---|---|
| --dash-color-white | rgba(255, 255, 255, 0.92) |
| --dash-color-white | rgba(0, 0, 0, 0.16) |
| --dash-color-white | #cbd5e0 |
| --dash-color-white | #fc8181 |
| --dash-color-white | #f6ad55 |
| --dash-color-white | #f6e05e |
| --dash-color-white | #68d391 |
| --dash-color-white | #4fd1c5 |
| --dash-color-white | #63b3ed |
| --dash-color-white | #7f9cf5 |
| --dash-color-white | #76e4f7 |
| --dash-color-white | #b794f4 |
| --dash-color-white | #f687b3 |
Breackpoints
| Name | value |
|---|---|
| --dash-breakpoint-sm | 640px |
| --dash-breakpoint-md | 768px |
| --dash-breakpoint-lg | 1024px |
| --dash-breakpoint-xl | 1280px |
| --dash-breakpoint-xxl | 1536px |
Spacing
| Name | value |
|---|---|
| --dash-size-xs | 0.25em |
| --dash-size-sm | 0.50em |
| --dash-size-md | 1em |
| --dash-size-lg | 1.50em |
| --dash-size-xl | 2em |
| --dash-size-2xl | 2.5em |
| --dash-size-3xl | 3em |
| --dash-size-4xl | 3.5em |
| --dash-size-5xl | 4em |
| --dash-size-6xl | 4.5em |
| --dash-size-7xl | 5em |
| --dash-size-8xl | 5.5em |
| --dash-size-9xl | 6em |
| --dash-size-full | 100% |
| --dash-size-screen | 100vw |
Font weights
| Name | value |
|---|---|
| --dash-font-weight-normal | 400 |
| --dash-font-weight-medium | 500 |
| --dash-font-weight-semibold | 600 |
| --dash-font-weight-bold | 700 |
| --dash-font-weight-extrabold | 800 |