Make the dark / light theme work with PWA (#3883)

Changed the way the dark-theme is loaded. Thanks to @Vitroid for the suggestion.

src/css/dark-theme.less

@@ -1,4 +1,5 @@
-&:root {
+body.dark-theme {
+
     --accent: #ffbb00;
     --subtleAccent: #9c9c9c;
     --quietHeader: #bf8606;
@@ -19,13 +20,13 @@
     --hoverButton-background: #ffcc3e;
     --superSubtleAccent: #595959;
     --accentBorder: #bf8606;
-}
+
+    color: white;
+
     .background_paper {
         background-image: url(../images/paper-dark.png);
     }
-body {
-    color: white;
-}
+
     &::backdrop {
         background-image: none;
         background-color: rgba(0, 0, 0, 0.5);
@@ -673,8 +674,11 @@ progress[value] {
         }
         .tab-container {
             >div {
-            background-color: #535655;
                 border-right: 1px solid #393b3a;
+
+                &:not(.active) {
+                    background-color: #535655;
+                }
             }
         }
         .number {
@@ -999,3 +1003,4 @@ progress[value] {
     .invertable {
         filter: invert(1)
     }
+}

src/js/DarkTheme.js

@@ -61,12 +61,12 @@ DarkTheme.setConfig = function (result) {
 };
 
 DarkTheme.applyDark = function () {
-    css_dark.forEach((el) => $(`link[href="${el}"]`).prop('disabled', false));
+    $('body').addClass('dark-theme');
     this.enabled = true;
 };
 
 DarkTheme.applyNormal = function () {
-    css_dark.forEach((el) => $(`link[href="${el}"]`).prop('disabled', true));
+    $('body').removeClass('dark-theme');
     this.enabled = false;
 };
 

src/main.html

@@ -51,7 +51,7 @@
     <link type="text/css" rel="stylesheet" href="./node_modules/multiple-select/dist/multiple-select.min.css" media="all"/>
     <link type="text/css" rel="stylesheet" href="./components/EscDshotDirection/Styles.css" media="all"/>
 
-    <link type="text/css" rel="stylesheet" href="./css/dark-theme.css" media="all" disabled/>
+    <link type="text/css" rel="stylesheet" href="./css/dark-theme.css" media="all"/>
 
     <script type="module" src="./js/jquery.js"></script>
     <!-- TODO: probably won't need this here once everything is imported -->