When referencing color in your stylesheet overrides, please ensure you're using one of the following variables. These values provide the core color palette for Crossroads' brand identity and have been used to override the Bootstrap defaults, where noted below.
| Variable | Light Theme | Dark Theme |
|---|---|---|
| $gray-base | #737373 | #737373 |
| $gray-darker | #151515 | #151515 |
| $gray-dark | #4D4D4D | #4D4D4D |
| $gray | #737373 | #737373 |
| $gray-light | #979797 | #979797 |
| $gray-lighter | #E7E7E7 | #E7E7E7 |
| $brand-primary | #3B6E8F | #3B6E8F |
| $brand-success | #149C64 | #149C64 |
| $brand-info | #253746 | #253746 |
| $brand-warning | #D8CFB9 | #D8CFB9 |
| $brand-danger | #AC2D17 | #AC2D17 |
| Variable | Light Theme | Dark Theme |
|---|---|---|
| $body-bg | $cr-white | $cr-black |
| $text-color | $cr-gray-lighter | $cr-gray-dark |
| $link-color | $cr-blue | $cr-blue |
| Variable | Light Theme | Dark Theme |
|---|---|---|
| $btn-default-color | $cr-white | $cr-white |
| $btn-default-bg | $cr-gray-light | $cr-gray-light |
| $btn-default-border | $cr-gray-light | $cr-gray-light |
| $btn-primary-color | $cr-white | $cr-white |
| $btn-primary-bg | $cr-blue | $cr-blue |
| $btn-primary-border | $cr-blue | $cr-blue |
| $btn-info-color | $cr-white | $cr-white |
| $btn-info-bg | $cr-blue | $cr-blue |
| $btn-info-border | $cr-blue | $cr-blue |
| Variable | Light Theme | Dark Theme |
|---|---|---|
| $input-bg | lighten($cr-gray-lighter, 5) | lighten($cr-gray, 40) |
| $input-bg-focus | $input-bg | $input-bg |
| $input-color | $cr-gray-dark | $cr-gray-dark |
| $input-border | lighten($cr-gray-lighter, 5) | lighten($cr-gray, 40) |
| $input-border-focus | $cr-blue-light | $cr-blue-light |
| $input-group-addon-bg | transparent | transparent |
| $input-group-addon-border-color | transparent | transparent |
| Variable | Light Theme | Dark Theme |
|---|---|---|
| $alert-success-bg | lighten($brand-success, 40) | lighten($brand-success, 40) |
| $alert-success-text | $cr-white | $cr-white |
| $alert-success-border | lighten($brand-success, 30) | lighten($brand-success, 30) |
| $alert-info-bg | lighten($brand-info, 50) | lighten($brand-info, 50) |
| $alert-info-text | $cr-white | $cr-white |
| $alert-info-border | lighten($brand-info, 40) | lighten($brand-info, 40) |
| $alert-warning-bg | lighten($brand-warning, 45) | lighten($brand-warning, 45) |
| $alert-warning-text | $cr-white | $cr-white |
| $alert-warning-border | lighten($brand-warning, 25) | lighten($brand-warning, 25) |
| $alert-danger-bg | lighten($brand-danger, 45) | lighten($brand-danger, 45) |
| $alert-danger-text | $cr-white | $cr-white |
| $alert-danger-border | lighten($brand-danger, 40) | lighten($brand-danger, 40) |