Build your own theme

Variables control how Blaze looks. Use the below form to set which variables you want to override.

Base Colours

$color-black:

$color-white:

$color-beige:

$color-red:

$color-pink:

$color-purple:

$color-blue:

$color-green:

$color-yellow:

$color-orange:

$color-brown:

Computed Colours

$color-grey:

$color-tint:

$color-dark-grey:

$color-dark-red:

$color-dark-pink:

$color-dark-purple:

$color-dark-blue:

$color-dark-green:

$color-dark-yellow:

$color-dark-orange:

$color-dark-brown:

$color-darker-grey:

$color-darker-red:

$color-darker-pink:

$color-darker-purple:

$color-darker-blue:

$color-darker-green:

$color-darker-yellow:

$color-darker-orange:

$color-darker-brown:

$color-light-grey:

$color-light-red:

$color-light-pink:

$color-light-purple:

$color-light-blue:

$color-light-green:

$color-light-yellow:

$color-light-orange:

$color-light-brown:

$color-lighter-grey:

$color-lighter-red:

$color-lighter-pink:

$color-lighter-purple:

$color-lighter-blue:

$color-lighter-green:

$color-lighter-yellow:

$color-lighter-orange:

$color-lighter-brown:

$color-default:

$color-primary:

$color-secondary:

$color-success:

$color-error:

$color-dark-primary:

$color-darker-primary:

$color-light-primary:

$color-lighter-primary:

$color-dark-secondary:

$color-darker-secondary:

$color-light-secondary:

$color-lighter-secondary:

$color-dark-success:

$color-darker-success:

$color-light-success:

$color-lighter-success:

$color-dark-error:

$color-darker-error:

$color-light-error:

$color-lighter-error:

$color-disabled:

$color-quiet:

Screen

$screen-limit-xsmall:

$screen-limit-small:

$screen-limit-medium:

$screen-limit-large:

$screen-limit-xlarge:

$screen-limit-super:

Spacing

$spacing-tiny:

$spacing-xsmall:

$spacing-small:

$spacing-medium:

$spacing-large:

$spacing-xlarge:

$spacing-super:

Grid

$grid-gutter:

Borders

$border-width:

$border-style:

$border-color:

Border Radius

$border-radius:

$border-radius-rounded:

Box Shadows

$box-shadow:

$box-shadow-high:

$box-shadow-higher:

$box-shadow-highest:

$box-shadow-solid:

$box-shadow-solid-high:

$box-shadow-solid-higher:

$box-shadow-solid-highest:

Focus

$border-color-focus:

$box-shadow-focus:

Z-Indexs

$z-over-content:

$z-over-control:

$z-over-page:

$z-over-screen:

$z-over-everything:

Typography

$text-font-family:

$text-font-family-serif:

$text-font-family-mono:

$text-font-size-super:

$text-font-size-xlarge:

$text-font-size-large:

$text-font-size-medium:

$text-font-size-small:

$text-font-size-xsmall:

$text-font-weight:

$text-font-weight-heavy:

$text-line-height:

$text-color:

$highlight-padding:

$highlight-margin:

$highlight-color:

$highlight-background-color:

$help-border:

$paragraph-padding:

$paragraph-margin:

$paragraph-font-style:

$code-color:

$code-background-color:

$code-font-family:

$code-font-weight:

$code-multiline-padding:

$code-multiline-border-radius:

$keyboard-color:

$keyboard-background-color:

$keyboard-border-width:

$keyboard-border-style:

$keyboard-border-color:

$keyboard-border:

$keyboard-border-radius:

$quotation-padding:

$quotation-margin:

$quotation-color:

$quotation-font-size:

$quotation-font-family:

$quotation-border-width:

$quotation-border-style:

$quotation-border-color:

$quotation-primary-border-color:

$quotation-secondary-border-color:

$quotation-success-border-color:

$quotation-error-border-color:

$quotation-footer-color:

$quotation-footer-font-style:

Addresses

