diff --git a/client/assets/css/reset.scss b/client/assets/css/reset.scss
index 6cacc4dd..54d44f07 100644
--- a/client/assets/css/reset.scss
+++ b/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;
diff --git a/client/components/modal.scss b/client/components/modal.scss
index 66e7675b..88f229f7 100644
--- a/client/components/modal.scss
+++ b/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);
 }
diff --git a/client/pages/connectpage.scss b/client/pages/connectpage.scss
index a8c893ab..8025b5c8 100644
--- a/client/pages/connectpage.scss
+++ b/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 */
diff --git a/client/pages/connectpage/forkme.scss b/client/pages/connectpage/forkme.scss
index 09e9527b..51121c4a 100644
--- a/client/pages/connectpage/forkme.scss
+++ b/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); }
     }
diff --git a/client/pages/connectpage/form.scss b/client/pages/connectpage/form.scss
index f80b987a..f49a4971 100644
--- a/client/pages/connectpage/form.scss
+++ b/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);
     }
 }
diff --git a/client/pages/filespage/thing.scss b/client/pages/filespage/thing.scss
index 4d6aeaff..0d6f0d07 100644
--- a/client/pages/filespage/thing.scss
+++ b/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);
diff --git a/client/pages/viewerpage/editor.scss b/client/pages/viewerpage/editor.scss
index ea422945..1a35c51b 100644
--- a/client/pages/viewerpage/editor.scss
+++ b/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; }
+}
diff --git a/client/pages/viewerpage/menubar.scss b/client/pages/viewerpage/menubar.scss
index 99576d60..23d2cce7 100644
--- a/client/pages/viewerpage/menubar.scss
+++ b/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;