diff --git a/package-lock.json b/package-lock.json
index 9e9f7910..7967c34e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "nightTab",
-  "version": "5.17.0",
+  "version": "5.18.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index f79d7225..5dd7c8b3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nightTab",
-  "version": "5.17.0",
+  "version": "5.18.0",
   "description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
   "main": "index.js",
   "scripts": {
diff --git a/src/css/theme.css b/src/css/theme.css
index 659d0422..3cb4ff56 100644
--- a/src/css/theme.css
+++ b/src/css/theme.css
@@ -20,7 +20,6 @@
   transition: height var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast), border-radius var(--layout-timing-extra-fast);
 }
 
-
 .theme-custom-control {
   border-radius: 0 0 var(--theme-radius) var(--theme-radius);
   width: 100%;
@@ -100,6 +99,14 @@
   z-index: 1;
 }
 
+.theme-preset-background-01 {
+  background-color: rgb(var(--theme-preset-background-01));
+}
+
+.theme-custom-background-01 {
+  background-color: rgb(var(--theme-custom-background-01));
+}
+
 .theme-preset-background-02,
 .theme-custom-background-02 {
   z-index: 2;
@@ -107,6 +114,14 @@
   transition-delay: var(--layout-duration-03);
 }
 
+.theme-preset-background-02 {
+  background-color: rgb(var(--theme-preset-background-02));
+}
+
+.theme-custom-background-02 {
+  background-color: rgb(var(--theme-custom-background-02));
+}
+
 .theme-preset-background-03,
 .theme-custom-background-03 {
   z-index: 3;
@@ -114,6 +129,14 @@
   transition-delay: var(--layout-duration-02);
 }
 
+.theme-preset-background-03 {
+  background-color: rgb(var(--theme-preset-background-03));
+}
+
+.theme-custom-background-03 {
+  background-color: rgb(var(--theme-custom-background-03));
+}
+
 .theme-preset-background-04,
 .theme-custom-background-04 {
   z-index: 4;
@@ -121,12 +144,28 @@
   transition-delay: var(--layout-duration-01);
 }
 
+.theme-preset-background-04 {
+  background-color: rgb(var(--theme-preset-background-04));
+}
+
+.theme-custom-background-04 {
+  background-color: rgb(var(--theme-custom-background-04));
+}
+
 .theme-preset-accent,
 .theme-custom-accent {
   z-index: 5;
   clip-path: circle(30% at 100% 100%);
 }
 
+.theme-preset-accent {
+  background-color: rgb(var(--theme-preset-accent));
+}
+
+.theme-custom-accent {
+  background-color: rgb(var(--theme-custom-accent));
+}
+
 .is-theme-custom-edit .theme-custom-accent {
   clip-path: circle(30% at 100% 60%);
 }
@@ -288,7 +327,6 @@
   height: 1.5em;
   min-width: 1.5em;
   min-height: 1.5em;
-  min-height: initial;
 }
 
 .theme-accent-preset-item:focus,
@@ -297,7 +335,6 @@
   background-color: hsl(var(--theme-accent-preset-item-color-h), calc(var(--theme-accent-preset-item-color-s) * 1%), calc(var(--theme-accent-preset-item-color-l) * 1%));
 }
 
