Add dark mode (#554)

src/style/bootstrap-color-theme/_alert.scss

@@ -0,0 +1,9 @@
+// Alternate styles
+//
+// Generate contextual modifier classes for colorizing the alert.
+
+@each $color, $value in $theme-colors {
+  .alert-#{$color} {
+    @include alert-variant(theme-color-level($color, $alert-bg-level), theme-color-level($color, $alert-border-level), theme-color-level($color, $alert-color-level));
+  }
+}

src/style/bootstrap-color-theme/_badge.scss

@@ -0,0 +1,9 @@
+// Colors
+//
+// Contextual variations (linked badges get darker on :hover).
+
+@each $color, $value in $theme-colors {
+  .badge-#{$color} {
+    @include badge-variant($value);
+  }
+}

src/style/bootstrap-color-theme/_breadcrumb.scss

@@ -0,0 +1,15 @@
+.breadcrumb {
+  background-color: $breadcrumb-bg;
+}
+
+.breadcrumb-item {
+  + .breadcrumb-item {
+    &::before {
+      color: $breadcrumb-divider-color;
+    }
+  }
+
+  &.active {
+    color: $breadcrumb-active-color;
+  }
+}

src/style/bootstrap-color-theme/_buttons.scss

@@ -0,0 +1,65 @@
+// stylelint-disable selector-no-qualifying-type
+
+//
+// Base styles
+//
+
+.btn {
+  color: $body-color;
+
+  @include hover() {
+    color: $body-color;
+  }
+
+  &:focus,
+  &.focus {
+    box-shadow: $btn-focus-box-shadow;
+  }
+
+  &:not(:disabled):not(.disabled) {
+    &:active,
+    &.active {
+      @include box-shadow($btn-active-box-shadow);
+
+      &:focus {
+        @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
+      }
+    }
+  }
+}
+
+
+//
+// Alternate buttons
+//
+
+@each $color, $value in $theme-colors {
+  .btn-#{$color} {
+    @include button-variant($value, $value);
+  }
+}
+
+@each $color, $value in $theme-colors {
+  .btn-outline-#{$color} {
+    @include button-outline-variant($value);
+  }
+}
+
+//
+// Link buttons
+//
+
+// Make a button look and behave like a link
+.btn-link {
+  color: $link-color;
+
+  @include hover() {
+    color: $link-hover-color;
+  }
+
+  &:disabled,
+  &.disabled {
+    color: $btn-link-disabled-color;
+  }
+  // No need for an active state here
+}

src/style/bootstrap-color-theme/_card.scss

@@ -0,0 +1,29 @@
+//
+// Base styles
+//
+
+.card {
+  background-color: $card-bg;
+  border-color: $card-border-color;
+}
+
+.card-body {
+  color: $card-color;
+}
+
+
+//
+// Optional textual caps
+//
+
+.card-header {
+   color: $card-cap-color;
+  background-color: $card-cap-bg;
+  border-bottom-color: $card-border-color;
+}
+
+.card-footer {
+  color: $card-cap-color;
+  background-color: $card-cap-bg;
+  border-top-color: $card-border-color;
+}

src/style/bootstrap-color-theme/_carousel.scss

@@ -0,0 +1,24 @@
+.carousel-control-prev,
+.carousel-control-next {
+  color: $carousel-control-color;
+
+  // Hover/focus state
+  @include hover-focus() {
+    color: $carousel-control-color;
+  }
+}
+
+.carousel-indicators {
+  li {
+    background-color: $carousel-indicator-active-bg;
+  }
+}
+
+
+// Optional captions
+//
+//
+
+.carousel-caption {
+  color: $carousel-caption-color;
+}

src/style/bootstrap-color-theme/_close.scss

@@ -0,0 +1,12 @@
+.close {
+  color: $close-color;
+  text-shadow: $close-text-shadow;
+
+  @include hover() {
+    color: $close-color;
+  }
+}
+
+button.close {
+  background-color: transparent;
+}

src/style/bootstrap-color-theme/_code.scss

@@ -0,0 +1,18 @@
+// Inline code
+code {
+  color: $code-color;
+}
+
+kbd {
+  color: $kbd-color;
+  background-color: $kbd-bg;
+  @include box-shadow($kbd-box-shadow);
+}
+
+// Blocks of code
+pre {
+  color: $pre-color;
+  code {
+    color: inherit;
+  }
+}

