dark mode media query

scss/_dark.scss

 // stylelint-disable declaration-no-important
 
-body.theme-dark {
+@mixin dark-mode {
   color: #afbdd1;
   background: $dark;
 
@@ -29,3 +29,12 @@ body.theme-dark {
   }
 }
 
+body.theme-dark {
+  @include dark-mode;
+}
+
+@media (prefers-color-scheme: dark) {
+  body {
+    @include dark-mode;
+  }
+}

scss/_variables.scss

@@ -262,6 +262,8 @@ $yiq-contrasted-threshold: 200 !default;
 
 $card-border-color: $border-color !default;
 $list-group-border-color: $border-color !default;
+$list-group-action-color: inherit !default;
+
 $body-color: $dark !default;
 
 $input-disabled-bg: $gray-100 !default;

scss/ui/_examples.scss

@@ -6,7 +6,7 @@
 }
 
 .example-bg {
-  background: $body-bg;
+  background: $min-black;
 }
 
 .example + .highlight {