To avoid specifying color values by hand, we’ve included a robust set of color variables. For maintainability, please use these instead of hardcoding color values.
Theme primary
theme-primary
theme-primary-100
theme-primary-200
theme-primary-300
theme-primary-400
theme-primary-500
theme-primary-600
Theme secondary
theme-secondary
theme-secondary-100
theme-secondary-200
theme-secondary-300
theme-secondary-400
theme-secondary-500
theme-secondary-600
Orange
orange-100
orange-200
orange-300
orange-400
orange-500
orange-600
Blue
blue-100
blue-200
blue-300
blue-400
blue-500
blue-600
Green
green-100
green-200
green-300
green-400
green-500
green-600
Red
red-100
red-200
red-300
red-400
red-500
red-600
Yellow
yellow-100
yellow-200
yellow-300
yellow-400
yellow-500
yellow-600
Gold
gold-100
gold-200
gold-300
gold-400
Silver
silver-100
silver-200
silver-300
silver-400
Bronze
bronze-100
bronze-200
bronze-300
bronze-400
Black
black-050
black-100
black-150
black-200
black-225
black-250
black-300
black-350
black-400
black-500
black-600
black
Each color stop is available as an atomic text, background, and border class. Using these atomic classes means your view will respond to dark mode appropriately. These colors are available conditionally.
| Text |
Background |
Border |
|
.fc-theme-primary
|
.bg-theme-primary
|
|
|
.fc-theme-primary-100
|
.bg-theme-primary-100
|
|
|
.fc-theme-primary-200
|
.bg-theme-primary-200
|
|
|
.fc-theme-primary-300
|
.bg-theme-primary-300
|
|
|
.fc-theme-primary-400
|
.bg-theme-primary-400
|
|
|
.fc-theme-primary-500
|
.bg-theme-primary-500
|
|
|
.fc-theme-primary-600
|
.bg-theme-primary-600
|
|
| Text |
Background |
Border |
|
.fc-theme-secondary
|
.bg-theme-secondary
|
|
|
.fc-theme-secondary-100
|
.bg-theme-secondary-100
|
|
|
.fc-theme-secondary-200
|
.bg-theme-secondary-200
|
|
|
.fc-theme-secondary-300
|
.bg-theme-secondary-300
|
|
|
.fc-theme-secondary-400
|
.bg-theme-secondary-400
|
|
|
.fc-theme-secondary-500
|
.bg-theme-secondary-500
|
|
|
.fc-theme-secondary-600
|
.bg-theme-secondary-600
|
|
| Text |
Background |
Border |
|
.fc-orange-100
|
.bg-orange-100
|
|
|
.fc-orange-200
|
.bg-orange-200
|
|
|
.fc-orange-300
|
.bg-orange-300
|
|
|
.fc-orange-400
|
.bg-orange-400
|
|
|
.fc-orange-500
|
.bg-orange-500
|
|
|
.fc-orange-600
|
.bg-orange-600
|
|
| Text |
Background |
Border |
|
.fc-blue-100
|
.bg-blue-100
|
|
|
.fc-blue-200
|
.bg-blue-200
|
|
|
.fc-blue-300
|
.bg-blue-300
|
|
|
.fc-blue-400
|
.bg-blue-400
|
|
|
.fc-blue-500
|
.bg-blue-500
|
|
|
.fc-blue-600
|
.bg-blue-600
|
|
| Text |
Background |
Border |
|
.fc-green-100
|
.bg-green-100
|
|
|
.fc-green-200
|
.bg-green-200
|
|
|
.fc-green-300
|
.bg-green-300
|
|
|
.fc-green-400
|
.bg-green-400
|
|
|
.fc-green-500
|
.bg-green-500
|
|
|
.fc-green-600
|
.bg-green-600
|
|
| Text |
Background |
Border |
|
.fc-red-100
|
.bg-red-100
|
|
|
.fc-red-200
|
.bg-red-200
|
|
|
.fc-red-300
|
.bg-red-300
|
|
|
.fc-red-400
|
.bg-red-400
|
|
|
.fc-red-500
|
.bg-red-500
|
|
|
.fc-red-600
|
.bg-red-600
|
|
| Text |
Background |
Border |
|
.fc-yellow-100
|
.bg-yellow-100
|
|
|
.fc-yellow-200
|
.bg-yellow-200
|
|
|
.fc-yellow-300
|
.bg-yellow-300
|
|
|
.fc-yellow-400
|
.bg-yellow-400
|
|
|
.fc-yellow-500
|
.bg-yellow-500
|
|
|
.fc-yellow-600
|
.bg-yellow-600
|
|
| Text |
Background |
Border |
|
.fc-gold-100
|
.bg-gold-100
|
|
|
.fc-gold-200
|
.bg-gold-200
|
|
|
.fc-gold-300
|
.bg-gold-300
|
|
|
.fc-gold-400
|
.bg-gold-400
|
|
| Text |
Background |
Border |
|
.fc-silver-100
|
.bg-silver-100
|
|
|
.fc-silver-200
|
.bg-silver-200
|
|
|
.fc-silver-300
|
.bg-silver-300
|
|
|
.fc-silver-400
|
.bg-silver-400
|
|
| Text |
Background |
Border |
|
.fc-bronze-100
|
.bg-bronze-100
|
|
|
.fc-bronze-200
|
.bg-bronze-200
|
|
|
.fc-bronze-300
|
.bg-bronze-300
|
|
|
.fc-bronze-400
|
.bg-bronze-400
|
|
| Text |
Background |
Border |
|
.fc-black-050
|
.bg-black-050
|
|
|
.fc-black-100
|
.bg-black-100
|
|
|
.fc-black-150
|
.bg-black-150
|
|
|
.fc-black-200
|
.bg-black-200
|
|
|
.fc-black-225
|
.bg-black-225
|
|
|
.fc-black-250
|
.bg-black-250
|
|
|
.fc-black-300
|
.bg-black-300
|
|
|
.fc-black-350
|
.bg-black-350
|
|
|
.fc-black-400
|
.bg-black-400
|
|
|
.fc-black-500
|
.bg-black-500
|
|
|
.fc-black-600
|
.bg-black-600
|
|
|
.fc-black-600
|
.bg-black-600
|
|
| Text |
Background |
Border |
|
.fc-white
|
.bg-white
|
|
Stacks’s approach to theming is powered by CSS variables that are split into their HSL. Our default primary color is based on Stack Overflow’s branded orange-400 represented as hsl(27, 90%, 55%). We can store these as separate values, apply various color operations, and then recombine them into on-demand color palettes to use for theming.
<p class="fc-light">…</p>
<p class="fc-medium">…</p>
<p>…</p>
<p class="fc-dark">…</p>
| Text classes |
Example |
| .fc-light |
This is example light text.
|
| .fc-medium |
This is example medium text.
|
| .fc-dark |
This is example dark text.
|
| Text classes |
Background classes |
Border Classes |
| .fc-danger |
.bg-danger
|
.bc-danger
|
| Text classes |
Background classes |
Border Classes |
| .fc-error |
.bg-error
|
.bc-error
|
| Text classes |
Background classes |
Border Classes |
| .fc-warning |
.bg-warning
|
.bc-warning
|
| Text classes |
Background classes |
Border Classes |
| .fc-success |
.bg-success
|
.bc-success
|
