diff --git a/web-src/src/mystyles.scss b/web-src/src/mystyles.scss
index 44f2fae5..89bfe592 100644
--- a/web-src/src/mystyles.scss
+++ b/web-src/src/mystyles.scss
@@ -3,6 +3,16 @@
 @use 'bulma/bulma';
 @use 'bulma/sass/utilities/mixins';
 
+@media (prefers-color-scheme: dark) {
+  .navbar {
+    background-color: var(--bulma-dark);
+  }
+  .navbar-item {
+    --bulma-navbar-item-color: hsl(var(--bulma-navbar-invert-h), var(--bulma-navbar-invert-s), var(--bulma-navbar-item-color-invert-l));
+    --bulma-navbar-item-background-l: var(--bulma-light-invert-l);
+  }
+}
+
 .is-disabled {
   cursor: not-allowed;
   opacity: 0.5;