diff --git a/assets/tile.png b/assets/tile.png
new file mode 100644
index 0000000..f3fb2a1
Binary files /dev/null and b/assets/tile.png differ
diff --git a/assets/tile2.png b/assets/tile2.png
new file mode 100644
index 0000000..36f9d52
Binary files /dev/null and b/assets/tile2.png differ
diff --git a/canvas.js b/canvas.js
index 41e5240..78825db 100644
--- a/canvas.js
+++ b/canvas.js
@@ -3,19 +3,19 @@ document.querySelectorAll(".clock").forEach((clock) => {
   var ctx = canvas.getContext("2d");
   ctx.resetTransform();
   ctx.translate(32, 32);
-  ctx.strokeStyle = "#FFFFFF";
+  ctx.strokeStyle = getComputedStyle(document.documentElement).getPropertyValue('--foreground');
   ctx.lineWidth = 2;
   ctx.lineCap = "round";
   update();
 });
 function update() {
   document.querySelectorAll(".clock").forEach((clock, i) => {
-    if (clock.classList.contains("main-clock")) return;
     var canvas = clock.querySelector("canvas");
     var ctx = canvas.getContext("2d");
+    ctx.strokeStyle = getComputedStyle(document.documentElement).getPropertyValue('--foreground');
+    if (clock.classList.contains("main-clock")) return;
     ctx.resetTransform();
     ctx.translate(32, 32);
-    ctx.strokeStyle = "#FFFFFF";
     ctx.lineWidth = 2;
     ctx.lineCap = "round";
     var canvas = clock.querySelector("canvas");
diff --git a/index.html b/index.html
index 03b3a20..8188105 100644
--- a/index.html
+++ b/index.html
@@ -47,23 +47,29 @@
       <div class="dialog" id="colordia">
         <form id="color">
           <p class="dlg-top">Customize Color</p>
-          <input type="radio" name="color" id="colorred" value="#FF0000|#400000|#800000" /><!--
+          <input type="radio" name="color" id="colorred" value="#FF0000|#400000|#800000|#FFFFFF" /><!--
           --><label for="colorred" style="background-color:#800000">RED</label><!--
-          --><input type="radio" name="color" id="colororange" value="#FF8000|#402000|#804000" /><!--
+          --><input type="radio" name="color" id="colororange" value="#FF8000|#402000|#804000|#FFFFFF" /><!--
           --><label for="colororange" style="background-color:#804000">ORANGE</label><!--
-          --><input type="radio" name="color" id="coloryellow" value="#FFFF00|#404000|#808000" /><!--
+          --><input type="radio" name="color" id="coloramber" value="#f2aa58|#582007|#7c300a|#FFFFFF" /><!--
+          --><label for="coloramber" style="background-color:#581507">AMBER</label><!--
+          --><input type="radio" name="color" id="coloryellow" value="#FFFF00|#404000|#808000|#FFFFFF" /><!--
           --><label for="coloryellow" style="background-color:#808000">YELLOW</label><!--
-          --><input type="radio" name="color" id="colorgreen" value="#00FF00|#003000|#006000" /><!--
+          --><input type="radio" name="color" id="colorgreen" value="#00FF00|#003000|#006000|#FFFFFF" /><!--
           --><label for="colorgreen" style="background-color:#006000">GREEN</label><!--
-          --><input type="radio" name="color" id="colorblue" value="#00FFFF|#003040|#006080" /><!--
+          --><input type="radio" name="color" id="colorblue" value="#00FFFF|#003040|#006080|#FFFFFF" /><!--
           --><label for="colorblue" style="background-color:#006080">BLUE</label><!--
-          --><input type="radio" name="color" id="colorpurple" value="#FF00FF|#300030|#600060" /><!--
+          --><input type="radio" name="color" id="colornavy" value="#5865f2|#08116a|#0b168e|#FFFFFF" /><!--
+          --><label for="colornavy" style="background-color:#08116a">NAVY</label><!--
+          --><input type="radio" name="color" id="colorpurple" value="#FF00FF|#300030|#600060|#FFFFFF" /><!--
           --><label for="colorpurple" style="background-color:#600060">PURPLE</label><!--
-          --><input type="radio" name="color" id="colordark" value="#FFFF00|#202020|#404040" checked /><!--
-          --><label for="colordark" style="background-color:#404040">DARK</label><br /><!--
-          --><input type="radio" name="color" id="colortrans" value="#FFFF00|url(../assets/trans.png)|#404040" /><!--
+          --><input type="radio" name="color" id="colordark" value="#FFFF00|#202020|#404040|#FFFFFF" checked /><!--
+          --><label for="colordark" style="background-color:#404040">DARK</label><!--
+          --><input type="radio" name="color" id="colorlight" value="#FFFF00|#d0d0d0|#b0b0b0|#000000" checked /><!--
+          --><label for="colorlight" style="background-color:#d0d0d0;color:#000000;">LIGHT</label><br /><!--
+          --><input type="radio" name="color" id="colortrans" value="#FFFF00|url(../assets/trans.png)|#404040|#FFFFFF" /><!--
           --><label for="colortrans" style="background:url(./assets/trans.png)">TRANS</label><!--
-          --><input type="radio" name="color" id="colorrainbow" value="#FFFF00|url(../assets/rainbow.png)|#404040" /><!--
+          --><input type="radio" name="color" id="colorrainbow" value="#FFFF00|url(../assets/rainbow.png)|#404040|#FFFFFF" /><!--
           --><label for="colorrainbow" style="background:url(./assets/rainbow.png)">RAINBOW</label><br />
           <p class="dlg-top">Customize Background</p>
           <input type="radio" name="background" id="bgnone" value="../assets/none.png" /><!--
@@ -83,7 +89,11 @@
           --><input type="radio" name="background" id="bgsport" value="../assets/sport.png" /><!--
           --><label for="bgsport" style="background-image: url(./assets/sport.png)">SPORT</label><!--
           --><input type="radio" name="background" id="bgmark" value="../assets/mark.png" /><!--
-          --><label for="bgmark" style="background-image: url(./assets/mark.png)">MARK</label><br />
+          --><label for="bgmark" style="background-image: url(./assets/mark.png)">MARK</label><!--
+          --><input type="radio" name="background" id="bgtile" value="../assets/tile.png" /><!--
+          --><label for="bgtile" style="background-image: url(./assets/tile.png)">TILE</label><!--
+          --><input type="radio" name="background" id="bgtiletwo" value="../assets/tile2.png" /><!--
+          --><label for="bgtiletwo" style="background-image: url(./assets/tile2.png)">DIAG</label><br />
           <div>
             <input type="submit" name="action" value="DONE"/>
           </div>
@@ -127,7 +137,6 @@
       </div>
     </div>
     <div class="scrim--" onclick="document.querySelector('.header').classList.remove('wide')"> </div>
-    <script src="./canvas.js"></script>
     <script>
 var elem = document.documentElement;
 
@@ -160,15 +169,17 @@ document.querySelector("#color").addEventListener("submit", (e) => {
   document.documentElement.style.setProperty('--main-color', colors[0]);
   document.documentElement.style.setProperty('--background', colors[1]);
   document.documentElement.style.setProperty('--background-light', colors[2]);
+  document.documentElement.style.setProperty('--foreground', colors[3]);
   document.documentElement.style.setProperty('--background-image', "url(" + formData.get("background") + ")");
   document.querySelector('.scr-dialog--').classList.remove('open');
   event.preventDefault();
 })
 
-var colors = (localStorage.getItem("colors") ?? "#FFFF00|#202020|#404040").split("|");
+var colors = (localStorage.getItem("colors") ?? "#FFFF00|#202020|#404040|#FFFFFF").split("|");
 document.documentElement.style.setProperty('--main-color', colors[0]);
 document.documentElement.style.setProperty('--background', colors[1]);
 document.documentElement.style.setProperty('--background-light', colors[2]);
+  document.documentElement.style.setProperty('--foreground', colors[3]);
   document.documentElement.style.setProperty('--background-image', "url(" + (localStorage.getItem("background") ?? "../assets/clock.png") + ")");
 
 document.querySelector("#color").addEventListener("change", (e) => {
@@ -176,6 +187,7 @@ document.querySelector("#color").addEventListener("change", (e) => {
   var colors = formData.get("color").split("|");
   document.documentElement.style.setProperty('--main-color', colors[0]);
   document.documentElement.style.setProperty('--background', colors[1]);
+  document.documentElement.style.setProperty('--foreground', colors[3]);
   document.documentElement.style.setProperty('--background-light', colors[2]);
 })
 
@@ -194,5 +206,6 @@ document.querySelector("#timezone").addEventListener("submit", (e) => {
   document.querySelector('.scr-timezone--').classList.remove('open');
 })
     </script>
+    <script src="./canvas.js"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/styles/clock.css b/styles/clock.css
index ded14bc..b495531 100644
--- a/styles/clock.css
+++ b/styles/clock.css
@@ -18,7 +18,7 @@
   overflow: hidden;
   padding: 16px;
   box-sizing: border-box;
-  color: white;
+  color: var(--foreground);
   margin: 16px 0;
 }
 
@@ -40,7 +40,7 @@
   margin: 0;
   margin-top: 16px;
   padding: 0;
-  color: white;
+  color: var(--foreground);
   font-weight: lighter;
   vertical-align: middle;
 }
@@ -55,14 +55,14 @@
 .body .clock div.labels * {
   margin: 0;
   padding: 0;
-  color: white;
+  color: var(--foreground);
   font-weight: lighter;
   display: inline-block;
   vertical-align: middle;
 }
 
 .body .clock div.labels .timezone {
-  color: #c0c0c0;
+  color: #888888;
 }
 
 canvas {
@@ -83,7 +83,7 @@ textarea {
   border: none;
   border-radius: 4px;
   background-color: #00000040;
-  color: white;
+  color: var(--foreground);
 }
 
 .deleteclock {
@@ -93,7 +93,7 @@ textarea {
   padding: 0;
   border: none;
   background-color: #FF000080;
-  color: white;
+  color: var(--foreground);
   border-radius: 16px;
   transition: background-color 0.125s;
 }
diff --git a/styles/dialog.css b/styles/dialog.css
index e2d1cd8..a0e9ea7 100644
--- a/styles/dialog.css
+++ b/styles/dialog.css
@@ -17,7 +17,7 @@
   min-height: 128px;
   background-color: var(--background-light);
   transition: background-color 0.125s;
-  color: white;
+  color: var(--foreground);
   border-radius: 8px;
   padding: 16px;
   box-sizing: border-box;
@@ -83,6 +83,7 @@ input[type="radio"] + label {
   height: 64px;
   border-radius: 4px;
   box-shadow: 0 0 4px 2px rgba(0,0,0,0.25);
+  color: #FFFFFF;
   transition: border 0.25s;
   box-sizing: border-box;
   border: 8px solid transparent;
@@ -90,6 +91,10 @@ input[type="radio"] + label {
   background-repeat: no-repeat;
 }
 
+input[type="radio"] + label[for^="bg"] {
+  color: var(--foreground);
+}
+
 input[type="radio"]:checked + label {
   border: 8px solid #FFF6;
 }
@@ -108,5 +113,5 @@ input[type="radio"]:focus + label {
   border: none;
   border-radius: 4px;
   background-color: #00000040;
-  color: white;
+  color: var(--foreground);
 }
\ No newline at end of file
diff --git a/styles/root.css b/styles/root.css
index bc909f6..5fff121 100644
--- a/styles/root.css
+++ b/styles/root.css
@@ -2,5 +2,6 @@
   --main-color: #FFFF00;
   --background: #202020;
   --background-light: #404040;
+  --foreground: #FFFFFF;
   --background-image: url("../assets/clock.png");
 }
\ No newline at end of file
diff --git a/styles/style.css b/styles/style.css
index d351bc0..231bb9d 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -12,7 +12,7 @@ body {
   background-image: var(--background-image);
   background-size: 128px;
   background-position: center;
-  opacity: 0.15;
+  opacity: 0.35;
   position: fixed;
   height: 100%;
   width: 100%;
@@ -110,7 +110,7 @@ body {
   margin: none;
   background-color: transparent;
   transition: background-color 0.125s;
-  color: #FFFFFF;
+  color: var(--foreground);
   position: relative;
   display: flex;
   flex-direction: row;
@@ -162,7 +162,7 @@ body {
 .header.wide button::after {
   left: 48px;
   top: calc(50% - 7px);
-  color: white;
+  color: var(--foreground);
   width: initial;
   height: 14px;
   padding: 0;
@@ -182,7 +182,7 @@ sep {
   width: 100%;
   height: 0;
   background-color: transparent;
-  border: 1px dashed #FFFFFF;
+  border: 1px dashed var(--foreground);
   margin: 4px;
   z-index: 9;
 }
@@ -212,7 +212,7 @@ sep {
   border: none;
   border-radius: 16px;
   background-color: transparent;
-  color: white;
+  color: var(--foreground);
 }
 
 .poplight button.hide::after {