🎨 https://github.com/siyuan-note/siyuan/issues/8873

app/src/protyle/render/av/layout.ts

@@ -6,7 +6,7 @@ import {getFieldsByData} from "./view";
 
 export const getLayoutHTML = (data: IAV) => {
     let html = "";
-    const view = data.view as IAVGallery;
+    const view = data.view as IAVKanban;
     if (data.viewType === "gallery" || data.viewType === "kanban") {
         let coverFromTitle = "";
         if (view.coverFrom === 0) {
@@ -100,7 +100,7 @@ export const getLayoutHTML = (data: IAV) => {
         html += `<label class="b3-menu__item">
     <span class="fn__flex-center">${window.siyuan.languages.useBackground}</span>
     <span class="fn__space fn__flex-1"></span>
-    <input data-type="toggle-kanban-bg" type="checkbox" class="b3-switch b3-switch--menu" ${view.displayFieldName ? "checked" : ""}>
+    <input data-type="toggle-kanban-bg" type="checkbox" class="b3-switch b3-switch--menu" ${view.fillColBackgroundColor ? "checked" : ""}>
 </label>`;
     }
     return html + `<button class="b3-menu__item" data-type="set-page-size" data-size="${view.pageSize}">
@@ -154,6 +154,24 @@ export const bindLayoutEvent = (options: {
         }]);
         options.data.view.showIcon = checked;
     });
+    const toggleBgElement = options.menuElement.querySelector('.b3-switch[data-type="toggle-kanban-bg"]') as HTMLInputElement;
+    toggleBgElement.addEventListener("change", () => {
+        const avID = options.blockElement.getAttribute("data-av-id");
+        const blockID = options.blockElement.getAttribute("data-node-id");
+        const checked = toggleBgElement.checked;
+        transaction(options.protyle, [{
+            action: "setAttrViewFillColBackgroundColor",
+            avID,
+            blockID,
+            data: checked
+        }], [{
+            action: "setAttrViewFillColBackgroundColor",
+            avID,
+            blockID,
+            data: !checked
+        }]);
+        (options.data.view as IAVKanban).fillColBackgroundColor = checked;
+    })
     const toggleWrapElement = options.menuElement.querySelector('.b3-switch[data-type="toggle-entries-wrap"]') as HTMLInputElement;
     toggleWrapElement.addEventListener("change", () => {
         const avID = options.blockElement.getAttribute("data-av-id");

app/src/protyle/render/av/render.ts

@@ -688,6 +688,23 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => {
         });
         return;
     }
+    if (operation.action === "setAttrViewFillColBackgroundColor") {
+        Array.from(protyle.wysiwyg.element.querySelectorAll(`.av[data-av-id="${operation.avID}"]`)).forEach((avItem: HTMLElement) => {
+            avItem.querySelectorAll(".av__kanban-group").forEach(item => {
+                if (item.getAttribute("style")) {
+                    let selectBg;
+                    const nameElement = item.querySelector(".av__group-title .b3-chip") as HTMLElement;
+                    if (nameElement) {
+                        selectBg = getComputedStyle(document.documentElement).getPropertyValue(`--b3-font-background${nameElement.style.backgroundColor.slice(-2, -1)}`);
+                    } else {
+                        selectBg = getComputedStyle(document.documentElement).getPropertyValue("--b3-border-color");
+                    }
+                    item.setAttribute("style", `--b3-av-kanban-border:${selectBg};--b3-av-kanban-bg:${selectBg}29;--b3-av-kanban-content-bg:${selectBg}47;--b3-av-kanban-content-hover-bg:${selectBg}5c;`);
+                }
+            });
+        });
+        return;
+    }
     if (operation.action === "setAttrViewFitImage") {
         Array.from(protyle.wysiwyg.element.querySelectorAll(`.av[data-av-id="${operation.avID}"] .av__gallery-img`)).forEach((item: HTMLElement) => {
             if (operation.data) {

app/src/protyle/wysiwyg/transaction.ts

@@ -878,7 +878,7 @@ export const onTransaction = (protyle: IProtyle, operation: IOperation, isUndo:
         "setAttrViewBlockView", "setAttrViewCardSize", "setAttrViewCardAspectRatio", "hideAttrViewName", "setAttrViewShowIcon",
         "setAttrViewWrapField", "setAttrViewGroup", "removeAttrViewGroup", "hideAttrViewGroup", "sortAttrViewGroup",
         "foldAttrViewGroup", "hideAttrViewAllGroups", "setAttrViewFitImage", "setAttrViewDisplayFieldName",
-        "insertAttrViewBlock", "setAttrViewColDateFillSpecificTime"].includes(operation.action)) {
+        "insertAttrViewBlock", "setAttrViewColDateFillSpecificTime", "setAttrViewFillColBackgroundColor"].includes(operation.action)) {
         // 撤销 transaction 会进行推送，需使用推送来进行刷新最新数据 https://github.com/siyuan-note/siyuan/issues/13607
         if (!isUndo) {
             refreshAV(protyle, operation);

app/src/types/index.d.ts

@@ -71,6 +71,7 @@ type TOperation =
     | "sortAttrViewGroup"
     | "foldAttrViewGroup"
     | "setAttrViewDisplayFieldName"
+    | "setAttrViewFillColBackgroundColor"
 type TBazaarType = "templates" | "icons" | "widgets" | "themes" | "plugins"
 type TCardType = "doc" | "notebook" | "all"
 type TEventBus = "ws-main" | "sync-start" | "sync-end" | "sync-fail" |