diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 48535073..4184cb50 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -23,6 +23,11 @@ $component-active-bg: $magenta;
 $btn-white-space: nowrap;
 $font-weight-bolder: 700;
 $zindex-modal-backdrop: 0;
+$modal-content-bg: var(--background);
+$card-bg: var(--background);
+$card-border-color: var(--card-border-color);
+$input-bg: var(--background);
+$input-color: var(--foreground);
 
 $spacers: (
   2-plus: 0.75rem
@@ -63,6 +68,7 @@ $sizes: (
   --foreground: #{$black};
   --background: #{$white};
   --color: #{$magenta};
+  --card-border-color: #{rgba($black, .125)};
 }
 
 @media (prefers-color-scheme: dark) {
@@ -70,6 +76,7 @@ $sizes: (
     --foreground: #{$white};
     --background: #{$black};
     --color: #{$cyan};
+    --card-border-color: #{rgba($white, .125)};
   }
 
   .btn-secondary {
diff --git a/app/assets/stylesheets/dark.scss b/app/assets/stylesheets/dark.scss
index f7f3a09d..a5a1f837 100644
--- a/app/assets/stylesheets/dark.scss
+++ b/app/assets/stylesheets/dark.scss
@@ -6,6 +6,7 @@ $cyan: #13fefe;
   --foreground: #{$white};
   --background: #{$black};
   --color: #{$cyan};
+  --card-border-color: #{rgba($white, .125)};
 }
 
 .btn {