$address-font-style:

$address-heading-font-weight:

Alerts

$alert-margin:

$alert-padding:

$alert-background-color:

$alert-primary-background-color:

$alert-secondary-background-color:

$alert-error-background-color:

$alert-success-background-color:

$alert-color:

$alert-border-radius:

Badges

$badge-padding:

$badge-margin:

$badge-background-color:

$badge-color:

$badge-primary-background-color:

$badge-primary-color:

$badge-secondary-background-color:

$badge-secondary-color:

$badge-success-background-color:

$badge-success-color:

$badge-error-background-color:

$badge-error-color:

$badge-font-size:

$badge-font-weight:

$badge-border-radius:

$badge-border-radius-rounded:

Bubbles

$bubble-padding:

$bubble-background-color:

$bubble-color:

$bubble-text-align:

$bubble-border-radius:

$bubble-arrow-width:

Buttons

$button-padding:

$button-margin:

$button-color:

$button-background-color:

$button-primary-color:

$button-primary-background-color:

$button-secondary-color:

$button-secondary-background-color:

$button-success-color:

$button-success-background-color:

$button-error-color:

$button-error-background-color:

$button-disabled-color:

$button-disabled-background-color:

$button-disabled-border-color:

$button-font-family:

$button-font-size:

$button-text-align:

$button-text-transform:

$button-font-style-disabled:

$button-border-width:

$button-border-style:

$button-border-color:

$button-border:

$button-border-radius:

$button-focus-border-color:

$button-focus-box-shadow:

$button-ghost-color:

$button-ghost-hover-color:

$button-ghost-primary-color:

$button-ghost-primary-hover-color:

$button-ghost-secondary-color:

$button-ghost-secondary-hover-color:

$button-ghost-success-color:

$button-ghost-success-hover-color:

$button-ghost-error-color:

$button-ghost-error-hover-color:

$button-ghost-border-width:

$button-ghost-border-style:

$button-rounded-border-radius:

$button-close-font-weight:

$button-close-font-size:

$button-icon-left-padding:

$button-icon-right-padding:

$button-super-font-size:

$button-xlarge-font-size:

$button-large-font-size:

$button-medium-font-size:

$button-small-font-size:

$button-xsmall-font-size:

Calendars

$calendar-padding:

$calendar-max-width:

$calendar-background-color:

$calendar-color:

$calendar-text-align:

$calendar-border-width:

$calendar-border-style:

$calendar-border-color:

$calendar-border:

$calendar-border-radius:

$calendar-control-padding:

$calendar-control-background-color:

$calendar-control-color:

$calendar-control-date-in-month-color:

$calendar-control-font-size:

$calendar-control-border-width:

$calendar-control-border-style:

$calendar-control-border-color:

$calendar-control-border:

$calendar-control-border-hover:

$calendar-control-border-radius:

$calendar-control-selected-background-color:

$calendar-control-selected-color:

$calendar-control-selected-border-color:

$calendar-header-padding:

$calendar-day-font-weight:

$calendar-day-padding:

$calendar-today-border-color:

Cards

$card-margin:

$card-box-shadow:

$card-border-radius:

$card-divider-background-color:

$card-divider-color:

$card-primary-divider-background-color:

$card-primary-divider-color:

$card-primary-divider-border-bottom-color:

$card-secondary-divider-background-color:

$card-secondary-divider-color:

$card-secondary-divider-border-bottom-color:

$card-success-divider-background-color:

$card-success-divider-color:

$card-success-divider-border-bottom-color:

$card-error-divider-background-color:

$card-error-divider-color:

$card-error-divider-border-bottom-color:

$card-divider-font-weight:

$card-item-border-width:

$card-item-border-style:

$card-item-border-color:

$card-item-border-bottom:

$card-item-active-background-color:

$card-item-padding:

Drawers

$drawer-width-horizontal:

$drawer-width-vertical:

$drawer-background-color:

$drawer-color:

$drawer-border-radius:

$drawer-z-index:

