diff --git a/src/css/reset.less b/src/css/reset.less
index afc432d..d42acd1 100644
--- a/src/css/reset.less
+++ b/src/css/reset.less
@@ -9,6 +9,13 @@
 // Special font
 @import url(https://fonts.googleapis.com/css?family=Chango);
 
+// Custom Colors
+:root {
+   --colorGraphite: #303030;
+   --colorCharcoal: #222222;
+   --colorTar:      #161616;
+   }
+
 // Core
 * { box-sizing: border-box; }
 html { display: flex; flex-direction: column; height: 100%; min-height: 100%; }
diff --git a/src/css/reset/utility-box.less b/src/css/reset/utility-box.less
index ed0b704..f362c6d 100644
--- a/src/css/reset/utility-box.less
+++ b/src/css/reset/utility-box.less
@@ -1,5 +1,10 @@
 // Style: Constants and Utilities -- Reusable values and mixins
 
+// Custom Colors
+@colorGraphite: #303030;
+@colorCharcoal: #222222;
+@colorTar:      #161616;
+
 // Layers for z-index
 @layerDialogBox:     500;  //cream of the crop
 @layerModal:         400;  //screen overlays
@@ -8,7 +13,7 @@
 @layerHover:         100;  //tootips and other hover popups
 @layerBackground:   -100;  //bottom of the barrel
 
-// Character entities
+// Character Entities
 @symbolAngleRight:   "\276F";  //character: ❯
 @symbolArrowDown:    "\21E9";  //character: ⇩
 @symbolArrowUp:      "\21E7";  //character: ⇧
@@ -31,6 +36,10 @@
    align-items: center;
    }
 
+.DarkMode(@lessRules) {  //apply style if user has requested dark color themes
+   @media (prefers-color-scheme: dark) { @lessRules(); }
+   }
+
 .MobileMode(@lessRules) {  //selects iPhone 6/6s/7/8/SE2/SE3 landscape and anything narrower
    @media (max-width: 667px) { @lessRules(); }
    }
diff --git a/src/js/lib-x.ts b/src/js/lib-x.ts
index 8ee1bf7..fc28678 100644
--- a/src/js/lib-x.ts
+++ b/src/js/lib-x.ts
@@ -780,6 +780,9 @@ const libXBrowser = {
    msWindows(): boolean {
       return libX.browser.userAgentData().platform === 'Windows';
       },
+   darkModeRequested(): boolean {
+      return window.matchMedia('(prefers-color-scheme: dark)').matches;
+      },
    };
 
 const libXPopupImage = {