Add adaptive dark mode theme to PUI

Refactor all Sass color vars as CSS vars,
Add *-dark.scss file counterparts,
Add Bootstrap-Dark v4.6.1 and customize it,

.prettierignore

@@ -5,4 +5,5 @@
 frontend/app/assets/javascripts/twitter/
 frontend/vendor/
 public/app/assets/javascripts/bootstrap-accessibility/
-public/vendor/assets/javascripts/
+public/app/assets/stylesheets/foundation
+public/vendor/

.stylelintignore

@@ -1,2 +1,3 @@
 frontend/vendor/
 public/app/assets/stylesheets/foundation
+public/vendor/

.stylelintrc

@@ -11,6 +11,7 @@
     "scss/at-rule-no-unknown": true,
     "no-descending-specificity": null,
     "no-duplicate-selectors": null,
+    "custom-property-empty-line-before": null,
     "font-family-no-missing-generic-family-keyword": [
       true,
       {

public/app/assets/stylesheets/application.scss

@@ -23,6 +23,7 @@
 // "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables"
 @import 'bootstrap-sprockets';
 @import 'bootstrap';
+@import 'bootstrap-dark/bootstrap-dark';
 
 //font-awesome
 @import 'font-awesome-sprockets';
@@ -31,10 +32,14 @@
 // @import "load-awesome/line-spin-clockwise-fade.css";
 @import 'foundation/_functions.scss';
 @import 'archivesspace/aspace';
+@import 'archivesspace/aspace-dark';
+@import 'archivesspace/bootstrap-dark-overrides.scss';
 @import 'archivesspace/record-type-badge';
 
 @import 'archivesspace/infinite-scroll';
+@import 'archivesspace/infinite-scroll-dark.scss';
 @import 'archivesspace/largetree';
+@import 'archivesspace/largetree-dark.scss';
 @import 'archivesspace/mixed-content';
 
 @import 'archivesspace/helpers.scss';

public/app/assets/stylesheets/archivesspace/aspace-dark.scss

@@ -0,0 +1,117 @@
+/*
+ * This file overrides some color rules from aspace.scss for 
+ * users who prefer dark mode.
+ *
+ * Color changes in aspace.scss should be considered here as well.
+ */
+@media (prefers-color-scheme: dark) {
+  body {
+    color: var(--primary-text-color);
+    background-color: var(--primary-bg-color);
+  }
+
+  a {
+    color: var(--link-color);
+  }
+  a:hover,
+  a:focus {
+    color: var(--link-hover-color);
+  }
+
+  .tabbing.navbar-default {
+    background-color: var(--primary-bg-color);
+    border-color: transparent;
+  }
+
+  .more-facets {
+    .btn {
+      color: var(--secondary-text-color);
+    }
+  }
+
+  .tabbing.nav-pills > li > a {
+    background-color: var(--btn-primary-bg-color);
+  }
+
+  .tabbing.nav-pills > li > a.disabled-nav-pill:hover {
+    color: var(--disabled-text-color);
+  }
+
+  #sidebar {
+    border: 1px solid var(--secondary-border-color);
+  }
+
+  .recordrow {
+    h3 {
+      color: var(--primary-color);
+    }
+  }
+
+  h3,
+  .h3 {
+    color: var(--primary-color);
+  }
+
+  .searchterm {
+    color: var(--primary-bg-color);
+  }
+
+  button.accession {
+    color: var(--accession-color);
+  }
+  button.digital_object {
+    color: var(--collection-color);
+  }
+  button.object {
+    color: var(--collection-color);
+  }
+  button.collection,
+  button.resource {
+    color: var(--collection-color);
+  }
+  button.subject {
+    /* class subject also turns up in finding aid transforms */
+    color: var(--subject-color);
+  }
+  button.agent {
+    color: var(--agent-color);
+  }
+
+  button.person {
+    color: var(--agent-color);
+  }
+  button.record {
+    color: var(--record-color);
+  }
+  button.classification {
+    color: var(--repository-color);
+  }
+
+  span.required {
+    color: var(--highlight);
+  }
+
+  .breadcrumb > li + li::before {
+    color: var(--secondary-color);
+  }
+
+  .sorter select[name='sort'] {
+    background: var(--secondary-bg-color);
+    color: var(--secondary-text-color);
+    border: 1px solid var(--secondary-border-color);
+    border-radius: 4px;
+  }
+  .sorter select[name='sort']:focus {
+    color: var(--primary-text-color);
+    border-color: var(--primary-color);
+  }
+
+  @media (min-width: 992px) {
+    #sidebar.resizable-sidebar {
+      .resizable-sidebar-handle {
+        background-color: var(--resizable-sidebar-handle-bg-color);
+        border-right: 1px solid var(--secondary-border-color);
+      }
+    }
+  }
+}