Color Palette
Use CSS variables for colors that change with user system settings for light/dark themes.
| gray Current | gray Inverted | primary | warning | positive | negative | |
|---|---|---|---|---|---|---|
| ts-x-50 | ||||||
| ts-x-75 | ||||||
| ts-x-100 | ||||||
| ts-x-200 | ||||||
| ts-x-300 | ||||||
| ts-x-400 | ||||||
| ts-x-500 | ||||||
| ts-x-600 | ||||||
| ts-x-700 | ||||||
| ts-x-800 | ||||||
| ts-x-900 |
<div style="color: var(--ts-gray-300)">Apply CSS variables like this</div>Colors that stay the same in both light/dark themes.
| light-gray | dark-gray | |
|---|---|---|
| ts-x-50 | ||
| ts-x-75 | ||
| ts-x-100 | ||
| ts-x-200 | ||
| ts-x-300 | ||
| ts-x-400 | ||
| ts-x-500 | ||
| ts-x-600 | ||
| ts-x-700 | ||
| ts-x-800 | ||
| ts-x-900 |
<div style="color: var(--ts-light-gray-300)">Apply CSS variables like this</div>Utility Classes
Classes with has- prefix can be applied to any element. See Utilities for more info.
Inverts element color with current scheme: light becomes dark, and vice versa.
This element is black in light themes; and white in dark themes.
<div class="ts-box has-inverted" style="color: var(--ts-gray-800)">
<div class="ts-content">
This element is black in light themes; and white in dark themes.
</div>
</div>Override element color scheme to ignore user system settings.
This element is always dark, regardless of system settings.
This element is always light, regardless of system settings.
<div class="ts-box has-dark" style="color: var(--ts-gray-800)">
<div class="ts-content">
This element is always dark, regardless of system settings.
</div>
</div>
<div class="ts-box has-light" style="color: var(--ts-gray-800)">
<div class="ts-content">
This element is always light, regardless of system settings.
</div>
</div>