app/assets/stylesheets/sass-zero/breadboard.scss in sass-zero-0.0.57 vs app/assets/stylesheets/sass-zero/breadboard.scss in sass-zero-0.0.58

@@ -10,13 +10,24 @@
   --color-bg--main:      #{$white};
   --color-bg--surface:   #{$gray-100};
   --color-bg--highlight: #{$gray-200};
   --color-primary:       #{$gray-900};
   --color-text:          #{$gray-900};
-  --color-focus-ring:    #{rgba($gray-900, $opacity-50)};
+  --color-focus-ring:    #{rgba($black, $opacity-60)};
 }
 
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-bg--main:      #{$gray-900};
+    --color-bg--surface:   #{$gray-800};
+    --color-bg--highlight: #{$gray-700};
+    --color-primary:       #{$white};
+    --color-text:          #{$white};
+    --color-focus-ring:    #{rgba($white, $opacity-60)};
+  }
+}
+
 html {
   accent-color: var(--color-primary);
   background: var(--color-bg--main);
   color: var(--color-text);
   font-family: $font-family;
@@ -59,18 +70,20 @@
 }
 
 .input {
   resize: none;
   appearance: none;
-  background-color: $transparent;
+  background-color: var(--color-bg--main);
   border-radius: $radius-input;
   border-width: $border;
   padding: $size-2 $size-3;
   width: $w-full;
 
   &--select {
-    background-image: linear-gradient(45deg, transparent 49%, var(--color-text) 51%), linear-gradient(135deg, var(--color-text) 51%, transparent 49%);
+    background-image:
+      linear-gradient(45deg, transparent 49%, var(--color-text) 51%),
+      linear-gradient(135deg, var(--color-text) 51%, transparent 49%);
     background-position: calc(100% - 20px), calc(100% - 15px);
     background-repeat: no-repeat;
     background-size: 5px 5px, 5px 5px;
   }
 
@@ -101,11 +114,11 @@
 
 code {
   background-color: var(--color-bg--surface);
   border-radius: $rounded;
   font-size: $text-sm;
-  padding: $size-1 $size-2;
+  padding: $size-1;
   white-space: nowrap;
 }
 
 pre {
   background-color: var(--color-bg--surface);
@@ -122,17 +135,18 @@
 
 kbd {
   background-color: var(--color-primary);
   border-radius: $rounded;
   font-size: $text-sm;
-  padding: $size-1 $size-2;
+  padding: $size-1;
   color: var(--color-bg--main);
 }
 
 mark {
   background-color: var(--color-bg--highlight);
   border-radius: $rounded;
-  padding: $size-1 $size-2;
+  padding: $size-1;
+  color: inherit;
 }
 
 hr {
   margin: $size-6 $size-0;
 }