diff --git a/inst/lib/bsw4/dist/slate/_bootswatch.scss b/inst/lib/bsw4/dist/slate/_bootswatch.scss
index 8a98f05..78b141a 100644
--- a/inst/lib/bsw4/dist/slate/_bootswatch.scss
+++ b/inst/lib/bsw4/dist/slate/_bootswatch.scss
@@ -5,7 +5,7 @@
 // Mixins ======================================================================

 @mixin btn-shadow($color){
-  @include gradient-y-three-colors(lighten($color, 6%), $color, 60%, darken($color, 4%));
+  @include gradient-y-three-colors(lighten($color, 16%), $color, 60%, darken($color, 14%));
   filter: none;
 }

@@ -17,15 +17,15 @@
 // Navbar ======================================================================

 .navbar {
-  border: 1px solid rgba(0, 0, 0, .6);
-  text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
+  border: 1px solid rgba($contrast-fg, .6);
+  text-shadow: 1px 1px 1px rgba($contrast-fg, .3);

   .container {
     padding: 0;
   }

   .navbar-toggler {
-    border-color: rgba(0, 0, 0, .6);
+    border-color: rgba($contrast-fg, .6);
   }

   &-fixed-top {
@@ -38,25 +38,25 @@

   .nav-link {
     padding: 1rem;
-    border-left: 1px solid rgba(255, 255, 255, .1);
-    border-right: 1px solid rgba(0, 0, 0, .2);
+    border-left: 1px solid rgba($contrast-bg, .1);
+    border-right: 1px solid rgba($contrast-fg, .2);

     &:hover,
     &:focus {
-      @include btn-shadow-inverse($gray-800);
-      border-left: 1px solid rgba(0, 0, 0, .2);
+      @include btn-shadow-inverse(body-mix(100%));
+      border-left: 1px solid rgba($contrast-fg, .2);
     }
   }

   &-brand {
     padding: .75rem 1rem subtract(24px, .75rem);
     margin-right: 0;
-    border-right: 1px solid rgba(0, 0, 0, .2);
+    border-right: 1px solid rgba($contrast-fg, .2);
   }

   .nav-item.active .nav-link {
-    background-color: rgba(0, 0, 0, .3);
-    border-left: 1px solid rgba(0, 0, 0, .2);
+    background-color: rgba($contrast-fg, .3);
+    border-left: 1px solid rgba($contrast-fg, .2);
   }

   &-nav .nav-item + .nav-item {
@@ -64,13 +64,13 @@
   }

   &.bg-light {
-    text-shadow: 1px 1px 1px rgba(0, 0, 0, .1);
+    text-shadow: 1px 1px 1px rgba($contrast-fg, .1);

     .nav-link {
       &:hover,
       &:focus {
-        @include btn-shadow-inverse($gray-600);
-        border-left: 1px solid rgba(0, 0, 0, .2);
+        @include btn-shadow-inverse($body-color);
+        border-left: 1px solid rgba($contrast-fg, .2);
       }
     }
   }
@@ -106,12 +106,12 @@
 // Buttons =====================================================================

 .btn {
-  border-color: rgba(0, 0, 0, .6);
-  text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
+  border-color: rgba($contrast-fg, .6);
+  text-shadow: 1px 1px 1px rgba($contrast-fg, .3);

   &:not([disabled]):not(.disabled).active,
   &.disabled {
-    border-color: rgba(0, 0, 0, .6);
+    border-color: rgba($contrast-fg, .6);
     box-shadow: none;
   }

@@ -120,10 +120,24 @@
   &:not([disabled]):not(.disabled):active,
   &:not([disabled]):not(.disabled):active:hover,
   &:not([disabled]):not(.disabled).active:hover {
-    border-color: rgba(0, 0, 0, .6);
+    border-color: rgba($contrast-fg, .6);
   }
 }

+@if variable-exists("default") {
+  .btn-default {
+    @include btn-shadow($default);
+    color: $contrast-bg;
+
+    &:not([disabled]):not(.disabled):hover,
+    &:not([disabled]):not(.disabled):focus,
+    &:not([disabled]):not(.disabled):active,
+    &:not([disabled]):not(.disabled).active {
+      @include btn-shadow-inverse($default);
+    }
+ }
+}
+
 .btn-primary {
   @include btn-shadow($primary);

@@ -148,7 +162,7 @@

 .btn-success {
   @include btn-shadow($success);
-  color: $white;
+  color: $contrast-bg;

   &:not([disabled]):not(.disabled):hover,
   &:not([disabled]):not(.disabled):focus,
@@ -160,7 +174,7 @@

 .btn-info {
   @include btn-shadow($info);
-  color: $white;
+  color: $contrast-bg;

   &:not([disabled]):not(.disabled):hover,
   &:not([disabled]):not(.disabled):focus,
@@ -172,7 +186,7 @@

 .btn-warning {
   @include btn-shadow($warning);
-  color: $white;
+  color: $contrast-bg;

   &:not([disabled]):not(.disabled):hover,
   &:not([disabled]):not(.disabled):focus,
@@ -195,7 +209,7 @@

 .btn-outline {
   &-primary {
-    color: $white;
+    color: $contrast-bg;
   }
 }

@@ -207,7 +221,7 @@
 .btn-group,
 .btn-group-vertical {
   .btn.active {
-    border-color: rgba(0, 0, 0, .6);
+    border-color: rgba($contrast-fg, .6);
   }
 }

@@ -219,7 +233,7 @@ h3,
 h4,
 h5,
 h6 {
-  text-shadow: -1px -1px 0 rgba(0, 0, 0, .3);
+  text-shadow: -1px -1px 0 rgba($contrast-fg, .3);
 }

 // Tables ======================================================================
@@ -231,7 +245,7 @@ h6 {
   &-info,
   &-warning,
   &-danger {
-    color: $white;
+    color: $contrast-bg;
   }

   &-primary {
@@ -385,96 +399,107 @@ h6 {
 // Forms =======================================================================

 legend {
-  color: $white;
+  color: $contrast-bg;
 }

 .input-group-addon {
   @include btn-shadow($secondary);
-  text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
-  color: $white;
+  text-shadow: 1px 1px 1px rgba($contrast-fg, .3);
+  color: $contrast-bg;
 }

 // Navs ========================================================================

 .nav-tabs {
-  .nav-link {
-    @include btn-shadow-inverse($gray-800);
-    border: 1px solid rgba(0, 0, 0, .6);
+  .nav-link, li>a {
+    @include btn-shadow-inverse(body-mix(100%));
+    border: 1px solid rgba($contrast-fg, .6);

     &:not([disabled]):not(.disabled):hover,
     &:not([disabled]):not(.disabled):focus,
     &:not([disabled]):not(.disabled):active,
     &:not([disabled]):not(.disabled).active {
-      @include btn-shadow($gray-800);
+      @include btn-shadow(body-mix(100%));
     }

     &.disabled {
-      border: 1px solid rgba(0, 0, 0, .6);
+      border: 1px solid rgba($contrast-fg, .6);
     }
   }

+  .nav-link.active,
+  .nav-link:hover,
+  li.active>a,
+  li:hover>a {
+    background-color: transparent;
+    @include btn-shadow(body-mix(100%));
+    border: 1px solid rgba($contrast-fg, .6);
+  }
+
   .nav-link,
-  .nav-link:hover {
-    color: $white;
+  .nav-link:hover, li>a {
+    color: $contrast-bg;
   }
 }

 .nav-pills {
-  .nav-link {
-    @include btn-shadow($gray-800);
-    border: 1px solid rgba(0, 0, 0, .6);
-    text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
-    color: $white;
+  .nav-link, li>a {
+    @include btn-shadow-inverse(body-mix(100%));
+    border: 1px solid rgba($contrast-fg, .6);
+    text-shadow: 1px 1px 1px rgba($contrast-fg, .3);
+    color: $contrast-bg;

     &:hover {
-      @include btn-shadow-inverse($gray-800);
-      border: 1px solid rgba(0, 0, 0, .6);
+      @include btn-shadow(body-mix(100%));
+      border: 1px solid rgba($contrast-fg, .6);
     }
   }

   .nav-link.active,
-  .nav-link:hover {
+  .nav-link:hover,
+  li.active>a,
+  li:hover>a {
     background-color: transparent;
-    @include btn-shadow-inverse($gray-800);
-    border: 1px solid rgba(0, 0, 0, .6);
+    @include btn-shadow(body-mix(100%));
+    border: 1px solid rgba($contrast-fg, .6);
   }

   .nav-link.disabled,
   .nav-link.disabled:hover {
-    @include btn-shadow($gray-800);
+    @include btn-shadow(body-mix(100%));
     color: $nav-link-disabled-color;
   }
 }

 .pagination {
   .page-link {
-    text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
-    @include btn-shadow($gray-800);
+    text-shadow: 1px 1px 1px rgba($contrast-fg, .3);
+    @include btn-shadow(body-mix(100%));

     &:hover {
-      @include btn-shadow-inverse($gray-800);
+      @include btn-shadow-inverse(body-mix(100%));
       text-decoration: none;
     }
   }

   .page-item.active .page-link {
-    @include btn-shadow-inverse($gray-800);
+    @include btn-shadow-inverse(body-mix(100%));
   }

   .page-item.disabled .page-link {
-    @include btn-shadow($gray-800);
+    @include btn-shadow(body-mix(100%));
   }
 }

 .breadcrumb {
-  border: 1px solid rgba(0, 0, 0, .6);
-  text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
+  border: 1px solid rgba($contrast-fg, .6);
+  text-shadow: 1px 1px 1px rgba($contrast-fg, .3);
   background-color: transparent;
-  @include btn-shadow($gray-800);
+  @include btn-shadow(body-mix(100%));

   a,
   a:hover {
-    color: $white;
+    color: $contrast-bg;
   }
 }

@@ -482,11 +507,11 @@ legend {

 .alert {
   border: none;
-  color: $white;
+  color: $contrast-bg;

   a,
   .alert-link {
-    color: $white;
+    color: $contrast-bg;
     text-decoration: underline;
   }

@@ -539,18 +539,18 @@ legend {
   &-success,
   &-warning,
   &-info {
-    color: $white;
+    color: $contrast-bg;
   }
 }
 
 // Containers ==================================================================
 
 .jumbotron {
-  border: 1px solid rgba(0, 0, 0, .6);
+  border: 1px solid rgba($contrast-fg, .6);
 }
 
 .list-group {
   &-item-action:hover {
-    background-color: darken($gray-900, 5%);
+    background-color: mix($contrast-fg, $body-bg, 5%);
   }
 }
diff --git a/inst/lib/bsw4/dist/slate/_variables.scss b/inst/lib/bsw4/dist/slate/_variables.scss
index 28c6900..3cb702d 100755
--- a/inst/lib/bsw4/dist/slate/_variables.scss
+++ b/inst/lib/bsw4/dist/slate/_variables.scss
@@ -28,25 +26,47 @@ $green:   #62c462 !default;
 $teal:    #20c997 !default;
 $cyan:    #5bc0de !default;

-$primary:       $gray-800 !default;
-$secondary:     $gray-600 !default;
+// Body
+
+@function body-mix($weight) {
+    @return mix($gray-900, $gray-600, $weight);
+}
+$body-bg:                   body-mix(100%) !default;
+$body-color:                body-mix(0%) !default;
+
+$yiq-contrasted-threshold:  170 !default;
+
+$contrast-bg: color-contrast($body-bg) !default;
+$contrast-fg: color-contrast($contrast-bg) !default;
+@function lighten($color, $percent) {
+   @return mix($contrast-bg, $color, $percent);
+}
+@function darken($color, $percent) {
+   @return mix($contrast-fg, $color, $percent);
+}
+
+$primary:       body-mix(66.7%) !default;
+$secondary:     body-mix(0%) !default;
 $success:       $green !default;
 $info:          $cyan !default;
 $warning:       $yellow !default;
 $danger:        $red !default;
-$light:         $gray-200 !default;
-$dark:          $gray-900 !default;
+// This is inconsistent with Bootstrap semantics. That is, $dark
+// should actually be a light color in a dark mode setting, :shrug:
+// https://github.com/thomaspark/bootswatch/issues/989
+$light:         lighten($body-color, 50%) !default;
+$dark:          $body-bg !default;

-$yiq-contrasted-threshold:  170 !default;
+$enable-shadows: true !default;
+$enable-gradients: true !default;

-// Body
+// Components

-$body-bg:                   $gray-900 !default;
-$body-color:                #aaa !default;
+$component-active-color:    $contrast-bg !default;

 // Links

-$link-color:                $white !default;
+$link-color:                $contrast-bg !default;

 // Fonts

@@ -55,12 +79,12 @@ $font-size-sm:                $font-size-base * .88 !default;

 // Tables

-$table-color:                 $white !default;
-$table-accent-bg:             rgba($white, .05) !default;
-$table-hover-bg:              rgba($white, .075) !default;
-$table-border-color:          rgba($black, .6) !default;
+$table-color:                 $contrast-bg !default;
+$table-accent-bg:             rgba($contrast-bg, .05) !default;
+$table-hover-bg:              rgba($contrast-bg, .075) !default;
+$table-border-color:          rgba($contrast-fg, .6) !default;
 $table-dark-border-color:     $table-border-color !default;
-$table-dark-color:            $white !default;
+$table-dark-color:            $contrast-bg !default;

 // Buttons

@@ -69,56 +93,53 @@ $input-btn-padding-x:         1rem !default;

 // Forms

-$input-disabled-bg:                     #ccc !default;
+$input-disabled-bg:                 mix($contrast-bg, $contrast-fg, 80%) !default;

 // Dropdowns

-$dropdown-bg:                       $gray-800 !default;
-$dropdown-border-color:             rgba($black, .6) !default;
-$dropdown-divider-bg:               rgba($black, .15) !default;
+$dropdown-bg:                       $primary !default;
+$dropdown-border-color:             rgba($contrast-fg, .6) !default;
+$dropdown-divider-bg:               rgba($contrast-fg, .15) !default;
 $dropdown-link-color:               $body-color !default;
-$dropdown-link-hover-color:         $white !default;
+$dropdown-link-hover-color:         $contrast-bg !default;
 $dropdown-link-hover-bg:            $body-bg !default;
 $dropdown-link-active-color:        $dropdown-link-hover-color !default;
 $dropdown-link-active-bg:           $dropdown-link-hover-bg !default;

 // Navs

-$nav-tabs-border-color:             rgba($black, .6) !default;
+$nav-tabs-border-color:             rgba($contrast-fg, .6) !default;
 $nav-tabs-link-hover-border-color:  $nav-tabs-border-color !default;
-$nav-tabs-link-active-color:        $white !default;
+$nav-tabs-link-active-color:        $contrast-bg !default;
 $nav-tabs-link-active-border-color: $nav-tabs-border-color !default;

 // Navbar

 $navbar-padding-y:                  0 !default;
-$navbar-dark-hover-color:           $white !default;
-$navbar-light-hover-color:          $gray-800 !default;
-$navbar-light-active-color:         $gray-800 !default;


 // Pagination

-$pagination-color:                  $white !default;
+$pagination-color:                  $contrast-bg !default;
 $pagination-bg:                     transparent !default;
-$pagination-border-color:           rgba($black, .6) !default;
-$pagination-hover-color:            $white !default;
+$pagination-border-color:           rgba($contrast-fg, .6) !default;
+$pagination-hover-color:            $contrast-bg !default;
 $pagination-hover-bg:               transparent !default;
-$pagination-hover-border-color:     rgba($black, .6) !default;
+$pagination-hover-border-color:     rgba($contrast-fg, .6) !default;
 $pagination-active-bg:              transparent !default;
-$pagination-active-border-color:    rgba($black, .6) !default;
+$pagination-active-border-color:    rgba($contrast-fg, .6) !default;
 $pagination-disabled-bg:            transparent !default;
-$pagination-disabled-border-color:  rgba($black, .6) !default;
+$pagination-disabled-border-color:  rgba($contrast-fg, .6) !default;


 // Jumbotron

-$jumbotron-bg:                      darken($gray-900, 5%) !default;
+$jumbotron-bg:                      darken($body-bg, 5%) !default;

 // Cards

-$card-border-color:                 rgba($black, .6) !default;
-$card-cap-bg:                       lighten($gray-800, 10%) !default;
+$card-border-color:                 rgba($contrast-fg, .6) !default;
+$card-cap-bg:                       lighten($body-bg, 10%) !default;
 $card-bg:                           lighten($body-bg, 5%) !default;

 // Popovers
@@ -128,7 +152,7 @@ $popover-bg:                        lighten($body-bg, 5%) !default;
 // Toasts

 $toast-background-color:            lighten($body-bg, 5%) !default;
-$toast-border-color:                rgba(0, 0, 0, .2) !default;
+$toast-border-color:                rgba($contrast-fg, .2) !default;
 $toast-header-color:                $body-color !default;
 $toast-header-background-color:     $toast-background-color !default;
 $toast-header-border-color:         $toast-border-color !default;
@@ -136,27 +160,27 @@ $toast-header-border-color:         $toast-border-color !default;
 // Modals

 $modal-content-bg:                  lighten($body-bg, 5%) !default;
-$modal-header-border-color:         rgba(0, 0, 0, .2) !default;
+$modal-header-border-color:         rgba($contrast-fg, .2) !default;

 // Progress bars

-$progress-bg:                       darken($gray-900, 5%) !default;
+$progress-bg:                       darken($body-bg, 5%) !default;
 $progress-bar-color:                $gray-600 !default;

 // List group

 $list-group-bg:                     lighten($body-bg, 5%) !default;
-$list-group-border-color:           rgba($black, .6) !default;
+$list-group-border-color:           rgba($contrast-fg, .6) !default;
 $list-group-hover-bg:               lighten($body-bg, 10%) !default;
-$list-group-active-color:           $white !default;
+$list-group-active-color:           $contrast-bg !default;
 $list-group-active-bg:              $list-group-hover-bg !default;
 $list-group-active-border-color:    $list-group-border-color !default;
-$list-group-disabled-color:         $gray-700 !default;
-$list-group-action-color:           $white !default;
+$list-group-disabled-color:         body-mix(50%) !default;
+$list-group-action-color:           $contrast-bg !default;

 // Breadcrumbs

-$breadcrumb-active-color:           $gray-500 !default;
+$breadcrumb-active-color:           $body-color !default;

 // Code