diff --git a/src/css/common.scss b/src/css/common.scss
index 22b39cb9..f616eace 100644
--- a/src/css/common.scss
+++ b/src/css/common.scss
@@ -38,6 +38,10 @@ html {
     right: 0;
 
     background: #dee1ea;
+
+    @include DarkThemeOverride {
+        background: #5c606c;
+    }
 }
 
 body {
@@ -413,6 +417,10 @@ canvas {
         display: inline-block;
         vertical-align: middle;
     }
+
+    @include DarkThemeOverride {
+        color: #fff;
+    }
 }
 
 .prefab_LoadingTextWithAnimDelayed {
diff --git a/src/css/ingame_hud/dialogs.scss b/src/css/ingame_hud/dialogs.scss
index 366ab8ce..cd681a9e 100644
--- a/src/css/ingame_hud/dialogs.scss
+++ b/src/css/ingame_hud/dialogs.scss
@@ -32,6 +32,21 @@
                 background-color: rgba(#33363d, 0.9);
             }
         }
+
+        > .dialogInner.optionChooserDialog .optionParent {
+            .option {
+                background: #3d3f42;
+
+                &:hover {
+                    background-color: #424348;
+                }
+
+                &.active {
+                    background: $colorBlueBright;
+                    color: #fff;
+                }
+            }
+        }
     }
 
     &.visible {
diff --git a/src/css/mixins.scss b/src/css/mixins.scss
index dc5eeb86..ee0a9752 100644
--- a/src/css/mixins.scss
+++ b/src/css/mixins.scss
@@ -350,7 +350,7 @@ button,
 }
 
 @mixin DarkThemeOverride {
-    @at-root body[data-theme="dark"] &,
+    @at-root html[data-theme="dark"] &,
         &[data-theme="dark"] {
         @content;
     }
diff --git a/src/css/states/ingame.scss b/src/css/states/ingame.scss
index 8b0a614c..614cdf6a 100644
--- a/src/css/states/ingame.scss
+++ b/src/css/states/ingame.scss
@@ -28,4 +28,10 @@
         right: 0;
         bottom: 0;
     }
+
+    @include DarkThemeOverride {
+        .gameLoadingOverlay {
+            background: #56565c;
+        }
+    }
 }
diff --git a/src/css/states/keybindings.scss b/src/css/states/keybindings.scss
index f5ee3170..cf211403 100644
--- a/src/css/states/keybindings.scss
+++ b/src/css/states/keybindings.scss
@@ -51,4 +51,21 @@
             }
         }
     }
+
+    @include DarkThemeOverride {
+        .content {
+            .hint {
+                background: #3b3d40;
+            }
+
+            .category .entry {
+                color: #c0c4c8;
+                border-bottom-color: #888;
+
+                button {
+                    filter: invert(1);
+                }
+            }
+        }
+    }
 }
diff --git a/src/css/states/main_menu.scss b/src/css/states/main_menu.scss
index a10390b8..f2cf120e 100644
--- a/src/css/states/main_menu.scss
+++ b/src/css/states/main_menu.scss
@@ -401,4 +401,44 @@
             }
         }
     }
+
+    @include DarkThemeOverride {
+        background: #53565e center center / cover !important;
+
+        .topButtons {
+            filter: invert(1);
+
+            .languageChoose {
+                filter: invert(1);
+            }
+        }
+
+        .mainContainer {
+            background: #4b4c50;
+
+            .savegames .savegame {
+                background: #62646a;
+                color: white;
+            }
+        }
+
+        .footer {
+            > a {
+                background: #4b4c50;
+                color: #eee;
+            }
+
+            .author {
+                color: #bdbdbd;
+
+                > a {
+                    color: white;
+                }
+            }
+
+            .thirdpartyLogo.githubLogo {
+                filter: invert(1);
+            }
+        }
+    }
 }
diff --git a/src/css/states/settings.scss b/src/css/states/settings.scss
index e52152c3..6c3df736 100644
--- a/src/css/states/settings.scss
+++ b/src/css/states/settings.scss
@@ -88,4 +88,26 @@
             }
         }
     }
+
+    @include DarkThemeOverride {
+        .content {
+            .setting {
+                background: #424345;
+
+                .value.enum {
+                    // dirty but works
+                    filter: invert(0.8);
+                    color: #222;
+                }
+
+                .value.checkbox {
+                    background-color: #74767b;
+
+                    &.checked {
+                        background-color: #605b7d;
+                    }
+                }
+            }
+        }
+    }
 }
diff --git a/src/css/textual_game_state.scss b/src/css/textual_game_state.scss
index 897c379a..1f9dc356 100644
--- a/src/css/textual_game_state.scss
+++ b/src/css/textual_game_state.scss
@@ -61,4 +61,21 @@
             }
         }
     }
+
+    @include DarkThemeOverride {
+        .headerBar {
+            h1 {
+                color: #cfceca;
+            }
+
+            .backButton {
+                filter: invert(1);
+            }
+        }
+
+        > .container > .content {
+            background: #4b4c50;
+            color: #eee;
+        }
+    }
 }
diff --git a/src/js/profile/application_settings.js b/src/js/profile/application_settings.js
index 5b69c7ae..d1216c60 100644
--- a/src/js/profile/application_settings.js
+++ b/src/js/profile/application_settings.js
@@ -160,7 +160,7 @@ export const allApplicationSettings = [
              */
             (app, id) => {
                 applyGameTheme(id);
-                document.body.setAttribute("data-theme", id);
+                document.documentElement.setAttribute("data-theme", id);
             },
         enabled: !IS_DEMO,
     }),