diff --git a/src/css/common.scss b/src/css/common.scss
index 22b39cb9..0c1cbae4 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 {
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/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 df2cddda..005e3c0a 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,
     }),