ButtonEdit 背景顏色（ButtonEdit Background）

本文回答一個常見問題：「為什麼表格中出現了這些藍色欄位？」

從 Native Rendering 切換到 Universal Rendering 時，開發人員和使用者經常注意到一些視覺上的變化，包括視窗消失、捲軸外觀不同、ChromeBar 的顯示方式，以及最常被問到的——表格中出現了藍色欄位。

原因一：Widget Decoration 的渲染範圍

在 Universal Rendering 中，widget decoration 會在所有已填入資料的列和欄位上顯示，而不只是目前作用中的欄位。

這意味著 BUTTONEDIT 的按鈕、DATEEDIT 的日曆圖示、COMBOBOX 的下拉選單，都會同時顯示在所有適用的列和欄位上，讓使用者能一眼看出在哪些地方可以點擊觸發對應功能。

原因二：BUTTONEDIT 的結構

BUTTONEDIT widget 在渲染時，是由一個 EDIT widget 加上一個 BUTTON widget 並排組成的。按鈕的部分遵循標準 BUTTON 的渲染方式——使用藍色背景搭配白色文字和圖示，與應用程式中的 OK/Cancel 等按鈕外觀一致。

使用者體驗的優點

這樣的設計帶來兩個使用者體驗上的好處：

1. 使用者不需要先點擊進入某個欄位，就能看到該欄位有哪些可操作的功能，一目了然地知道哪些地方可以點擊。
2. 無論按鈕是單獨使用還是作為複合 widget 的一部分，外觀都保持一致。

客製化解決方案

如果你不希望表格出現這些藍色欄位，有兩種解決方案：

方案一：CSS 控制顯示

在 GBC 自訂 CSS 中，預設隱藏 widget decoration，只在欄位獲得焦點時才顯示。以下是 SCSS 範例的概念：

/* 預設隱藏 BUTTONEDIT、DATEEDIT、COMBOBOX 的 decoration */
.gbc-TableWidget .gbc-WidgetBase-decoration {
    display: none;
}
/* 僅在 focus 時顯示 */
.gbc-TableWidget .gbc-WidgetBase--focus .gbc-WidgetBase-decoration {
    display: block;
}

實作時須針對 BUTTONEDIT、DATEEDIT、COMBOBOX 各自使用適當的選擇器，並注意涵蓋非作用中欄位（inactive）、focus 狀態，以及亮色／深色模式等各種情境。

方案二：修改 Theme 變數

透過 theme.scss.json 修改按鈕外觀的 theme 變數，將材質按鈕從「白字藍底」改為「黑字白底」，使按鈕在視覺上與一般文字欄位更為接近：

{
  "mt-button-text-color": "var(--gbc-ui-text-icon-color)",
  "mt-button-background-color": "var(--gbc-ui-field-color)"
}

修改後，按鈕就不再以藍色背景顯示，而是使用與介面欄位相同的背景色。

注意事項

Reuben 提醒：「你可能只需要其中一種解決方案」，並且在實作時必須考慮所有 widget 的組合，確保在各種狀態下（作用中、非作用中、focus、亮色模式、深色模式）都有正確的表現。