# Theming

Creating custom themes

Creating custom themes for Rubix is easy. All you need to do is call the theme-mixin with your own custom color schemes. The signature of the mixin is as follows:

@include theme-maker(<NAME-OF-THEME>, <OPTIONS>);

Here is an example of the green variation of the default Rubix theme:


@include theme-maker("green", (
  theme (
    bg #2EB398
  ),
  header (
    logout (
      bg #2EB398,
      hover-bg #31C0A3
    ),
  ),
  sidebar (
    avatar (
      bg #56B596
    ),
    controls (
      bg #279982,
      btn (
        color #1B6858,
        border darken(#279982, 2%),
        active-bg #1E7362,
        active-color #56B596
      )
    )
  )
));

Once you have included the above mixin in your SASS files, just replace the default class in the class attribute of your <html class='default'> tag to <html class='green'>.

For component level theming refer to the next section on "Component color schemes".

Theme mixin

The theme-mixin allows you to create your own theme variations. You can customize the look and feel of the overall theme, body, header, logout, sidebar-btn, header divider, sidebar, sidebar avatar and controls, common components like link, panel and form-control and finally the footer.

The default values for all these variables is provided at the end of the page:


@include theme-mixin($name, (
  theme (
    color $theme-color,
    bg $theme-bg-color
  ),
  body (
    bg $body-bg-color,
    color $body-color
  ),
  header (
    bg $header-bg-color,
    color $header-color,
    hover-color $header-hover-color,

    logout (
      bg $logout-bg-color,
      color $logout-color,
      hover-bg $logout-hover-bg
    ),

    sidebar-btn (
      bg $sidebar-btn-bg,
      color $sidebar-btn-color,
      hover-bg $sidebar-btn-hover-bg
    ),

    divider (
      color $header-divider-color
    )
  ),
  sidebar (
    bg $sidebar-bg,
    width 250px,
    avatar (
      bg $sidebar-avatar-bg
    ),
    controls (
      bg $sidebar-controls-bg,
      btn (
        color $sidebar-controls-btn-color,
        border $sidebar-controls-btn-border,
        active-bg $sidebar-controls-btn-active-bg,
        active-color $sidebar-controls-btn-active-color
      )
    )
  ),
  components (
    link (
      color $components-link-color
    ),
    panel (
      bg $components-panel-bg,
      border $components-panel-border
    ),
    form-control (
      border $components-form-control-border,
      active (
        border $components-form-control-active-border
      )
    )
  ),
  footer (
    bg $footer-bg,
    color $footer-color
  )
));


Theme mixin defaults:

Variable Default Value
$theme-color white
$theme-bg-color #E76049
$body-color $primary-color
$body-bg-color #E9F0F5
$header-color $primary-color
$header-bg-color #273135
$header-hover-color #ffffff
$logout-bg-color #E76049
$logout-color #ffffff
$logout-hover-bg #F4654D
$sidebar-btn-bg #2AA38B
$sidebar-btn-color #ffffff
$sidebar-btn-hover-bg #2EB398
$header-divider-color rgba(59, 70, 72, 0.45)
$sidebar-bg #273135
$sidebar-avatar-bg #FA7252
$sidebar-controls-bg #DE5939
$sidebar-controls-btn-color #993F31
$sidebar-controls-btn-border darken(#D25436, 2%)
$sidebar-controls-btn-active-bg lighten(#A74635, 5%)
$sidebar-controls-btn-active-color #FA7252
$components-link-color #2EB398
$components-panel-bg #ffffff
$components-panel-border #CEDBEC
$components-form-control-border #ddd
$components-form-control-active-border #2EB398
$footer-color #CCD6DF
$footer-bg $primary-color