src/style/bootstrap-color-theme/_dropdown.scss

@@ -0,0 +1,43 @@
+.dropdown-menu {
+  color: $dropdown-color;
+  background-color: $dropdown-bg;
+  border-color: $dropdown-border-color;
+
+  @include box-shadow($dropdown-box-shadow);
+}
+
+// Dividers (basically an `<hr>`) within the dropdown
+.dropdown-divider {
+  @include nav-divider($dropdown-divider-bg, $dropdown-divider-margin-y, true);
+}
+
+.dropdown-item {
+  color: $dropdown-link-color;
+
+  @include hover-focus() {
+    color: $dropdown-link-hover-color;
+    @include gradient-bg($dropdown-link-hover-bg);
+  }
+
+  &.active,
+  &:active {
+    color: $dropdown-link-active-color;
+    @include gradient-bg($dropdown-link-active-bg);
+  }
+
+  &.disabled,
+  &:disabled {
+    color: $dropdown-link-disabled-color;
+    background-color: transparent;
+  }
+}
+
+// Dropdown section headers
+.dropdown-header {
+  color: $dropdown-header-color;
+}
+
+// Dropdown text
+.dropdown-item-text {
+  color: $dropdown-link-color;
+}

src/style/bootstrap-color-theme/_forms.scss

@@ -0,0 +1,59 @@
+// stylelint-disable selector-no-qualifying-type
+
+//
+// Textual form controls
+//
+
+.form-control {
+  color: $input-color;
+  background-color: $input-bg;
+  border-color: $input-border-color;
+
+  @include box-shadow($input-box-shadow);
+
+  &:-moz-focusring {
+    text-shadow: 0 0 0 $input-color;
+  }
+
+  // Customize the `:focus` state to imitate native WebKit styles.
+  @include form-control-focus($ignore-warning: true);
+
+  // Placeholder
+  &::placeholder {
+    color: $input-placeholder-color;
+  }
+
+  &:disabled,
+  &[readonly] {
+    background-color: $input-disabled-bg;
+  }
+}
+
+select.form-control {
+  &:focus::-ms-value {
+    // Suppress the nested default white text on blue background highlight given to
+    // the selected option text when the (still closed) <select> receives focus
+    // in IE and (under certain conditions) Edge, as it looks bad and cannot be made to
+    // match the appearance of the native widget.
+    // See https://github.com/twbs/bootstrap/issues/19398.
+    color: $input-color;
+    background-color: $input-bg;
+  }
+}
+
+.form-control-plaintext {
+  color: $input-plaintext-color;
+  background-color: transparent;
+}
+
+
+.form-check-input {
+  &[disabled] ~ .form-check-label,
+  &:disabled ~ .form-check-label {
+    color: $text-muted;
+  }
+}
+
+@each $state, $data in $form-validation-states {
+  @include form-validation-state($state, map-get($data, color), map-get($data, icon));
+}

src/style/bootstrap-color-theme/_images.scss

@@ -0,0 +1,10 @@
+// Image thumbnails
+.img-thumbnail {
+  background-color: $thumbnail-bg;
+  border-color: $thumbnail-border-color;
+  @include box-shadow($thumbnail-box-shadow);
+}
+
+.figure-caption {
+  color: $figure-caption-color;
+}

src/style/bootstrap-color-theme/_input-group.scss

@@ -0,0 +1,5 @@
+.input-group-text {
+  color: $input-group-addon-color;
+  background-color: $input-group-addon-bg;
+  border-color: $input-group-addon-border-color;
+}

src/style/bootstrap-color-theme/_jumbotron.scss

@@ -0,0 +1,4 @@
+.jumbotron {
+  color: $jumbotron-color;
+  background-color: $jumbotron-bg;
+}

src/style/bootstrap-color-theme/_list-group.scss

