diff --git a/dist/index.css b/dist/index.css
index 5f4b2c2d..e48ea5cb 100644
--- a/dist/index.css
+++ b/dist/index.css
@@ -121,6 +121,15 @@ main {
 [color]:not([color=standard])[selected].fill-color {
   color: var(--primary);
 }
+[color]:not([color=standard]).background {
+  --luma: var(--subtle-luma);
+  background: hsl(var(--hue), 90%, var(--luma));
+}
+@media (prefers-color-scheme: dark) {
+  [color]:not([color=standard]).background {
+    --luma: var(--subtle-luma-dark);
+  }
+}
 [color]:not([color=standard]).subtle-background {
   --luma: var(--subtle-luma);
   background: hsl(var(--hue), 30%, var(--luma));
diff --git a/dist/index.js b/dist/index.js
index 7e0a0ff7..92662b19 100644
--- a/dist/index.js
+++ b/dist/index.js
@@ -2019,7 +2019,7 @@
         }
       }
     );
-    return /* @__PURE__ */ createElement("div", { id: "task-page" }, /* @__PURE__ */ createElement("div", { class: "pane side" }, /* @__PURE__ */ createElement("div", { class: "toolbar" }, /* @__PURE__ */ createElement("div", { class: "flex-row width-input" }, /* @__PURE__ */ createElement(
+    return /* @__PURE__ */ createElement("div", { id: "task-page" }, /* @__PURE__ */ createElement("div", { "set:color": taskPageViewModel.chatViewModel.displayedColor, class: "pane side background" }, /* @__PURE__ */ createElement("div", { class: "toolbar" }, /* @__PURE__ */ createElement("div", { class: "flex-row width-input" }, /* @__PURE__ */ createElement(
       "input",
       {
         "bind:value": taskPageViewModel.newBoardNameInput,
diff --git a/src/colors.css b/src/colors.css
index 62b1909a..23fa8d05 100644
--- a/src/colors.css
+++ b/src/colors.css
@@ -58,6 +58,18 @@
   color: var(--primary);
 }
 
+/* background */
+[color]:not([color="standard"]).background {
+  --luma: var(--subtle-luma);
+  background: hsl(var(--hue), 90%, var(--luma));
+}
+
+@media (prefers-color-scheme: dark) {
+  [color]:not([color="standard"]).background {
+    --luma: var(--subtle-luma-dark);
+  }
+}
+
 /* subtle */
 [color]:not([color="standard"]).subtle-background {
   --luma: var(--subtle-luma);
@@ -145,6 +157,7 @@
   --accent-text-luma: 100%;
   --accent-text-luma-dark: 100%;
 
+  
   --subtle-luma: 95%;
   --subtle-luma-dark: 5%;
 }