diff --git a/scss/_dark.scss b/scss/_dark.scss
index ae2fd1f45fb89829a001ac324aca019908c6a94c..3de52352f0013b7e531da6fee625919f3d4dcdd9 100644
--- a/scss/_dark.scss
+++ b/scss/_dark.scss
@@ -1,6 +1,6 @@
 // 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;
+  }
+}
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 87a4e2e63b6c8b3ad8cea454464243ddc7721991..cf2799199308d5cf48312ae349a2f229c809ccbd 100644
--- a/scss/_variables.scss
+++ b/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;
diff --git a/scss/ui/_examples.scss b/scss/ui/_examples.scss
index 423c900b6b1067afea6227c508362feb5a106018..00eeb1022ee1fb4c318bde4a88f9369628cae3f9 100644
--- a/scss/ui/_examples.scss
+++ b/scss/ui/_examples.scss
@@ -6,7 +6,7 @@
 }
 
 .example-bg {
-  background: $body-bg;
+  background: $min-black;
 }
 
 .example + .highlight {