$drawer-heading-padding:

$drawer-body-padding:

$drawer-footer-padding:

$drawer-footer-block-padding:

$drawer-footer-block-button-border-radius:

Headings

$heading-margin:

$heading-padding:

$heading-font-weight:

$heading-font-size:

$heading-font-size-super:

$heading-font-size-xlarge:

$heading-font-size-large:

$heading-font-size-medium:

$heading-font-size-small:

$heading-font-size-xsmall:

$heading-subheading-padding:

$heading-subheading-color:

$heading-subheading-font-size:

Hints

$hint-padding:

$hint-color:

$hint-font-size:

Inputs

$label-padding:

$label-field-margin:

$field-padding:

$field-margin:

$field-color:

$field-background-color:

$field-font-size-super:

$field-font-size-xlarge:

$field-font-size-large:

$field-font-size-medium:

$field-font-size-small:

$field-font-size-xsmall:

$field-font-weight:

$field-border-width:

$field-border-style:

$field-border-color:

$field-border:

$field-border-radius:

$field-focus-border-color:

$field-focus-box-shadow:

$field-disabled-background-color:

$field-disabled-border-color:

$field-disabled-color:

$field-error-border-color:

$field-error-color:

$field-success-border-color:

$field-success-color:

$choice-padding:

$choice-margin:

$choice-font-size-super:

$choice-font-size-xlarge:

$choice-font-size-large:

$choice-font-size-medium:

$choice-font-size-small:

$choice-font-size-xsmall:

$choice-error-color:

$choice-success-color:

$checkbox-margin:

$checkbox-font-size:

$fieldset-padding:

$fieldset-margin:

$fieldset-width:

$fieldset-border:

$legend-padding:

$form-element-padding:

$form-element-label-padding:

Links

$link-color:

$link-primary-color:

$link-secondary-color:

$link-success-color:

$link-error-color:

$link-text-decoration:

$link-hover-text-decoration:

Lists

$list-margin:

$list-padding:

$list-unstyled-padding:

$list-unstyled-list-style:

$list-nested-padding:

$list-item-padding:

$list-item-unstyled-list-style:

$list-ordered-item-padding:

$list-inline-padding:

$list-inline-item-padding-right:

$list-inline-item-bullet-content:

$list-inline-item-bullet-padding:

Menus

$menu-width:

$menu-max-height:

$menu-margin:

$menu-background-color:

$menu-border-radius:

$menu-z-index:

$menu-item-divider-color:

$menu-item-divider-font-weight:

$menu-item-hover-background-color:

$menu-item-active-background-color:

$menu-item-active-font-weight:

$menu-item-disabled-color:

Modals

$modal-width:

$modal-background-color:

$modal-border-width:

$modal-border-style:

$modal-border-color:

$modal-border:

$modal-border-radius:

$modal-z-index:

$modal-header-text-align:

$modal-body-padding:

$modal-footer-padding:

$modal-footer-block-padding:

$modal-footer-block-button-border-radius:

$modal-ghost-background-color:

$modal-ghost-color:

$modal-ghost-heading-color:

Navs

$nav-width:

$nav-padding:

$nav-margin:

$nav-background-color:

$nav-color:

$nav-z-index:

$nav-light-background-color:

$nav-light-color:

$nav-item-padding:

$nav-item-letter-spacing:

$nav-item-hover-background-color:

$nav-item-hover-color:

$nav-item-primary-hover-background-color:

$nav-item-primary-hover-color:

$nav-item-secondary-hover-background-color:

$nav-item-secondary-hover-color:

$nav-item-success-hover-background-color:

$nav-item-success-hover-color:

$nav-item-error-hover-background-color:

$nav-item-error-hover-color:

$nav-item-active-background-color:

$nav-item-active-color:

$nav-item-primary-active-background-color:

$nav-item-primary-active-color:

$nav-item-secondary-active-background-color:

$nav-item-secondary-active-color:

$nav-item-success-active-background-color:

$nav-item-success-active-color:

$nav-item-error-active-background-color:

$nav-item-error-active-color:

Overlays

$overlay-background-color:

$overlay-z-index:

$overlay-transparent-background-color:

Pagination

$pagination-padding:

$pagination-width:

$pagination-font-size:

$pagination-control-color:

$pagination-page-color:

$pagination-page-current-background-color:

$pagination-page-current-color:

$pagination-ellipsis-padding:

Ranges

$range-width:

$range-height:

$range-padding:

$range-background-color:

$range-primary-background-color:

$range-secondary-background-color:

$range-success-background-color:

$range-error-background-color:

$range-border-width:

$range-border-style:

$range-border-color:

$range-border:

$range-border-radius:

$range-box-shadow:

$range-disabled-background-color:

$range-thumb-height:

$range-thumb-width:

$range-thumb-margin:

$range-thumb-background-color:

$range-thumb-border-width:

$range-thumb-border-style:

$range-thumb-border-color:

$range-thumb-border:

$range-thumb-border-radius:

$range-thumb-box-shadow:

$range-thumb-focus-border-color:

$range-thumb-focus-box-shadow:

Tables

$table-width:

$table-margin:

$table-padding:

$table-border-width:

$table-border-style:

$table-border-color:

$table-border:

$table-caption-padding:

$table-caption-color:

$table-caption-max-width:

$table-caption-font-size:

$table-caption-text-align:

$table-cell-padding:

$table-cell-text-align:

$table-heading-background-color:

$table-heading-color:

$table-heading-border-width:

$table-heading-border-style:

$table-heading-border-color:

$table-heading-border:

$table-heading-font-weight:

$table-heading-striped-color:

$table-heading-striped-background-color:

$table-row-striped-color:

$table-row-striped-background-color:

$table-row-clickable-color:

$table-row-clickable-background-color:

$table-row-inactive-color:

$table-row-inactive-background-color:

$table-condensed-font-size:

$table-condensed-cell-padding:

Tabs

$tab-headings-text-align:

$tab-heading-padding:

$tab-heading-margin:

$tab-heading-box-shadow-color:

$tab-heading-active-box-shadow-color:

$tab-heading-primary-active-box-shadow-color:

$tab-heading-secondary-active-box-shadow-color:

$tab-heading-success-active-box-shadow-color:

$tab-heading-error-active-box-shadow-color:

$tab-heading-disabled-color:

$tab-heading-disabled-background-color:

$tab-padding:

Toasts

$toasts-width:

$toasts-background-color:

$toasts-z-index:

$toast-padding:

$toast-margin:

$toast-background-color:

$toast-color:

$toast-primary-background-color:

$toast-primary-color:

$toast-secondary-background-color:

$toast-secondary-color:

$toast-success-background-color:

$toast-success-color:

$toast-error-background-color:

$toast-error-color:

$toast-border-radius:

Toggles

$toggle-margin:

$toggle-track-background-color:

$toggle-track-primary-background-color:

$toggle-track-secondary-background-color:

$toggle-track-success-background-color:

$toggle-track-error-background-color:

$toggle-track-border-radius:

$toggle-track-unchecked-background-color:

$toggle-track-disabled-background-color:

$toggle-handle-background-color:

$toggle-handle-border-radius:

$toggle-handle-box-shadow:

$toggle-handle-disabled-background-color:

Tooltips

$tooltip-z-index:

$tooltip-arrow-width:

$tooltip-body-padding:

$tooltip-body-background-color:

$tooltip-body-color:

$tooltip-body-border-width:

$tooltip-body-border-style:

$tooltip-body-border-color:

$tooltip-body-border-radius:

Tree

$tree-padding:

$tree-margin:

$tree-nested-padding:

$tree-item-padding:

$tree-item-indicator-padding:

$tree-item-indicator-color:

$tree-item-expandable-indicator-color:

$tree-item-expanded-indicator-color:

Submitting your themes

Coming soon!