diff --git a/app/static/scss/_colours.scss b/app/static/scss/_colours.scss
index 5e222a06..83a6b470 100644
--- a/app/static/scss/_colours.scss
+++ b/app/static/scss/_colours.scss
@@ -2,6 +2,7 @@ $primary-colour: #0071CE;
 $primary-colour-hover: #0A5CA0;
 $green: #00b550;
 $green-hover: #83f188;
+$lightest-grey: #eee;
 $light-grey: #ddd;
 $grey: #bbb;
 $dark-grey: #777;
diff --git a/app/static/styles.css b/app/static/styles.css
index 41dc628c..40988b41 100644
--- a/app/static/styles.css
+++ b/app/static/styles.css
@@ -567,6 +567,15 @@ div.navbar {
   border-color: #424549;
 }
 
+[data-bs-theme=dark] .form-control {
+  background-color: #424549;
+  color: #eee;
+}
+[data-bs-theme=dark] .form-control:focus {
+  background-color: #424549;
+  color: #eee;
+}
+
 .community_icon {
   width: 20vw;
   height: 20vw;
diff --git a/app/static/styles.scss b/app/static/styles.scss
index a969f3e4..158a72c0 100644
--- a/app/static/styles.scss
+++ b/app/static/styles.scss
@@ -142,6 +142,15 @@ div.navbar {
   border-color: $super-dark-grey;
 }
 
+[data-bs-theme=dark] .form-control {
+  background-color: $super-dark-grey;
+  color: $lightest-grey;
+  &:focus {
+    background-color: $super-dark-grey;
+    color: $lightest-grey;
+  }
+}
+
 .community_icon {
   width: 20vw;
   height: 20vw;