@@ -0,0 +1,41 @@
+.list-group-item-action {
+  color: $list-group-action-color;
+
+  @include hover-focus() {
+    color: $list-group-action-hover-color;
+    background-color: $list-group-hover-bg;
+  }
+
+  &:active {
+    color: $list-group-action-active-color;
+    background-color: $list-group-action-active-bg;
+  }
+}
+
+.list-group-item {
+  color: $list-group-color;
+  background-color: $list-group-bg;
+  border-color: $list-group-border-color;
+
+  &.disabled,
+  &:disabled {
+    color: $list-group-disabled-color;
+    background-color: $list-group-disabled-bg;
+  }
+
+  // Include both here for `<a>`s and `<button>`s
+  &.active {
+    color: $list-group-active-color;
+    background-color: $list-group-active-bg;
+    border-color: $list-group-active-border-color;
+  }
+}
+
+// Contextual variants
+//
+// Add modifier classes to change text and background color on individual items.
+// Organizationally, this must come after the `:hover` states.
+
+@each $color, $value in $theme-colors {
+  @include list-group-item-variant($color, theme-color-level($color, -9), theme-color-level($color, 6));
+}

src/style/bootstrap-color-theme/_modal.scss

@@ -0,0 +1,35 @@
+&.modal-open .modal {
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+// Actual modal
+.modal-content {
+  background-color: $modal-content-bg;
+  border-color: $modal-content-border-color;
+  @include box-shadow($modal-content-box-shadow-xs);
+}
+
+// Modal background
+.modal-backdrop {
+  background-color: $modal-backdrop-bg;
+}
+
+// Modal header
+// Top section of the modal w/ title and dismiss
+.modal-header {
+  border-bottom: $modal-header-border-width solid $modal-header-border-color;
+}
+
+
+// Footer (for actions)
+.modal-footer {
+  border-top: $modal-footer-border-width solid $modal-footer-border-color;
+}
+
+// Scale up the modal
+@include media-breakpoint-up(sm) {
+  .modal-content {
+    @include box-shadow($modal-content-box-shadow-sm-up);
+  }
+}

src/style/bootstrap-color-theme/_nav.scss

@@ -0,0 +1,36 @@
+.nav-link {
+  &.disabled {
+    color: $nav-link-disabled-color;
+  }
+}
+
+.nav-tabs {
+  border-bottom-color: $nav-tabs-border-color;
+
+  .nav-link {
+    @include hover-focus() {
+      border-color: $nav-tabs-link-hover-border-color;
+    }
+
+    &.disabled {
+      color: $nav-link-disabled-color;
+      background-color: transparent;
+      border-color: transparent;
+    }
+  }
+
+  .nav-link.active,
+  .nav-item.show .nav-link {
+    color: $nav-tabs-link-active-color;
+    background-color: $nav-tabs-link-active-bg;
+    border-color: $nav-tabs-link-active-border-color;
+  }
+}
+
+.nav-pills {
+  .nav-link.active,
+  .show > .nav-link {
+    color: $nav-pills-link-active-color;
+    background-color: $nav-pills-link-active-bg;
+  }
+}

src/style/bootstrap-color-theme/_navbar.scss

@@ -0,0 +1,104 @@
+// Button for toggling the navbar when in its collapsed state
+.navbar-toggler {
+  background-color: transparent; // remove default button style
+}
+
+// Navbar themes
+//
+// Styles for switching between navbars with light or dark background.
+
+// Dark links against a light background
+.navbar-light {
+  .navbar-brand {
+    color: $navbar-light-brand-color;
+
+    @include hover-focus() {
+      color: $navbar-light-brand-hover-color;
+    }
+  }
+
+  .navbar-nav {
+    .nav-link {
+      color: $navbar-light-color;
+
+      @include hover-focus() {
+        color: $navbar-light-hover-color;
+      }
+
+      &.disabled {
+        color: $navbar-light-disabled-color;
+      }
+    }
+
+    .show > .nav-link,
+    .active > .nav-link,
+    .nav-link.show,
+    .nav-link.active {
+      color: $navbar-light-active-color;
+    }
+  }
+
+  .navbar-toggler {
+    color: $navbar-light-color;
+    border-color: $navbar-light-toggler-border-color;
+  }
+
+  .navbar-text {
+    color: $navbar-light-color;
+    a {
+      color: $navbar-light-active-color;
+
+      @include hover-focus() {
+        color: $navbar-light-active-color;
+      }
+    }
+  }
+}
+
+// White links against a dark background
+.navbar-dark {
+  .navbar-brand {
+    color: $navbar-dark-brand-color;
+
+    @include hover-focus() {
+      color: $navbar-dark-brand-hover-color;
+    }
+  }
+
+  .navbar-nav {
+    .nav-link {
+      color: $navbar-dark-color;
+
+      @include hover-focus() {
+        color: $navbar-dark-hover-color;
+      }
+
+      &.disabled {
+        color: $navbar-dark-disabled-color;
+      }
+    }
+
+    .show > .nav-link,
+    .active > .nav-link,
+    .nav-link.show,
+    .nav-link.active {
+      color: $navbar-dark-active-color;
+    }
+  }
+
+  .navbar-toggler {
+    color: $navbar-dark-color;
+    border-color: $navbar-dark-toggler-border-color;
+  }
+
+  .navbar-text {
+    color: $navbar-dark-color;
+    a {
+      color: $navbar-dark-active-color;
+
+      @include hover-focus() {
+        color: $navbar-dark-active-color;
+      }
+    }
+  }
+}

src/style/bootstrap-color-theme/_pagination.scss

@@ -0,0 +1,30 @@
+.page-link {
+  color: $pagination-color;
+  background-color: $pagination-bg;
+  border-color: $pagination-border-color;
+
+  &:hover {
+    color: $pagination-hover-color;
+    background-color: $pagination-hover-bg;
+    border-color: $pagination-hover-border-color;
+  }
+
+  &:focus {
+    outline: $pagination-focus-outline;
+    box-shadow: $pagination-focus-box-shadow;
+  }
+}
+
+.page-item {
+  &.active .page-link {
+    color: $pagination-active-color;
+    background-color: $pagination-active-bg;
+    border-color: $pagination-active-border-color;
+  }
+
+  &.disabled .page-link {
+    color: $pagination-disabled-color;
+    background-color: $pagination-disabled-bg;
+    border-color: $pagination-disabled-border-color;
+  }
+}

src/style/bootstrap-color-theme/_popover.scss

@@ -0,0 +1,80 @@
+.popover {
+  background-color: $popover-bg;
+  border: $popover-border-width solid $popover-border-color;
+  @include box-shadow($popover-box-shadow);
+}
+
+.bs-popover-top {
+  > .arrow {
+    &::before {
+      border-top-color: $popover-arrow-outer-color;
+    }
+
+    &::after {
+      border-top-color: $popover-arrow-color;
+    }
+  }
+}
+
+.bs-popover-right {
+  > .arrow {
+    &::before {
+      border-right-color: $popover-arrow-outer-color;
+    }
+
+    &::after {
+      border-right-color: $popover-arrow-color;
+    }
+  }
+}
+
+.bs-popover-bottom {
+  > .arrow {
+    &::before {
+      border-bottom-color: $popover-arrow-outer-color;
+    }
+
+    &::after {
+      border-bottom-color: $popover-arrow-color;
+    }
+  }
+}
+
+.bs-popover-left {
+  > .arrow {
+    &::before {
+      border-left-color: $popover-arrow-outer-color;
+    }
+
+    &::after {
+      border-left-color: $popover-arrow-color;
+    }
+  }
+}
+
+.bs-popover-auto {
+  &[x-placement^="top"] {
+    @extend .bs-popover-top;
+  }
+  &[x-placement^="right"] {
+    @extend .bs-popover-right;
+  }
+  &[x-placement^="bottom"] {
+    @extend .bs-popover-bottom;
+  }
+  &[x-placement^="left"] {
+    @extend .bs-popover-left;
+  }
+}
+
+
+// Offset the popover to account for the popover arrow
+.popover-header {
+  color: $popover-header-color;
+  background-color: $popover-header-bg;
+  border-bottom-color: darken($popover-header-bg, 5%);
+}
+
+.popover-body {
+  color: $popover-body-color;
+}

src/style/bootstrap-color-theme/_progress.scss

@@ -0,0 +1,9 @@
+.progress {
+  background-color: $progress-bg;
+  @include box-shadow($progress-box-shadow);
+}
+
+.progress-bar {
+  color: $progress-bar-color;
+  background-color: $progress-bar-bg;
+}

src/style/bootstrap-color-theme/_reboot.scss

@@ -0,0 +1,22 @@
+& {
+  color: $body-color;
+  background-color: $body-bg; // 2
+}
+
+a {
+  color: $link-color;
+  background-color: transparent; // Remove the gray background on active links in IE 10.
+
+  @include hover() {
+    color: $link-hover-color;
+  }
+}
+
+caption {
+  color: $table-caption-color;
+}
+
+button:focus {
+  outline: 1px dotted;
+  outline: 5px auto -webkit-focus-ring-color;
+}

src/style/bootstrap-color-theme/_spinners.scss

@@ -0,0 +1,8 @@
+.spinner-border {
+  border-color: currentColor;
+  border-right-color: transparent;
+}
+
+.spinner-grow {
+  background-color: currentColor;
+}

src/style/bootstrap-color-theme/_tables.scss

@@ -0,0 +1,123 @@
+//
+// Basic Bootstrap table
+//
+
+.table {
+  color: $table-color;
+  background-color: $table-bg; // Reset for nesting within parents with `background-color`.
+
+  th,
+  td {
+    border-top-color: $table-border-color;
+  }
+
+  thead th {
+    border-bottom-color: $table-border-color;
+  }
+
+  tbody + tbody {
+    border-top-color: $table-border-color;
+  }
+}
+
+
+
+// Border versions
+//
+// Add or remove borders all around the table and between all the columns.
+
+.table-bordered {
+  border-color: $table-border-color;
+
+  th,
+  td {
+    border-color: $table-border-color;
+  }
+}
+
+
+// Zebra-striping
+//
+// Default zebra-stripe styles (alternating gray and transparent backgrounds)
+
+.table-striped {
+  tbody tr:nth-of-type(#{$table-striped-order}) {
+    background-color: $table-accent-bg;
+  }
+}
+
+
+// Hover effect
+//
+// Placed here since it has to come after the potential zebra striping
+
+.table-hover {
+  tbody tr {
+    @include hover() {
+      color: $table-hover-color;
+      background-color: $table-hover-bg;
+    }
+  }
+}
+
+
+// Table backgrounds
+//
+// Exact selectors below required to override `.table-striped` and prevent
+// inheritance to nested tables.
+
+@each $color, $value in $theme-colors {
+  @include table-row-variant($color, theme-color-level($color, $table-bg-level), theme-color-level($color, $table-border-level));
+}
+
+@include table-row-variant(active, $table-active-bg);
+
+
+// Dark styles
+//
+// Same table markup, but inverted color scheme: dark background and light text.
+
+// stylelint-disable-next-line no-duplicate-selectors
+.table {
+  .thead-dark {
+    th {
+      color: $table-dark-color;
+      background-color: $table-dark-bg;
+      border-color: $table-dark-border-color;
+    }
+  }
+
+  .thead-light {
+    th {
+      color: $table-head-color;
+      background-color: $table-head-bg;
+      border-color: $table-border-color;
+    }
+  }
+}
+
+.table-dark {
+  color: $table-dark-color;
+  background-color: $table-dark-bg;
+
+  th,
+  td,
+  thead th {
+    border-color: $table-dark-border-color;
+  }
+
+  &.table-striped {
+    tbody tr:nth-of-type(#{$table-striped-order}) {
+      background-color: $table-dark-accent-bg;
+    }
+  }
+
+  &.table-hover {
+    tbody tr {
+      @include hover() {
+        color: $table-dark-hover-color;
+        background-color: $table-dark-hover-bg;
+      }
+    }
+  }
+}

src/style/bootstrap-color-theme/_toasts.scss

@@ -0,0 +1,11 @@
+.toast {
+  color: $toast-color;
+  background-color: $toast-background-color;
+  border-color: $toast-border-color;
+}
+
+.toast-header {
+  color: $toast-header-color;
+  background-color: $toast-header-background-color;
+  border-bottom-color: $toast-header-border-color;
+}

src/style/bootstrap-color-theme/_tooltip.scss

@@ -0,0 +1,52 @@
+.bs-tooltip-top {
+  .arrow {
+    &::before {
+      border-top-color: $tooltip-arrow-color;
+    }
+  }
+}
+
+.bs-tooltip-right {
+  .arrow {
+    &::before {
+      border-right-color: $tooltip-arrow-color;
+    }
+  }
+}
+
+.bs-tooltip-bottom {
+  .arrow {
+    &::before {
+      border-bottom-color: $tooltip-arrow-color;
+    }
+  }
+}
+
+.bs-tooltip-left {
+  .arrow {
+    &::before {
+      border-left-color: $tooltip-arrow-color;
+    }
+  }
+}
+
+.bs-tooltip-auto {
+  &[x-placement^="top"] {
+    @extend .bs-tooltip-top;
+  }
+  &[x-placement^="right"] {
+    @extend .bs-tooltip-right;
+  }
+  &[x-placement^="bottom"] {
+    @extend .bs-tooltip-bottom;
+  }
+  &[x-placement^="left"] {
+    @extend .bs-tooltip-left;
+  }
+}
+
+// Wrapper for the tooltip content
+.tooltip-inner {
+  color: $tooltip-color;
+  background-color: $tooltip-bg;
+}

src/style/bootstrap-color-theme/_type.scss

@@ -0,0 +1,28 @@
+// stylelint-disable declaration-no-important, selector-list-comma-newline-after
+
+//
+// Headings
+//
+
+h1, h2, h3, h4, h5, h6,
+.h1, .h2, .h3, .h4, .h5, .h6 {
+  color: $headings-color;
+}
+
+//
+// Horizontal rules
+//
+
+hr {
+  border-top-color: $hr-border-color;
+}
+
+mark,
+.mark {
+  background-color: $mark-bg;
+}
+
+
+.blockquote-footer {
+  color: $blockquote-small-color;
+}

src/style/bootstrap-color-theme/include.scss

@@ -0,0 +1,33 @@
+@import "../../../node_modules/bootstrap/scss/functions";
+@import "../../../node_modules/bootstrap/scss/variables";
+@import "../../../node_modules/bootstrap/scss/mixins";
+
+@import "reboot";
+@import "type";
+@import "images";
+@import "code";
+@import "tables";
+@import "forms";
+@import "buttons";
+@import "dropdown";
+@import "input-group";
+@import "nav";
+@import "navbar";
+@import "card";
+@import "breadcrumb";
+@import "pagination";
+@import "badge";
+@import "jumbotron";
+@import "alert";
+@import "progress";
+@import "list-group";
+@import "close";
+@import "toasts";
+@import "modal";
+@import "tooltip";
+@import "popover";
+@import "carousel";
+@import "spinners";
+@import "utilities/background";
+@import "utilities/borders";
+@import "utilities/text";

src/style/bootstrap-color-theme/utilities/_background.scss

@@ -0,0 +1,15 @@
+// stylelint-disable declaration-no-important
+
+@each $color, $value in $theme-colors {
+  @include bg-variant(".bg-#{$color}", $value, true);
+}
+
+@if $enable-gradients {
+  @each $color, $value in $theme-colors {
+    @include bg-gradient-variant(".bg-gradient-#{$color}", $value, true);
+  }
+}
+
+.bg-white {
+  background-color: $white !important;
+}

src/style/bootstrap-color-theme/utilities/_borders.scss

@@ -0,0 +1,21 @@
+// stylelint-disable property-blacklist, declaration-no-important
+
+//
+// Border
+//
+
+.border         { border-color: $border-color !important; }
+.border-top     { border-top-color: $border-color !important; }
+.border-right   { border-right-color: $border-color !important; }
+.border-bottom  { border-bottom-color: $border-color !important; }
+.border-left    { border-left-color: $border-color !important; }
+
+@each $color, $value in $theme-colors {
+  .border-#{$color} {
+    border-color: $value !important;
+  }
+}
+
+.border-white {
+  border-color: $white !important;
+}

