feature (darkmode): various improvements to dark mode

didn't realised many people are actually using dark mode, this request
came from Roel a teacher in the Netherland that's using Filestash to
teach coding to its students

client/assets/css/reset.scss

@@ -46,7 +46,9 @@
     --error: #f26d6d;
     --success: #63d9b1;
     --dark: #313538;
-    --dark-mode-bg-color: #242424;
+}
+body.dark-mode {
+    --bg-color: #242424;
 }
 
 html {
@@ -62,8 +64,9 @@ body, html {
     height: 100%;
     margin: 0;
 }
-body.dark-mode{ background: var(--dark-mode-bg-color); }
-
+body.dark-mode{ background: var(--bg-color); }
+body.dark-mode .component_modal > div,
+body.dark-mode .component_page_admin{ --bg-color: #f2f3f5; }
 
 .center{
     text-align: center;

client/components/modal.scss

@@ -60,8 +60,5 @@
 }
 
 .dark-mode .component_modal{
-    background: var(--dark-mode-bg-color);
-    > div{
-        background: rgba(255,255,255,0.8);
-    }
+    background: var(--bg-color);
 }

client/pages/connectpage.scss

@@ -3,7 +3,7 @@
     height: 100%;
 }
 .dark-mode .component_page_connect{
-    background: var(--dark-mode-bg-color);
+    background: var(--bg-color);
 }
 
 /* PAGE ANIMATION */

client/pages/connectpage/forkme.scss

@@ -43,7 +43,7 @@
     }
     .component_forkme{
         .octo-arm, .octo-body{
-            fill: var(--dark-mode-bg-color);
+            fill: var(--bg-color);
         }
         .bg{ fill: var(--light); }
     }

client/pages/connectpage/form.scss

@@ -102,7 +102,7 @@
 
 .dark-mode{
     div.buttons button.active{
-        background: var(--dark-mode-bg-color);
-        color: var(--light);
+        background: var(--bg-color);
+        color: var(--super-light);
     }
 }

client/pages/filespage/thing.scss

@@ -264,7 +264,7 @@
         box-shadow: none;
     }
     .component_filename{
-        color: var(--bg-color);
+        color: var(--light);
     }
     .box.highlight{
         background: rgba(255,255,255,0.05);

client/pages/viewerpage/editor.scss

@@ -200,3 +200,18 @@ span.CodeMirror-matchingtag { background: rgba(0,0,0,0.1); color: inherit!import
 .CodeMirror-cursor {
 	min-width: 1px !important;
 }
+
+/* DAR MODE THEME */
+.dark-mode .CodeMirror {
+    background: #242424;
+    &, .CodeMirror-linenumber, .cm-variable-2, .cm-number, .cm-quote { color: #f6f3e8; }
+    .cm-string, .cm-string-2 { color: #95e454; }
+    .cm-atom { color: #e5786d; }
+    .cm-keyword, .cm-meta { color: #8ac6f2; }
+    .cm-def, .cm-tag, .cm-attribute, .cm-builtin, .cm-qualifier { color: #cae682; }
+    .cm-comment { color: #99968b; }
+    .CodeMirror-cursor{ background-color: #99968b; }
+    .CodeMirror-selected {background-color: rgba(0,0,0,0.3); }
+
+    .cm-org-url, .cm-org-image { color: #ccaa8f!important; }
+}

client/pages/viewerpage/menubar.scss

@@ -38,7 +38,7 @@
         }
     }
 }
-
+.dark-mode .component_menubar .component_container { color: inherit; }
 .touch-yes .component_menubar .action-item{
     .component_icon{
         height: 21px;