-
 @media (min-width: 700px) {
   .theme-accent-preset-item {
     width: 2em;
diff --git a/src/js/theme.js b/src/js/theme.js
index b22741e1..e12be697 100644
--- a/src/js/theme.js
+++ b/src/js/theme.js
@@ -2080,19 +2080,31 @@ var theme = (function() {
       var hsl = arrayItem.color.hsl;
       for (var i = 1; i <= shadeSteps; i++) {
         if (i > 1) {
-          if (arrayItem.style == "dark") {
+          var shiftDark = function() {
             rgb = helper.convertColor.hsl.rgb({
               h: hsl.h,
               s: hsl.s,
               l: hsl.l - ((arrayItem.color.contrast.dark) * (i * 2))
             });
-          } else if (arrayItem.style == "light") {
+          };
+          var shiftLight = function() {
             rgb = helper.convertColor.hsl.rgb({
               h: hsl.h,
               s: hsl.s,
               l: hsl.l + ((arrayItem.color.contrast.light) * (i * 2))
             });
           };
+          if (arrayItem.style == "dark") {
+            shiftDark();
+          } else if (arrayItem.style == "light") {
+            shiftLight();
+          } else if (arrayItem.style == "system") {
+            if (window.matchMedia("(prefers-color-scheme:dark)").matches) {
+              shiftDark();
+            } else if (window.matchMedia("(prefers-color-scheme:light)").matches) {
+              shiftLight();
+            };
+          };
         };
         for (var colorKey in rgb) {
           if (rgb[colorKey] < 0) {
@@ -2103,11 +2115,11 @@ var theme = (function() {
           rgb[colorKey] = Math.round(rgb[colorKey]);
         };
         var themePresetBackground = helper.node("span|class:theme-preset-background-0" + i);
-        themePresetBackground.style.setProperty("background-color", "rgb(" + rgb.r + ", " + rgb.g + ", " + rgb.b + ")");
+        themePresetPreview.style.setProperty("--theme-preset-background-0" + i, rgb.r + ", " + rgb.g + ", " + rgb.b);
         themePresetPreview.appendChild(themePresetBackground);
       };
       var themePresetAccent = helper.node("span|class:theme-preset-accent");
-      themePresetAccent.style.setProperty("background-color", "rgb(" + arrayItem.accent.rgb.r + ", " + arrayItem.accent.rgb.g + ", " + arrayItem.accent.rgb.b + ")");
+      themePresetPreview.style.setProperty("--theme-preset-accent", arrayItem.accent.rgb.r + ", " + arrayItem.accent.rgb.g + ", " + arrayItem.accent.rgb.b);
       themePresetPreview.appendChild(themePresetAccent);
       if (arrayItem.name != null && arrayItem.name != "") {
         var themePresetName = helper.node("span:" + arrayItem.name + "|class:theme-preset-name");
@@ -2200,11 +2212,11 @@ var theme = (function() {
               rgb[colorKey] = Math.round(rgb[colorKey]);
             };
             var themeCustomBackground = helper.node("span|class:theme-custom-background-0" + i);
-            themeCustomBackground.style.setProperty("background-color", "rgb(" + rgb.r + ", " + rgb.g + ", " + rgb.b + ")");
+            themeCustomPreview.style.setProperty("--theme-custom-background-0" + i, rgb.r + ", " + rgb.g + ", " + rgb.b);
             themeCustomPreview.appendChild(themeCustomBackground);
           };
           var themeCustomAccent = helper.node("span|class:theme-custom-accent");
-          themeCustomAccent.style.setProperty("background-color", "rgb(" + arrayItem.accent.rgb.r + ", " + arrayItem.accent.rgb.g + ", " + arrayItem.accent.rgb.b + ")");
+          themeCustomPreview.style.setProperty("--theme-custom-accent", arrayItem.accent.rgb.r + ", " + arrayItem.accent.rgb.g + ", " + arrayItem.accent.rgb.b);
           themeCustomPreview.appendChild(themeCustomAccent);
           if (arrayItem.name != null && arrayItem.name != "") {
             var themeCustomName = helper.node("span:" + arrayItem.name + "|class:theme-custom-name");
diff --git a/src/js/version.js b/src/js/version.js
index 3fa6b7fb..05d2517a 100644
--- a/src/js/version.js
+++ b/src/js/version.js
@@ -1,6 +1,6 @@
 var version = (function() {
 
-  var current = "5.17.0";
+  var current = "5.18.0";
 
   var name = "Zonked Tarsier";
 
diff --git a/src/manifest.json b/src/manifest.json
index 9d7d3ae5..ff318372 100644
--- a/src/manifest.json
+++ b/src/manifest.json
@@ -2,7 +2,7 @@
   "name": "nightTab",
   "short_name": "nightTab",
   "description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
-  "version": "5.17.0",
+  "version": "5.18.0",
   "manifest_version": 2,
   "chrome_url_overrides": {
     "newtab": "index.html"