twitter-bootstrap-railsでの配色カスタマイズ

気軽に変更するには、@black: #000000;を適当な色にします。

app/assets/stylesheets/bootstrap.css.less

@import "twitter/bootstrap";

// import responsive layout
@import "twitter/bootstrap/responsive";

// Your custom stylesheets goes here (override Less here)
@media (min-width: 980px) {
  body {
    padding-top: 60px;
  }
}
@black: #000000;
@grayDarker:            lighten(@black, 16%);
@grayDark:              lighten(@black, 32%);
@gray:                  lighten(@black, 48%);
@grayLight:             lighten(@black, 64%);
@grayLighter:           lighten(@black, 80%);
@white:                 lighten(@black, 96%);
.hero-unit {
  background-color: lighten(@black, 90%);
  margin-top: 19px;
  >h1 {
    font-size: 24px;
  }
}

.well {
  background-color: lighten(@black, 90%);
  border: 1px solid @grayLighter;
  border: 1px solid rgba(5, 5, 10,.05);
  .box-shadow(inset 01px1px rgba(5, 5, 10,.05));
  blockquote {
    border-color: #ddd;
    border-color: rgba(0,0,0,.15);
  }
}

.table-striped {
  tbody {
    tr:nth-child(odd) td,
    tr:nth-child(odd) th {
      background-color: lighten(@black, 93%);
    }
  }
}

.table {
  tbody tr:hover td,
  tbody tr:hover th {
    background-color: lighten(@black, 90%);
  }
}

.form-actions {
  background-color: lighten(@black, 90%);
  border-top: 1px solid lighten(@black, 93%);
}