Merge pull request #197 from dengr1065/dark-theme-is-cool

Dark Theme - slowly for everything

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 {

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 {

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;
     }

src/css/states/ingame.scss

@@ -28,4 +28,10 @@
         right: 0;
         bottom: 0;
     }
+
+    @include DarkThemeOverride {
+        .gameLoadingOverlay {
+            background: #56565c;
+        }
+    }
 }

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);
+                }
+            }
+        }
+    }
 }

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);
+            }
+        }
+    }
 }

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;
+                    }
+                }
+            }
+        }
+    }
 }

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;
+        }
+    }
 }

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,
     }),