Dark mode support and much other stuff

src/css/adinplay.scss

@@ -40,7 +40,7 @@
 
     &.waitingForFinish {
         .videoInner {
-            @include BorderRadius(4px);
+            @include S(border-radius, $globalBorderRadius);
             overflow: hidden;
 
             &::after {
@@ -74,7 +74,7 @@
 
     .adInner {
         @include BoxShadow3D(lighten($mainBgColor, 15));
-        @include BorderRadius(4px);
+        @include S(border-radius, $globalBorderRadius);
         @include S(padding, 15px);
         // max-width: 960px;
         display: block !important;

src/css/application_error.scss

@@ -53,7 +53,7 @@
         font-family: monospace;
         text-align: left;
         @include S(padding, 6px);
-        @include BorderRadius(2px);
+        @include S(border-radius, $globalBorderRadius);
         @include BoxShadow3D(#eee);
         position: absolute;
         @include S(bottom, 25px);

src/css/common.scss

@@ -169,20 +169,26 @@ button {
     box-sizing: content-box;
     @include S(padding, 3px, 10px);
     @include IncreasedClickArea(10px);
-    @include BorderRadius(4px);
     @include TextShadow3D(#fff, $borderColor: #28292a);
     @include ButtonText;
-    @include Button3D($accentColorBright);
+    border: 0;
-    border: #{D(1px)} solid rgba(0, 10, 20, 0.2);
+    background: $colorBlueBright;
+    color: #fff;
+
+    // border: #{D(1px)} solid rgba(0, 10, 20, 0.2);
     @include S(border-bottom-width, 2px);
-    color: $accentColorDark;
+    // color: $accentColorDark;
     letter-spacing: 0.05em !important;
-    box-shadow: 0 #{D(1px)} #{D(2px)} 0 rgba(0, 10, 20, 0.2);
+    // box-shadow: 0 #{D(1px)} #{D(2px)} 0 rgba(0, 10, 20, 0.2);
 
     .keybinding {
         @include S(bottom, -2.5px);
         @include S(right, -2px);
     }
+    transition: opacity 0.12s ease-in-out;
+    &:hover {
+        opacity: 0.9;
+    }
 }
 
 ::selection {
@@ -210,7 +216,7 @@ input[type="email"] {
 
     @include Text;
     @include IncreasedClickArea(15px);
-    @include BorderRadius(4px);
+    @include S(border-radius, $globalBorderRadius);
 
     &::placeholder {
         color: #fff;
@@ -307,7 +313,7 @@ canvas {
 }
 
 ::-webkit-scrollbar-thumb {
-    border-radius: 4px;
+    // border-radius: 4px;
     background: #cdd0d4;
 }
 
@@ -407,7 +413,7 @@ canvas {
         content: "Coming soon!";
         z-index: 10000;
         background: rgba(lighten($mainBgColor, 0), 0.4);
-        @include BorderRadius(4px);
+        @include S(border-radius, $globalBorderRadius);
         position: absolute;
         display: flex;
         justify-content: center;
@@ -480,7 +486,7 @@ canvas {
                 bottom: 0;
                 z-index: 1;
                 @include BoxShadow3D($themeColor, $size: 1px);
-                @include BorderRadius(4px);
+                @include S(border-radius, $globalBorderRadius);
 
                 transform-origin: 0% 50%;
 
@@ -568,7 +574,7 @@ canvas {
     text-transform: uppercase;
     @include S(padding, 1.5px, 3px, 2px);
     @include PlainText;
-    @include BorderRadius(2px);
+    @include S(border-radius, $globalBorderRadius);
     &,
     > span {
         @include S(font-size, 9px);

src/css/ingame_hud/building_placer.scss

@@ -6,7 +6,7 @@
     display: grid;
 
     @include S(padding, 6px);
-    @include S(border-radius, 2px);
+    @include S(border-radius, $globalBorderRadius);
     @include S(width, 240px);
     @include S(grid-column-gap, 5px);
 
@@ -14,6 +14,10 @@
     grid-template-columns: 1fr auto;
     grid-template-rows: auto 1fr;
 
+    @include DarkThemeOverride {
+        background-color: #55585a;
+    }
+
     .buildingLabel {
         @include PlainText;
         @include S(margin-bottom, 2px);
@@ -54,7 +58,7 @@
         @include S(width, 100px);
         @include S(height, 100px);
         background: top left / 100% 100% no-repeat;
-        @include S(border-radius, 2px);
+        @include S(border-radius, $globalBorderRadius);
     }
 
     @include StyleBelowWidth(700px) {
@@ -77,10 +81,14 @@
         .keybinding {
             position: relative;
         }
+
+        @include DarkThemeOverride {
+            color: rgba(#fff, 0.5);
+        }
     }
 
     .variant {
-        @include S(border-radius, 4px);
+        @include S(border-radius, $globalBorderRadius);
         background: rgba(0, 10, 20, 0.1);
         display: flex;
         position: relative;

src/css/ingame_hud/buildings_toolbar.scss

@@ -56,10 +56,10 @@
                 }
             }
 
-            @include S(border-radius, 4px);
+            @include S(border-radius, $globalBorderRadius);
 
             &.selected {
-                background-color: rgba(74, 163, 223, 0.3) !important;
+                background-color: rgba($colorBlueBright, 0.3) !important;
                 transform: scale(1.05);
                 .keybinding {
                     color: #111;

src/css/ingame_hud/dialogs.scss

@@ -21,6 +21,19 @@
         }
     }
 
+    @include DarkThemeOverride {
+        background: rgba(#33363d, 0.9);
+        @include InlineAnimation(0.12s ease-in-out) {
+            0% {
+                background-color: transparent;
+                opacity: 0.5;
+            }
+            100% {
+                background-color: rgba(#33363d, 0.9);
+            }
+        }
+    }
+
     &.visible {
         .dialogInner {
             opacity: 1;
@@ -43,12 +56,16 @@
         @include S(min-width, 300px);
         max-width: calc(100vw - #{D(40px)});
         max-height: calc(100vh - #{D(40px)});
-        @include S(border-radius, 4px);
+        @include S(border-radius, $globalBorderRadius);
         display: flex;
         flex-direction: column;
         @include S(padding, 12px);
         pointer-events: all;
 
+        @include DarkThemeOverride {
+            background: #333438;
+        }
+
         &.optionChooserDialog {
             .optionParent {
                 display: grid;
@@ -59,6 +76,16 @@
                     cursor: pointer;
                     @include S(padding, 10px);
                     background: #eee;
+                    transition: background-color 0.12s ease-in-out;
+
+                    &:hover {
+                        background-color: #e7e7e7;
+                    }
+
+                    &.active {
+                        background-color: $colorBlueBright;
+                        color: #fff;
+                    }
                 }
             }
         }
@@ -72,6 +99,7 @@
             grid-template-columns: 1fr auto;
             @include S(margin-bottom, 10px);
 
+            @include DarkThemeInvert();
             > .closeButton {
                 opacity: 0.7;
                 @include S(width, 20px);
@@ -87,6 +115,7 @@
         }
 
         > .content {
+            @include PlainText;
             overflow-y: auto;
             pointer-events: all;
         }
@@ -101,6 +130,11 @@
                 @include S(min-width, 60px);
                 @include S(padding, 5px, 15px);
 
+                transition: opacity 0.12s ease-in-out;
+                &:hover {
+                    opacity: 0.9;
+                }
+
                 &.good {
                     background-color: $colorGreenBright;
                     color: #fff;

src/css/ingame_hud/game_menu.scss

@@ -27,6 +27,8 @@
             position: relative;
             @include IncreasedClickArea(0px);
 
+            @include DarkThemeInvert;
+
             &:hover {
                 opacity: 0.8;
             }
@@ -79,7 +81,6 @@
         border-color: rgba(0, 0, 0, 0.1);
         @include S(padding, 5px, 5px, 5px);
 
-        border-radius: 0 0 #{D(4px)} #{D(4px)};
         @include S(padding-left, 30px);
         @include S(margin-right, 3px);
         @include IncreasedClickArea(0px);
@@ -144,7 +145,7 @@
                 @include S(min-width, 5px);
                 @include S(height, 10px);
                 @include S(padding, 1px, 3px, 2px);
-                @include S(border-radius, 4px);
+                @include S(border-radius, $globalBorderRadius);
                 border: #{D(1px)} solid #fff;
                 @include InlineAnimation(1s ease-in-out infinite) {
                     50% {

src/css/ingame_hud/mass_selector.scss

@@ -4,7 +4,7 @@
     left: 50%;
     transform: translateX(-50%);
     background: rgba(lighten(#f77, 5), 0.95);
-    @include S(border-radius, 2px);
+    @include S(border-radius, $globalBorderRadius);
     @include S(padding, 6px, 10px);
     @include SuperSmallText;
     color: #fff;

src/css/ingame_hud/notifications.scss

@@ -5,13 +5,17 @@
 
     .notification {
         background: rgba(#333438, 0.8);
-        @include S(border-radius, 2px);
+        @include S(border-radius, $globalBorderRadius);
         @include S(margin-top, 3px);
         color: #fff;
         @include SuperSmallText;
         @include S(padding, 7px, 10px);
         @include S(width, 150px);
 
+        @include DarkThemeOverride {
+            background-color: rgba(#55595d, 0.8);
+        }
+
         &[data-icon] {
             @include S(background-position-x, 8px);
             background-position-y: center;

src/css/ingame_hud/pinned_shapes.scss

@@ -41,6 +41,10 @@
             flex-direction: row;
             grid-column: 2 / 3;
             @include S(height, 9px);
+
+            @include DarkThemeOverride {
+                color: #eee;
+            }
         }
 
         > .goalLabel {
@@ -68,6 +72,8 @@
                 @include S(top, -4px);
                 @include S(left, -4px);
                 background: uiResource("icons/current_goal_marker.png") center center / contain no-repeat;
+
+                @include DarkThemeInvert;
             }
         }
     }

src/css/ingame_hud/settings_menu.scss

@@ -27,6 +27,6 @@
         @include S(grid-gap, 10px);
         background: rgba(0, 10, 20, 0.1);
         @include S(padding, 20px);
-        @include S(border-radius, 2px);
+        @include S(border-radius, $globalBorderRadius);
     }
 }

src/css/ingame_hud/shop.scss

@@ -9,7 +9,7 @@
             display: grid;
             grid-template-columns: auto 1fr auto;
             background: #eee;
-            @include S(border-radius, 3px);
+            @include S(border-radius, $globalBorderRadius);
             @include S(margin-bottom, 4px);
             @include S(padding, 5px, 10px);
             @include S(grid-row-gap, 1px);
@@ -20,6 +20,10 @@
                 margin-bottom: 0;
             }
 
+            @include DarkThemeOverride {
+                background: #55585a;
+            }
+
             .title {
                 grid-column: 1 / 3;
                 grid-row: 1 / 2;
@@ -32,7 +36,7 @@
                 .tier {
                     @include S(margin-right, 9px);
                     background: $colorGreenBright;
-                    @include S(border-radius, 2px);
+                    @include S(border-radius, $globalBorderRadius);
                     text-transform: uppercase;
                     @include PlainText;
                     color: #fff;
@@ -160,19 +164,23 @@
                         background: #e2e4e6;
 
                         @include S(line-height, 13px);
-                        @include S(border-radius, 2px);
+                        @include S(border-radius, $globalBorderRadius);
                         @include S(padding, 1px, 2px, 2px);
                         position: relative;
                         text-align: center;
                         @include S(min-width, 50px);
                         overflow: hidden;
 
+                        @include DarkThemeOverride {
+                            background: #333438;
+                        }
+
                         .progressBar {
                             bottom: 0;
                             left: 0;
                             right: 0;
                             top: 0;
-                            @include S(border-radius, 2px);
+                            @include S(border-radius, $globalBorderRadius);
                             position: absolute;
                             display: inline-block;
                             z-index: -1;

src/css/ingame_hud/statistics.scss

@@ -80,10 +80,14 @@
 
         > div {
             background: #f4f4f4;
-            @include S(border-radius, 2px);
+            @include S(border-radius, $globalBorderRadius);
             @include S(margin-bottom, 4px);
             display: grid;
 
+            @include DarkThemeOverride {
+                background: #222428;
+            }
+
             grid-template-columns: 1fr auto;
             @include S(padding, 5px);
             &:last-child {
@@ -100,7 +104,7 @@
             .counter {
                 @include SuperSmallText;
 
-                @include S(border-radius, 2px);
+                @include S(border-radius, $globalBorderRadius);
                 @include S(padding, 0, 3px);
             }
         }

src/css/ingame_hud/unlock_notification.scss

@@ -17,7 +17,7 @@
 
     .dialog {
         background: rgba(#222428, 0.5);
-        @include S(border-radius, 4px);
+        @include S(border-radius, $globalBorderRadius);
         @include S(padding, 30px);
 
         @include InlineAnimation(0.5s ease-in-out) {
@@ -54,7 +54,7 @@
             @include S(padding, 1px, 6px);
             @include S(margin, 20px, 0, 20px);
 
-            @include S(border-radius, 4px);
+            @include S(border-radius, $globalBorderRadius);
             @include InlineAnimation(0.5s ease-in-out) {
                 0% {
                     transform: translateY(-60vh);
@@ -111,7 +111,7 @@
                 background-position: center center;
                 background-size: cover;
                 background-repeat: no-repeat;
-                @include S(border-radius, 4px);
+                @include S(border-radius, $globalBorderRadius);
                 box-shadow: #{D(2px)} #{D(3px)} 0 0 rgba(0, 0, 0, 0.15);
             }
         }

src/css/ingame_hud/vignette_overlay.scss

@@ -6,4 +6,9 @@
     bottom: 0;
     background: uiResource("vignette.lossless.png") center center / cover no-repeat;
     pointer-events: none;
+
+    @include DarkThemeOverride {
+        // Too many artifacts
+        display: none;
+    }
 }

src/css/main.scss

@@ -62,9 +62,9 @@ ingame_HUD_MassSelector,
 ingame_HUD_BetaOverlay,
 
 // Dialogs
+ingame_HUD_UnlockNotification,
 ingame_HUD_Shop,
 ingame_HUD_Statistics,
-ingame_HUD_UnlockNotification,
 ingame_HUD_SettingsMenu;
 
 $zindex: 100;

src/css/mixins.scss

@@ -348,3 +348,16 @@ button,
         @content;
     }
 }
+
+@mixin DarkThemeOverride {
+    @at-root body[data-theme="dark"] &,
+        &[data-theme="dark"] {
+        @content;
+    }
+}
+
+@mixin DarkThemeInvert {
+    @include DarkThemeOverride {
+        filter: invert(1);
+    }
+}

src/css/states/main_menu.scss

@@ -4,9 +4,26 @@
     justify-content: center;
     flex-direction: column;
 
-    background: rgb(140, 165, 194) center center / cover !important;
+    // background: #aaacb4 center center / cover !important;
+    background: #bbc2cf center center / cover !important;
+
+    .settingsButton {
+        position: absolute;
+        @include S(bottom, 30px);
+        @include S(right, 30px);
+        @include S(width, 35px);
+        @include S(height, 35px);
+        pointer-events: all;
+        cursor: pointer;
+        background: uiResource("icons/settings.png") center center / contain no-repeat;
+        transition: opacity 0.12s ease-in-out;
+        &:hover {
+            opacity: 0.9;
+        }
+    }
 
     .fullscreenBackgroundVideo {
+        // display: none !important;
         z-index: -1;
         position: fixed;
         right: 50%;
@@ -45,7 +62,7 @@
 
         .standaloneBanner {
             background: rgb(255, 225, 238);
-            @include S(border-radius, 4px);
+            @include S(border-radius, $globalBorderRadius);
             height: 100%;
             box-sizing: border-box;
             @include S(padding, 15px);
@@ -125,7 +142,7 @@
         @include PlainText;
         background: $colorRedBright;
         @include S(padding, 10px);
-        @include S(border-radius, 4px);
+        @include S(border-radius, $globalBorderRadius);
         color: #fff;
         @include S(margin-top, 10px);
         border: #{D(2px)} solid rgba(0, 10, 20, 0.1);
@@ -138,7 +155,7 @@
         flex-direction: column;
         background: #fafafa;
         @include S(padding, 20px);
-        @include S(border-radius, 4px);
+        @include S(border-radius, $globalBorderRadius);
         // border: #{D(2px)} solid rgba(0, 10, 20, 0.1);
         height: 100%;
         width: 100%;
@@ -149,7 +166,7 @@
             background-color: $colorRedBright;
             @include PlainText;
             color: #fff;
-            @include S(border-radius, 4px);
+            @include S(border-radius, $globalBorderRadius);
             @include S(padding, 5px);
         }
 
@@ -158,9 +175,10 @@
             @include S(width, 130px);
             @include S(padding, 15px, 20px);
             letter-spacing: 0.3em !important;
+
+            font-weight: bold;
             color: #fff;
             background-color: $colorGreenBright;
-            text-shadow: #{D(1px)} #{D(2px)} 0 rgba(0, 0, 0, 0.1);
             transition: transform 0.12s ease-in-out;
             &:hover {
                 transform: scale(1.02);
@@ -184,7 +202,7 @@
 
             .savegame {
                 background: #eee;
-                @include BorderRadius(4px);
+                @include S(border-radius, $globalBorderRadius);
                 @include S(padding, 5px);
                 display: grid;
                 grid-template-columns: 1fr auto auto;
@@ -259,7 +277,7 @@
             background: #fafafa;
             @include S(padding, 5px);
             @include S(padding-left, 10px);
-            @include S(border-radius, 4px);
+            @include S(border-radius, $globalBorderRadius);
             @include S(margin-left, 10px);
             @include SuperSmallText();
 

src/css/states/preload.scss

@@ -32,7 +32,7 @@
 
             @include BoxShadow3D(#fff);
             @include S(padding, 15px);
-            @include BorderRadius(4px);
+            @include S(border-radius, $globalBorderRadius);
             @include DropShadow;
 
             .errorHeader {

src/css/states/settings.scss

@@ -8,10 +8,23 @@
             @include Heading;
         }
 
+        .versionbar {
+            @include S(margin-top, 20px);
+            @include SuperSmallText;
+            display: grid;
+            align-items: center;
+            grid-template-columns: 1fr auto;
+            .buildVersion {
+                display: flex;
+                flex-direction: column;
+                color: #aaadaf;
+            }
+        }
+
         .setting {
             @include S(padding, 10px);
             background: #eee;
-            @include S(border-radius, 2px);
+            @include S(border-radius, $globalBorderRadius);
             @include S(margin-bottom, 5px);
 
             label {
@@ -31,6 +44,15 @@
                 grid-template-columns: 1fr auto;
             }
 
+            &.disabled {
+                opacity: 0.3;
+                pointer-events: none;
+                * {
+                    pointer-events: none !important;
+                    cursor: default !important;
+                }
+            }
+
             .value.enum {
                 background: #fff;
                 @include PlainText;
@@ -40,7 +62,7 @@
                 cursor: pointer;
                 justify-content: center;
                 @include S(min-width, 100px);
-                @include S(border-radius, 2px);
+                @include S(border-radius, $globalBorderRadius);
                 @include S(padding, 4px);
                 @include S(padding-right, 15px);
 

src/css/textual_game_state.scss

@@ -33,7 +33,7 @@
 
     .content {
         background: #fff;
-        @include S(border-radius, 2px);
+        @include S(border-radius, $globalBorderRadius);
         @include S(padding, 10px);
         max-height: calc(80vh - #{D(60px)});
         overflow-y: auto;

src/css/variables.scss

@@ -31,6 +31,7 @@ $mainBgColor: #dee1ea;
 $accentColorBright: #e1e4ed;
 $accentColorDark: #7d808a;
 $colorGreenBright: #66bb6a;
+$colorBlueBright: rgb(74, 163, 223);
 $colorRedBright: #ef5072;
 $themeColor: #393747;
 $ingameHudBg: rgba($accentColorBright, 0.1);
@@ -39,7 +40,7 @@ $ingameHudBorder: #{D(1.5px)} solid $accentColorDark;
 $text3dColor: #f4ffff;
 
 // Dialog properties
-$modalDialogBg: rgba(#666a73, 0.8);
+$modalDialogBg: rgba(160, 165, 180, 0.8);
 $dialogBgColor: lighten($mainBgColor, 10);
 
 $lightFontWeight: normal;

src/js/core/config.js

@@ -76,8 +76,8 @@ export const globalConfig = {
 
     debug: {
         /* dev:start */
-        fastGameEnter: true,
+        // fastGameEnter: true,
-        noArtificialDelays: true,
+        // noArtificialDelays: true,
         // disableSavegameWrite: true,
         showEntityBounds: false,
         showAcceptorEjectors: false,

src/js/game/hud/parts/settings_menu.js

@@ -88,8 +88,11 @@ export class HUDSettingsMenu extends BaseHUDPart {
         // this.background.classList.add("visible");
         this.root.app.inputMgr.makeSureAttachedAndOnTop(this.inputReciever);
 
-        const totalSecondsPlayed = Math.ceil(this.root.time.now());
+        const totalMinutesPlayed = Math.ceil(this.root.time.now() / 60);
-        this.timePlayed.querySelector(".playtime").innerText = formatSeconds(totalSecondsPlayed);
+        this.timePlayed.querySelector(".playtime").innerText = T.global.time.xMinutes.replace(
+            "<x>",
+            "" + totalMinutesPlayed
+        );
     }
 
     close() {

src/js/game/hud/parts/statistics.js

@@ -56,7 +56,7 @@ export class HUDStatistics extends BaseHUDPart {
         this.dataSource = source;
         this.dialogInner.setAttribute("data-datasource", source);
 
-        this.sourceExplanation.innerText = T.ingame.statistics.dataSources[source].title;
+        this.sourceExplanation.innerText = T.ingame.statistics.dataSources[source].description;
         if (this.visible) {
             this.rerenderFull();
         }

src/js/game/map_chunk_view.js

@@ -7,6 +7,7 @@ import { Math_max, Math_round } from "../core/builtins";
 import { Rectangle } from "../core/rectangle";
 import { createLogger } from "../core/logging";
 import { smoothenDpi } from "../core/dpi_manager";
+import { THEME } from "./theme";
 
 const logger = createLogger("chunk");
 const chunkSizePixels = globalConfig.mapChunkSize * globalConfig.tileSize;
@@ -119,9 +120,9 @@ export class MapChunkView extends MapChunk {
             context.scale(bgDpi, bgDpi);
         } else {
             if (this.containedEntities.length > 0) {
-                context.fillStyle = "#c5ccd6";
+                context.fillStyle = THEME.map.chunkOverview.filled;
             } else {
-                context.fillStyle = "#a6afbb";
+                context.fillStyle = THEME.map.chunkOverview.empty;
             }
             context.fillRect(0, 0, 10000, 10000);
         }

src/js/game/theme.js

@@ -3,5 +3,8 @@ export const THEMES = {
     light: require("./themes/light.json"),
 };
 
-// TODO: Make themes customizable
+export let THEME = THEMES.light;
-export const THEME = THEMES.light;
+
+export function applyGameTheme(id) {
+    THEME = THEMES[id];
+}

src/js/game/themes/dark.json

@@ -10,6 +10,10 @@
             "red": "#4a3d3f",
             "green": "#3e4a3d",
             "blue": "#35384a"
+        },
+        "chunkOverview": {
+            "empty": "#444856",
+            "filled": "#646b7d"
         }
     },
 

src/js/game/themes/light.json

@@ -10,6 +10,11 @@
             "red": "#ffbfc1",
             "green": "#cbffc4",
             "blue": "#bfdaff"
+        },
+
+        "chunkOverview": {
+            "empty": "#a6afbb",
+            "filled": "c5ccd6"
         }
     },
 

src/js/profile/application_settings.js

@@ -6,7 +6,7 @@ import { ReadWriteProxy } from "../core/read_write_proxy";
 import { BoolSetting, EnumSetting, BaseSetting } from "./setting_types";
 import { createLogger } from "../core/logging";
 import { ExplainedResult } from "../core/explained_result";
-import { THEMES } from "../game/theme";
+import { THEMES, THEME, applyGameTheme } from "../game/theme";
 
 const logger = createLogger("application_settings");
 
@@ -68,26 +68,14 @@ export const allApplicationSettings = [
         },
         G_IS_STANDALONE
     ),
-    new EnumSetting("theme", {
+
-        options: Object.keys(THEMES),
-        valueGetter: theme => theme,
-        textGetter: theme => theme.substr(0, 1).toUpperCase() + theme.substr(1),
-        category: categoryApp,
-        restartRequired: false,
-        changeCb:
-            /**
-             * @param {Application} app
-             */
-            (app, id) => document.body.setAttribute("data-theme", id),
-    }),
     new BoolSetting(
         "soundsMuted",
         categoryApp,
         /**
          * @param {Application} app
          */
-        (app, value) => app.sound.setSoundsMuted(value),
+        (app, value) => app.sound.setSoundsMuted(value)
-        false
     ),
     new BoolSetting(
         "musicMuted",
@@ -95,11 +83,25 @@ export const allApplicationSettings = [
         /**
          * @param {Application} app
          */
-        (app, value) => app.sound.setMusicMuted(value),
+        (app, value) => app.sound.setMusicMuted(value)
-        false
     ),
 
     // GAME
+    new EnumSetting("theme", {
+        options: Object.keys(THEMES),
+        valueGetter: theme => theme,
+        textGetter: theme => theme.substr(0, 1).toUpperCase() + theme.substr(1),
+        category: categoryGame,
+        restartRequired: false,
+        changeCb:
+            /**
+             * @param {Application} app
+             */
+            (app, id) => {
+                applyGameTheme(id);
+                document.body.setAttribute("data-theme", id);
+            },
+    }),
 ];
 
 export function getApplicationSettingById(id) {

src/js/states/ingame.js

@@ -148,7 +148,10 @@ export class InGameState extends GameState {
      * Goes back to the settings state
      */
     goToSettings() {
-        this.saveThenGoToState("SettingsState");
+        this.saveThenGoToState("SettingsState", {
+            backToStateId: this.key,
+            backToStatePayload: this.creationPayload,
+        });
     }
 
     /**

src/js/states/main_menu.js

@@ -32,6 +32,8 @@ export class MainMenuState extends GameState {
 
         return `
 
+            <button class="settingsButton"></button>
+
             <video autoplay muted loop class="fullscreenBackgroundVideo">
                 <source src="${cachebust("res/bg_render.webm")}" type="video/webm">
             </video>
@@ -191,6 +193,7 @@ export class MainMenuState extends GameState {
             });
         }
 
+        this.trackClicks(qs(".settingsButton"), this.onSettingsButtonClicked);
         this.renderSavegames();
     }
 
@@ -281,6 +284,10 @@ export class MainMenuState extends GameState {
         });
     }
 
+    onSettingsButtonClicked() {
+        this.moveToState("SettingsState");
+    }
+
     onPlayButtonClicked() {
         const savegame = this.app.savegameMgr.createNewSavegame();
 
@@ -288,7 +295,7 @@ export class MainMenuState extends GameState {
 
         if (G_IS_DEV) {
             // TODO
-            this.moveToState("SettingsState");
+            // this.moveToState("SettingsState");
         }
 
         this.moveToState("InGameState", {

src/js/states/settings.js

@@ -19,12 +19,12 @@ export class SettingsState extends TextualGameState {
             ${
                 this.app.platformWrapper.getSupportsKeyboard()
                     ? `
-                        <button class="styledButton editKeybindings">KEYBINDING TODO</button>
+                        <button class="styledButton editKeybindings">Keybindings</button>
             `
                     : ""
             }
 
-            <button class="styledButton changelog">CHANGELOG TODO</button>
+            <button class="styledButton changelog">Changelog</button>
 
 
          </div>
@@ -33,7 +33,7 @@ export class SettingsState extends TextualGameState {
             ${this.getSettingsHtml()}
             <div class="versionbar">
                 <div class="buildVersion">${T.global.loading} ...</div>
-                <button class="styledButton copyright">COPYRIGHT TODO</button>
+                <button class="styledButton copyright">Copyright & Licenses</button>
             </div>
 
 

translations/base-en.yaml

@@ -45,6 +45,8 @@ global:
         minutesAndSecondsShort: <minutes>m <seconds>s
         hoursAndMinutesShort: <hours>h <minutes>s
 
+        xMinutes: <x> minutes
+
     keys:
         tab: TAB
         control: CTRL
@@ -290,11 +292,6 @@ settings:
             description: >-
                 It is recommended to play the game in fullscreen to get the best experience. Only available in the standalone.
 
-        theme:
-            title: Interface theme
-            description: >-
-                Choose the interface theme which also affects the game. Notice that everything except the default theme may lead to graphical issues.
-
         soundsMuted:
             title: Mute Sounds
             description: >-
@@ -304,3 +301,8 @@ settings:
             title: Mute Music
             description: >-
                 If enabled, mutes all music.
+
+        theme:
+            title: Game theme
+            description: >-
+                Choose the game theme which mainly affects the map background. Notice that everything except the light theme may lead to graphical issues.