src/style/bootstrap-color-theme/utilities/_text.scss

@@ -0,0 +1,13 @@
+// Contextual colors
+
+.text-white { color: $white !important; }
+
+@each $color, $value in $theme-colors {
+  @include text-emphasis-variant(".text-#{$color}", $value, true);
+}
+
+.text-body { color: $body-color !important; }
+.text-muted { color: $text-muted !important; }
+
+.text-black-50 { color: rgba($black, .5) !important; }
+.text-white-50 { color: rgba($white, .5) !important; }

src/style/dark.scss

@@ -0,0 +1,128 @@
+//
+// Color system
+//
+
+$white: #fff;
+$gray-100: #f8f9fa;
+$gray-200: #ebebeb;
+$gray-300: #dee2e6;
+$gray-400: #ced4da;
+$gray-500: #adb5bd;
+$gray-600: #888;
+$gray-700: #444;
+$gray-800: #303030;
+$gray-900: #222;
+$black: #000;
+
+$blue: #337ab7;
+$indigo: #6610f2;
+$purple: #6f42c1;
+$pink: #e83e8c;
+$red: #e74c3c;
+$orange: #fd7e14;
+$yellow: #f39c12;
+$green: #00bc8c;
+$teal: #20c997;
+$cyan: #5EB7E0;
+
+$primary: $blue;
+$secondary: $white;
+$success: $green;
+$info: $cyan;
+$warning: $yellow;
+$danger: $red;
+$light: $gray-900;
+$dark: $white;
+
+$yiq-contrasted-threshold: 175;
+
+// Body
+$body-bg: $light;
+$body-color: $dark;
+
+// Links
+$link-color: $cyan;
+
+// Fonts
+$text-muted: $gray-400;
+
+// Tables
+$table-accent-bg: $gray-800;
+$table-border-color: $gray-700;
+
+// Forms
+$input-border-color: $body-bg;
+$input-group-addon-color: $gray-500;
+$input-group-addon-bg: $gray-700;
+$input-bg: $gray-700;
+$input-placeholder-color: $gray-500;
+$input-color: $white;
+$input-disabled-bg: $gray-900;
+
+$custom-file-color: $gray-500;
+$custom-file-border-color: $body-bg;
+
+// Dropdowns
+$dropdown-bg: $gray-900;
+$dropdown-border-color: $gray-700;
+$dropdown-divider-bg: $gray-700;
+$dropdown-link-color: $white;
+$dropdown-link-hover-color: $white;
+$dropdown-link-hover-bg: $primary;
+
+// Navs
+$nav-link-disabled-color: $gray-500;
+$nav-tabs-border-color: $gray-700;
+$nav-tabs-link-hover-border-color: $nav-tabs-border-color $nav-tabs-border-color transparent;
+$nav-tabs-link-active-color: $white;
+$nav-tabs-link-active-border-color: $nav-tabs-border-color $nav-tabs-border-color transparent;
+
+// Navbar
+$navbar-dark-color: rgba($white, .6);
+$navbar-dark-hover-color: $white;
+$navbar-light-color: rgba($gray-900, .7);
+$navbar-light-hover-color: $gray-900;
+$navbar-light-active-color: $gray-900;
+$navbar-light-toggler-border-color: rgba($gray-900, .1);
+
+// Jumbotron
+$jumbotron-bg: $gray-800;
+
+// Cards
+$card-cap-bg: $gray-700;
+$card-bg: $gray-800;
+
+// Popovers
+$popover-bg: $gray-800;
+$popover-header-bg: $gray-700;
+
+// Toasts
+$toast-background-color: $gray-700;
+$toast-header-background-color: $gray-800;
+
+// Modals
+$modal-content-bg: $gray-800;
+$modal-content-border-color: $gray-700;
+$modal-header-border-color: $gray-700;
+
+// Progress bars
+$progress-bg: $gray-700;
+
+// List group
+$list-group-bg: $gray-800;
+$list-group-border-color: $gray-700;
+$list-group-hover-bg: $gray-700;
+
+// Breadcrumbs
+$breadcrumb-bg: $gray-700;
+
+// Close
+$close-color: $white;
+$close-text-shadow: none;
+
+// Code
+$pre-color: $dark;
+
+body.dark {
+  @import "bootstrap-color-theme/include";
+}

src/style/index.scss

@@ -1,15 +1,23 @@
+@import './light';
 @import "../../node_modules/bootstrap/scss/bootstrap";
 @import '../../node_modules/react-bootstrap-typeahead/css/Typeahead';
 @import "fonts/source-code-pro/source-code-pro";
 @import "fonts/twemoji/twemoji";
 
+.text-black, body.dark .text-black {
+  color: $black;
+}
+
+body {
+  background-color: darken($dark, 8%);
+}
+
 html {
   height: 100%;
 }
 
 body {
   min-height: 100%;
-  background-color: darken($dark, 8%);
   font-family: "Source Sans Pro", Helvetica, Arial, twemoji, sans-serif;
 }
 

src/style/light.scss

@@ -0,0 +1,7 @@
+$blue:    #337ab7 !default;
+$cyan:    #5EB7E0 !default;
+
+@import "../../node_modules/bootstrap/scss/functions";
+@import "../../node_modules/bootstrap/scss/variables";
+@import "../../node_modules/bootstrap/scss/mixins";
+