diff --git a/config.json b/config.json
index a7e9d16..976f2a3 100644
--- a/config.json
+++ b/config.json
@@ -7,7 +7,7 @@
     "maxUploadIdLength":30,
 
     "accounts": {
-        "registrationEnabled": true,
+        "registrationEnabled": false,
         "requiredForUpload": false
     },
 
diff --git a/src/style/_base.scss b/src/style/_base.scss
index 7aceb3d..c488b60 100644
--- a/src/style/_base.scss
+++ b/src/style/_base.scss
@@ -39,24 +39,42 @@ $FallbackFonts:
     colors
 */
 
-$Background: #252525;
-/* hsl(210,12.9,24.3) */
-$darkish: rgb(54, 62, 70);
+:root {
+    // Crust (topbar)
+    --crust: rgb(30, 33, 36); // topbar color
+    --crust-txt: #555555; // buttons
+    --crust-txt-active: slategrey; // hover
+
+    // Background
+    --background: linear-gradient(#333,#252525); // Used for desktop.
+    --background-readable: linear-gradient(#303030, #252525); // Used for mobile, where the uploader is backed a gradient.
+
+    // Panel (pulldown, upload panel)
+    --panel: #222222;
+    --subpanel: #191919;
+    
+    // Panel banners
+    --panel-banner-error: #663333;
+    --panel-banner-warning: #554C33;
+    --panel-banner-success: #335544;
+    --panel-banner-info: #334466;
+
+    // Text
+    --text-visible: #FFF; // Use for best possible visibility. Used in button interactives on hover. 
+    --text: #DDD;
+    --subtext: #999;
+}
 
 /*
     then other stuff
 */
 
 body {
-    background-color: rgb(30, 33, 36); // this is here so that
+    background-color: var(--crust); // this is here so that
                                          // pulling down to refresh
                                          // on mobile looks good
 }
 
-#appContent {
-    background-color: $Background
-}
-
 /*
     scrollbars
 */
@@ -70,7 +88,7 @@ body {
         }
 
         &::-webkit-scrollbar-track {
-            background-color:#222222;
+            background-color:var(--panel);
         }
 
         &::-webkit-scrollbar-thumb {
diff --git a/src/style/app.scss b/src/style/app.scss
index 886c792..d6ac9f9 100644
--- a/src/style/app.scss
+++ b/src/style/app.scss
@@ -3,36 +3,16 @@
 @use "app/pulldown";
 @use "app/uploads";
 
-.menuBtn {
-    text-decoration:none;
-    font-size:16px;
-    transition-duration: 100ms;
-
-    color:#555555;
-    background-color: #00000000;
-    border:none;
-    margin:0 0 0 0;
-    cursor:pointer;
-
-    position:relative;
-    top:-1px;
-
-    &:hover {
-        color:slategray;
-        transition-duration: 100ms;
-    }
-}
-
 #appContent {
     position:absolute;
     left:0px;
     top:40px;
     width:100%;
     height: calc( 100% - 40px );
-    background-image: linear-gradient(#333,base.$Background);
+    background: var(--background);
 
     @media screen and (max-width:500px) {
-        background-image: linear-gradient(#303030,base.$Background);
+        background: var(--background-readable);
     }
 }
 
diff --git a/src/style/app/pulldown.scss b/src/style/app/pulldown.scss
index 86458dc..9504b2c 100644
--- a/src/style/app/pulldown.scss
+++ b/src/style/app/pulldown.scss
@@ -21,8 +21,8 @@
     position: absolute;
     width: 300px;
     height: 400px;
-    background-color: #222222;
-    color: #dddddd;
+    background-color: var(--panel);
+    color: var(--text);
 
     top:0px;
     left:50%;
diff --git a/src/style/app/pulldown/accounts.scss b/src/style/app/pulldown/accounts.scss
index b6fe02b..fb39653 100644
--- a/src/style/app/pulldown/accounts.scss
+++ b/src/style/app/pulldown/accounts.scss
@@ -25,14 +25,14 @@
                     font-size:16px;
                 }
 
-                color:#999999;
+                color:var(--subtext);
                 margin: 0 0 10px 0;
             }
 
             button {
                 cursor:pointer;
                 background-color:#393939;
-                color:#DDDDDD;
+                color:var(--text);
                 border:none;
                 outline:none;
                 padding:5px;
@@ -67,7 +67,7 @@
                 width:100%;
                 padding:5px;
                 background-color:#333333;
-                color:#dddddd;
+                color:var(--text);
                 outline:none;
 
                 @media screen and (max-width: 500px) {
@@ -83,7 +83,7 @@
                     width:100%;
                     padding:5px;
                     background-color:#663333;
-                    color:#dddddd;
+                    color:var(--text);
                     outline:none;
                     font-size:14px;
                     text-align:left;
diff --git a/src/style/app/pulldown/files.scss b/src/style/app/pulldown/files.scss
index 3037156..40ccea1 100644
--- a/src/style/app/pulldown/files.scss
+++ b/src/style/app/pulldown/files.scss
@@ -9,12 +9,12 @@
 
         .flavor {
             font-size:16px;
-            color:#999999;
+            color:var(--subtext);
             margin: 0 0 10px 0;
         }
 
         button {
-            --col: #999999;
+            --col: var(--subtext);
 
             background-color: #232323;
             color:var(--col);
@@ -43,7 +43,7 @@
             background-color:#212121;
             width:100%;
             padding:8px;
-            color:#dddddd;
+            color:var(--text);
             border:none;
             border-bottom: 1px solid #aaaaaa;
             outline: none;
@@ -52,7 +52,7 @@
 
             &:focus {
                 transition-duration:150ms;
-                border-bottom: 1px solid #dddddd;
+                border-bottom: 1px solid var(--text);
             }
 
             @media screen and (max-width: 500px) {
diff --git a/src/style/app/pulldown/help.scss b/src/style/app/pulldown/help.scss
index d9effa2..5c365c8 100644
--- a/src/style/app/pulldown/help.scss
+++ b/src/style/app/pulldown/help.scss
@@ -7,13 +7,13 @@
 
         h2 {
             font-weight: 400;
-            color:#DDDDDD;
+            color: var(--text);
             font-size:16px;
             margin:0 0 0 0;
         }
 
         p {
-            color:#999999;
+            color:var(--subtext);
             font-size:16px;
             margin:0 0 0 0;
         }
diff --git a/src/style/app/pulldown/modals.scss b/src/style/app/pulldown/modals.scss
index 17bf30d..f89f576 100644
--- a/src/style/app/pulldown/modals.scss
+++ b/src/style/app/pulldown/modals.scss
@@ -4,9 +4,9 @@
         position:relative;
         width:100%;
         height:50px;
-        background-color: #222222;
+        background-color: var(--panel);
         border:none;
-        border-bottom:1px solid #AAAAAA;
+        border-bottom:1px solid var(--subtext);
         transition-duration:150ms;
 
         img {
@@ -21,14 +21,14 @@
             position:absolute;
             top:50%;
             left:50px;
-            color:#DDDDDD;
+            color:var(--text);
             transform:translateY(-50%);
             font-size:14px;
             background-color:#00000000;
             border:none;
 
             span {
-                color:#777777;
+                color:/*#777777*/ var(--subtext);
                 font-size:12px;
             }
         }
@@ -75,10 +75,10 @@
     }
 
     .category {
-        border-bottom: 1px solid #AAAAAA;
+        border-bottom: 1px solid var(--subtext);
 
         p {
-            color: #AAAAAA;
+            color: var(--subtext);
             font-size: 14px;
             margin: 10px 0px 3px 0px;
             text-align:center;
@@ -106,7 +106,7 @@
 
 .modal {
     position:absolute;
-    background-color:#222222;
+    background-color: var(--panel);
     width:100%;
     transform:translateY(-100%);
     top:100%;
diff --git a/src/style/app/topbar.scss b/src/style/app/topbar.scss
index 8016dc7..a57d704 100644
--- a/src/style/app/topbar.scss
+++ b/src/style/app/topbar.scss
@@ -18,4 +18,24 @@
 
     column-gap:5px;
 
+}
+
+.menuBtn {
+    text-decoration:none;
+    font-size:16px;
+    transition-duration: 100ms;
+
+    color:var(--crust-txt);
+    background-color: #00000000;
+    border:none;
+    margin:0 0 0 0;
+    cursor:pointer;
+
+    position:relative;
+    top:-1px;
+
+    &:hover {
+        color:var(--crust-txt-active);
+        transition-duration: 100ms;
+    }
 }
\ No newline at end of file
diff --git a/src/style/app/uploader/add_new_files.scss b/src/style/app/uploader/add_new_files.scss
index 598bcbe..43b89c2 100644
--- a/src/style/app/uploader/add_new_files.scss
+++ b/src/style/app/uploader/add_new_files.scss
@@ -1,6 +1,6 @@
 #uploadWindow {
     #add_new_files {
-        background-color:#191919;
+        background-color:var(--subpanel);
         border: 1px solid gray;
         padding: 0px 0px 10px 0px;
 
@@ -47,7 +47,7 @@
 
             button, input[type=text] {
                 background-color:#333333;
-                color:#DDDDDD;
+                color:var(--text);
                 border:none;
                 border-radius: 0px;
                 outline:none;
diff --git a/src/style/app/uploader/file.scss b/src/style/app/uploader/file.scss
index 9b0a813..b51ab4d 100644
--- a/src/style/app/uploader/file.scss
+++ b/src/style/app/uploader/file.scss
@@ -2,7 +2,7 @@
 
 #uploadWindow {
     .file {
-        background-color:#191919;
+        background-color:var(--subpanel);
         border: 1px solid gray;
         padding: 10px;
         overflow:clip;
@@ -17,7 +17,7 @@
 
         input[type=text] {
             background-color:#333333;
-            color:#DDDDDD;
+            color:var(--text);
             border:none;
             outline:none;
             padding:5px;
diff --git a/src/style/app/uploads.scss b/src/style/app/uploads.scss
index 9e8827a..15f49e9 100644
--- a/src/style/app/uploads.scss
+++ b/src/style/app/uploads.scss
@@ -15,7 +15,7 @@
         max-height: calc( 100% - 80px );
     }
 
-    background-color:#222222;
+    background:var(--panel);
     color:#ddd;
 
     h1, p, a {
@@ -29,16 +29,16 @@
         margin-top: 5px;
 
         img {
-            color: #666666;
+            color: var(--subtext);
         }
 
         &:hover {
-            img { color: #DDD; }
+            img { color: var(--text); }
         }
     }
 
     a {
-        color:#999;
+        color:var(--subtext);
     }
 
     h1 {
@@ -53,7 +53,7 @@
     button {
         cursor:pointer;
         background-color:#393939;
-        color:#DDDDDD;
+        color:var(--text);
         border:none;
         outline:none;
         padding:5px;
diff --git a/src/style/downloads.scss b/src/style/downloads.scss
index 81ff36e..1b3f95c 100644
--- a/src/style/downloads.scss
+++ b/src/style/downloads.scss
@@ -12,10 +12,10 @@
     top:0px;
     width:100%;
     height:100%;
-    background-image: linear-gradient(#333,base.$Background);
+    background: var(--background);
 
     @media screen and (max-width:500px) {
-        background-image: linear-gradient(#303030,base.$Background);
+        background: var(--background-readable);
     }
 }