品牌配色提取專家

從官方網站提取品牌配色並生成 VS Code 主題色彩方案。

使用時機

當需要為 VS Code 主題提取品牌官方配色時使用此 skill。

工作流程

1. 取得品牌配色

使用 WebFetch 訪問品牌官網或設計系統頁面，提取以下資訊：

優先來源順序：

1. 官方 Brand Guidelines / Design System 頁面
2. 官網首頁 CSS 變數
3. 官方 Press Kit / Media Kit
4. 產品介面截圖分析

需要提取的色彩：

• Primary Color（主色）
• Secondary Color（輔助色）
• Accent Color（強調色）
• Background Colors（背景色系）
• Text Colors（文字色系）
• Border/Divider Colors（邊框色）
• Success/Warning/Error Colors（狀態色）

2. 色彩分析與轉換

淺色主題原則：

• 編輯器背景：不要純白 #FFFFFF，使用品牌淺色背景（如 #F9FAFB、#FAF9F7）
• 側邊欄背景：比編輯器稍深 2-3 階
• 對比度：文字與背景對比度 ≥ 4.5:1（WCAG AA）
• 強調色：使用品牌主色

深色主題原則：

• 編輯器背景：#1A-2A 範圍內的深色
• 側邊欄背景：比編輯器稍深或稍淺
• 文字：#D0-F0 範圍的淺色
• 強調色：品牌主色的亮色變體

VS Code 主題結構

1. UI 色彩 (colors)

編輯器介面元素的顏色，必須設定以下所有類別：

編輯器核心

| 屬性 | 說明 | |------|------| | editor.background | 編輯器背景 | | editor.foreground | 編輯器前景（預設文字色） | | editor.lineHighlightBackground | 當前行高亮背景 | | editor.selectionBackground | 選取文字背景 | | editor.selectionHighlightBackground | 相同選取項高亮 | | editor.wordHighlightBackground | 讀取存取時單字高亮 | | editor.wordHighlightStrongBackground | 寫入存取時單字高亮 | | editor.findMatchBackground | 搜尋匹配項背景 | | editor.findMatchHighlightBackground | 其他搜尋匹配項 | | editor.hoverHighlightBackground | 懸停高亮 | | editor.rangeHighlightBackground | 範圍高亮（如快速開啟） | | editorCursor.foreground | 游標顏色 | | editorWhitespace.foreground | 空白字元顏色 | | editorIndentGuide.background | 縮排參考線 | | editorIndentGuide.activeBackground | 作用中縮排線 | | editorRuler.foreground | 尺規顏色 |

行號與裝訂線

| 屬性 | 說明 | |------|------| | editorLineNumber.foreground | 行號顏色 | | editorLineNumber.activeForeground | 當前行號顏色 | | editorGutter.background | 裝訂線背景 | | editorGutter.modifiedBackground | 已修改行標記 | | editorGutter.addedBackground | 新增行標記 | | editorGutter.deletedBackground | 刪除行標記 |

括號與配對

| 屬性 | 說明 | |------|------| | editorBracketMatch.background | 配對括號背景 | | editorBracketMatch.border | 配對括號邊框 | | editorBracketHighlight.foreground1 | 括號配對色 1 | | editorBracketHighlight.foreground2 | 括號配對色 2 | | editorBracketHighlight.foreground3 | 括號配對色 3 | | editorBracketHighlight.foreground4 | 括號配對色 4 | | editorBracketHighlight.foreground5 | 括號配對色 5 | | editorBracketHighlight.foreground6 | 括號配對色 6 |

錯誤與警告

| 屬性 | 說明 | |------|------| | editorError.foreground | 錯誤波浪線 | | editorWarning.foreground | 警告波浪線 | | editorInfo.foreground | 資訊波浪線 | | editorHint.foreground | 提示波浪線 |

未使用程式碼

| 屬性 | 說明 | 建議值 | |------|------|--------| | editorUnnecessaryCode.opacity | 未使用程式碼透明度 | #00000077 | | editorUnnecessaryCode.border | 未使用程式碼邊框 | #00000000 |

活動欄 (Activity Bar)

| 屬性 | 說明 | |------|------| | activityBar.background | 活動欄背景 | | activityBar.foreground | 活動欄前景（選中圖示） | | activityBar.inactiveForeground | 未選中圖示 | | activityBar.border | 活動欄邊框 | | activityBarBadge.background | 徽章背景 | | activityBarBadge.foreground | 徽章文字 |

側邊欄 (Side Bar)

| 屬性 | 說明 | |------|------| | sideBar.background | 側邊欄背景 | | sideBar.foreground | 側邊欄前景 | | sideBar.border | 側邊欄邊框 | | sideBarTitle.foreground | 側邊欄標題 | | sideBarSectionHeader.background | 區段標題背景 | | sideBarSectionHeader.foreground | 區段標題前景 | | sideBarSectionHeader.border | 區段標題邊框 |

標題欄 (Title Bar)

| 屬性 | 說明 | |------|------| | titleBar.activeBackground | 作用中標題背景 | | titleBar.activeForeground | 作用中標題前景 | | titleBar.inactiveBackground | 非作用中背景 | | titleBar.inactiveForeground | 非作用中前景 | | titleBar.border | 標題欄邊框 |

狀態欄 (Status Bar)

| 屬性 | 說明 | |------|------| | statusBar.background | 狀態欄背景 | | statusBar.foreground | 狀態欄前景 | | statusBar.border | 狀態欄邊框 | | statusBar.debuggingBackground | 除錯中背景 | | statusBar.debuggingForeground | 除錯中前景 | | statusBar.noFolderBackground | 無資料夾背景 | | statusBar.noFolderForeground | 無資料夾前景 | | statusBarItem.hoverBackground | 懸停背景 | | statusBarItem.activeBackground | 點擊背景 | | statusBarItem.prominentBackground | 醒目項目背景 | | statusBarItem.prominentHoverBackground | 醒目項目懸停 | | statusBarItem.remoteBackground | 遠端連線背景 | | statusBarItem.remoteForeground | 遠端連線前景 |

標籤 (Tabs)

| 屬性 | 說明 | |------|------| | tab.activeBackground | 作用中標籤背景 | | tab.activeForeground | 作用中標籤前景 | | tab.inactiveBackground | 非作用中標籤背景 | | tab.inactiveForeground | 非作用中標籤前景 | | tab.border | 標籤邊框 | | tab.activeBorder | 作用中標籤邊框 | | tab.activeBorderTop | 作用中標籤上邊框 | | tab.unfocusedActiveBackground | 非焦點作用中背景 | | tab.unfocusedActiveForeground | 非焦點作用中前景 | | tab.hoverBackground | 懸停背景 | | tab.hoverForeground | 懸停前景 |

編輯器群組與標籤列

| 屬性 | 說明 | |------|------| | editorGroup.border | 編輯器群組邊框 | | editorGroup.dropBackground | 拖放背景 | | editorGroupHeader.tabsBackground | 標籤列背景 | | editorGroupHeader.tabsBorder | 標籤列邊框 | | editorGroupHeader.noTabsBackground | 無標籤時背景 |

面板 (Panel)

| 屬性 | 說明 | |------|------| | panel.background | 面板背景 | | panel.border | 面板邊框 | | panelTitle.activeBorder | 作用中標題邊框 | | panelTitle.activeForeground | 作用中標題前景 | | panelTitle.inactiveForeground | 非作用中標題前景 |

終端機 (Terminal)

| 屬性 | 說明 | |------|------| | terminal.background | 終端機背景 | | terminal.foreground | 終端機前景 | | terminal.ansiBlack | ANSI 黑 | | terminal.ansiRed | ANSI 紅 | | terminal.ansiGreen | ANSI 綠 | | terminal.ansiYellow | ANSI 黃 | | terminal.ansiBlue | ANSI 藍 | | terminal.ansiMagenta | ANSI 洋紅 | | terminal.ansiCyan | ANSI 青 | | terminal.ansiWhite | ANSI 白 | | terminal.ansiBrightBlack | ANSI 亮黑 | | terminal.ansiBrightRed | ANSI 亮紅 | | terminal.ansiBrightGreen | ANSI 亮綠 | | terminal.ansiBrightYellow | ANSI 亮黃 | | terminal.ansiBrightBlue | ANSI 亮藍 | | terminal.ansiBrightMagenta | ANSI 亮洋紅 | | terminal.ansiBrightCyan | ANSI 亮青 | | terminal.ansiBrightWhite | ANSI 亮白 | | terminalCursor.foreground | 終端機游標 | | terminalCursor.background | 終端機游標背景 |

輸入框與下拉選單

| 屬性 | 說明 | |------|------| | input.background | 輸入框背景 | | input.foreground | 輸入框前景 | | input.border | 輸入框邊框 | | input.placeholderForeground | 佔位文字 | | inputOption.activeBackground | 選項作用中背景 | | inputOption.activeBorder | 選項作用中邊框 | | inputValidation.errorBackground | 驗證錯誤背景 | | inputValidation.errorBorder | 驗證錯誤邊框 | | inputValidation.warningBackground | 驗證警告背景 | | inputValidation.warningBorder | 驗證警告邊框 | | inputValidation.infoBackground | 驗證資訊背景 | | inputValidation.infoBorder | 驗證資訊邊框 | | dropdown.background | 下拉選單背景 | | dropdown.foreground | 下拉選單前景 | | dropdown.border | 下拉選單邊框 |

按鈕

| 屬性 | 說明 | |------|------| | button.background | 按鈕背景 | | button.foreground | 按鈕前景 | | button.hoverBackground | 按鈕懸停背景 | | button.secondaryBackground | 次要按鈕背景 | | button.secondaryForeground | 次要按鈕前景 | | button.secondaryHoverBackground | 次要按鈕懸停 |

列表與樹狀圖

| 屬性 | 說明 | |------|------| | list.activeSelectionBackground | 作用中選取背景 | | list.activeSelectionForeground | 作用中選取前景 | | list.inactiveSelectionBackground | 非作用中選取背景 | | list.inactiveSelectionForeground | 非作用中選取前景 | | list.hoverBackground | 懸停背景 | | list.hoverForeground | 懸停前景 | | list.focusBackground | 焦點背景 | | list.focusForeground | 焦點前景 | | list.highlightForeground | 搜尋匹配高亮 | | list.dropBackground | 拖放背景 | | tree.indentGuidesStroke | 樹狀圖縮排線 |

捲軸

| 屬性 | 說明 | |------|------| | scrollbar.shadow | 捲軸陰影 | | scrollbarSlider.background | 滑塊背景 | | scrollbarSlider.hoverBackground | 滑塊懸停 | | scrollbarSlider.activeBackground | 滑塊作用中 |

迷你地圖 (Minimap)

| 屬性 | 說明 | |------|------| | minimap.findMatchHighlight | 搜尋匹配高亮 | | minimap.selectionHighlight | 選取高亮 | | minimap.errorHighlight | 錯誤高亮 | | minimap.warningHighlight | 警告高亮 | | minimapSlider.background | 滑塊背景 | | minimapSlider.hoverBackground | 滑塊懸停 | | minimapSlider.activeBackground | 滑塊作用中 | | minimapGutter.addedBackground | 新增標記 | | minimapGutter.modifiedBackground | 修改標記 | | minimapGutter.deletedBackground | 刪除標記 |

麵包屑 (Breadcrumb)

| 屬性 | 說明 | |------|------| | breadcrumb.background | 麵包屑背景 | | breadcrumb.foreground | 麵包屑前景 | | breadcrumb.focusForeground | 焦點前景 | | breadcrumb.activeSelectionForeground | 選取前景 | | breadcrumbPicker.background | 選擇器背景 |

Git 裝飾

| 屬性 | 說明 | |------|------| | gitDecoration.addedResourceForeground | 新增檔案 | | gitDecoration.modifiedResourceForeground | 修改檔案 | | gitDecoration.deletedResourceForeground | 刪除檔案 | | gitDecoration.untrackedResourceForeground | 未追蹤檔案 | | gitDecoration.ignoredResourceForeground | 忽略檔案 | | gitDecoration.conflictingResourceForeground | 衝突檔案 | | gitDecoration.submoduleResourceForeground | 子模組 | | gitDecoration.stageModifiedResourceForeground | 暫存修改 | | gitDecoration.stageDeletedResourceForeground | 暫存刪除 |

Diff 編輯器

| 屬性 | 說明 | |------|------| | diffEditor.insertedTextBackground | 新增文字背景 | | diffEditor.removedTextBackground | 刪除文字背景 | | diffEditor.insertedLineBackground | 新增行背景 | | diffEditor.removedLineBackground | 刪除行背景 | | diffEditor.diagonalFill | 對角線填充 |

合併編輯器

| 屬性 | 說明 | |------|------| | merge.currentHeaderBackground | 當前分支標題背景 | | merge.currentContentBackground | 當前分支內容背景 | | merge.incomingHeaderBackground | 傳入分支標題背景 | | merge.incomingContentBackground | 傳入分支內容背景 | | merge.border | 合併邊框 | | merge.commonHeaderBackground | 共同祖先標題背景 | | merge.commonContentBackground | 共同祖先內容背景 |

通知

| 屬性 | 說明 | |------|------| | notificationCenter.border | 通知中心邊框 | | notificationCenterHeader.background | 通知中心標題背景 | | notificationCenterHeader.foreground | 通知中心標題前景 | | notifications.background | 通知背景 | | notifications.foreground | 通知前景 | | notifications.border | 通知邊框 | | notificationLink.foreground | 通知連結 | | notificationsErrorIcon.foreground | 錯誤圖示 | | notificationsWarningIcon.foreground | 警告圖示 | | notificationsInfoIcon.foreground | 資訊圖示 |

徽章

| 屬性 | 說明 | |------|------| | badge.background | 徽章背景 | | badge.foreground | 徽章前景 |

進度條

| 屬性 | 說明 | |------|------| | progressBar.background | 進度條背景 |

選取器與命令面板

| 屬性 | 說明 | |------|------| | pickerGroup.border | 群組邊框 | | pickerGroup.foreground | 群組前景 | | quickInput.background | 快速輸入背景 | | quickInput.foreground | 快速輸入前景 | | quickInputList.focusBackground | 焦點背景 | | quickInputTitle.background | 標題背景 |

編輯器小工具

| 屬性 | 說明 | |------|------| | editorWidget.background | 小工具背景 | | editorWidget.foreground | 小工具前景 | | editorWidget.border | 小工具邊框 | | editorSuggestWidget.background | 建議小工具背景 | | editorSuggestWidget.border | 建議小工具邊框 | | editorSuggestWidget.foreground | 建議小工具前景 | | editorSuggestWidget.selectedBackground | 選取背景 | | editorSuggestWidget.highlightForeground | 匹配高亮 | | editorHoverWidget.background | 懸停小工具背景 | | editorHoverWidget.border | 懸停小工具邊框 | | editorHoverWidget.foreground | 懸停小工具前景 |

Peek 檢視

| 屬性 | 說明 | |------|------| | peekView.border | Peek 邊框 | | peekViewEditor.background | Peek 編輯器背景 | | peekViewEditor.matchHighlightBackground | 匹配高亮背景 | | peekViewResult.background | 結果背景 | | peekViewResult.fileForeground | 檔案前景 | | peekViewResult.lineForeground | 行前景 | | peekViewResult.matchHighlightBackground | 匹配高亮 | | peekViewResult.selectionBackground | 選取背景 | | peekViewResult.selectionForeground | 選取前景 | | peekViewTitle.background | 標題背景 | | peekViewTitleDescription.foreground | 標題描述前景 | | peekViewTitleLabel.foreground | 標題標籤前景 |

焦點與邊框

| 屬性 | 說明 | |------|------| | focusBorder | 焦點邊框（全域） | | contrastBorder | 對比邊框 | | contrastActiveBorder | 作用中對比邊框 | | widget.shadow | 小工具陰影 | | selection.background | 選取背景（全域） |

歡迎頁面

| 屬性 | 說明 | |------|------| | welcomePage.background | 歡迎頁背景 | | welcomePage.buttonBackground | 按鈕背景 | | welcomePage.buttonHoverBackground | 按鈕懸停 | | walkThrough.embeddedEditorBackground | 嵌入編輯器背景 |

設定編輯器

| 屬性 | 說明 | |------|------| | settings.headerForeground | 標題前景 | | settings.modifiedItemIndicator | 已修改指示 | | settings.dropdownBackground | 下拉背景 | | settings.dropdownForeground | 下拉前景 | | settings.dropdownBorder | 下拉邊框 | | settings.checkboxBackground | 核取方塊背景 | | settings.checkboxForeground | 核取方塊前景 | | settings.checkboxBorder | 核取方塊邊框 | | settings.textInputBackground | 文字輸入背景 | | settings.textInputForeground | 文字輸入前景 | | settings.textInputBorder | 文字輸入邊框 | | settings.numberInputBackground | 數字輸入背景 | | settings.numberInputForeground | 數字輸入前景 | | settings.numberInputBorder | 數字輸入邊框 |

除錯

| 屬性 | 說明 | |------|------| | debugToolBar.background | 除錯工具列背景 | | debugToolBar.border | 除錯工具列邊框 | | debugExceptionWidget.background | 例外小工具背景 | | debugExceptionWidget.border | 例外小工具邊框 | | debugConsole.infoForeground | 主控台資訊 | | debugConsole.warningForeground | 主控台警告 | | debugConsole.errorForeground | 主控台錯誤 | | debugConsole.sourceForeground | 主控台來源 | | debugConsoleInputIcon.foreground | 輸入圖示 |

測試

| 屬性 | 說明 | |------|------| | testing.iconFailed | 失敗圖示 | | testing.iconErrored | 錯誤圖示 | | testing.iconPassed | 通過圖示 | | testing.iconQueued | 排隊圖示 | | testing.iconUnset | 未設定圖示 | | testing.iconSkipped | 跳過圖示 |

擴展

| 屬性 | 說明 | |------|------| | extensionButton.prominentBackground | 安裝按鈕背景 | | extensionButton.prominentForeground | 安裝按鈕前景 | | extensionButton.prominentHoverBackground | 安裝按鈕懸停 | | extensionBadge.remoteBackground | 遠端徽章背景 | | extensionBadge.remoteForeground | 遠端徽章前景 |

2. 語法高亮 (tokenColors)

程式碼 token 的著色，必須設定以下所有 scope：

基礎

| Scope | 說明 | |-------|------| | comment | 註解 | | comment.line | 單行註解 | | comment.block | 區塊註解 | | comment.block.documentation | 文件註解 |

字串

| Scope | 說明 | |-------|------| | string | 字串 | | string.quoted.single | 單引號字串 | | string.quoted.double | 雙引號字串 | | string.template | 模板字串 | | string.regexp | 正規表達式 |

常數

| Scope | 說明 | |-------|------| | constant | 常數 | | constant.numeric | 數字 | | constant.numeric.integer | 整數 | | constant.numeric.float | 浮點數 | | constant.numeric.hex | 十六進位 | | constant.language | 語言常數 (true, false, null) | | constant.character | 字元常數 | | constant.character.escape | 跳脫字元 | | constant.other | 其他常數 |

變數

| Scope | 說明 | |-------|------| | variable | 變數 | | variable.parameter | 參數 | | variable.language | 語言變數 (this, self) | | variable.other | 其他變數 | | variable.other.readwrite | 讀寫變數 | | variable.other.constant | 常數變數 | | variable.other.property | 屬性 |

關鍵字

| Scope | 說明 | |-------|------| | keyword | 關鍵字 | | keyword.control | 控制關鍵字 (if, for, while) | | keyword.control.conditional | 條件 (if, else) | | keyword.control.loop | 迴圈 (for, while) | | keyword.control.import | 匯入 (import, from) | | keyword.control.flow | 流程控制 (return, break) | | keyword.operator | 運算子關鍵字 (new, typeof) | | keyword.other | 其他關鍵字 |

儲存

| Scope | 說明 | |-------|------| | storage | 儲存 | | storage.type | 型別宣告 (const, let, var, function) | | storage.modifier | 修飾詞 (public, private, static) |

實體名稱

| Scope | 說明 | |-------|------| | entity.name | 實體名稱 | | entity.name.function | 函數名稱 | | entity.name.class | 類別名稱 | | entity.name.type | 型別名稱 | | entity.name.tag | 標籤名稱 (HTML/XML) | | entity.name.section | 區段名稱 | | entity.name.namespace | 命名空間 | | entity.other.attribute-name | 屬性名稱 (HTML/XML) | | entity.other.inherited-class | 繼承類別 |

支援

| Scope | 說明 | |-------|------| | support | 支援 | | support.function | 內建函數 | | support.function.builtin | 語言內建函數 | | support.class | 內建類別 | | support.type | 內建型別 | | support.type.primitive | 原始型別 | | support.constant | 內建常數 | | support.variable | 內建變數 |

標點符號

| Scope | 說明 | |-------|------| | punctuation | 標點符號 | | punctuation.definition | 定義標點 | | punctuation.definition.string | 字串引號 | | punctuation.definition.comment | 註解符號 | | punctuation.definition.tag | 標籤括號 | | punctuation.separator | 分隔符 (逗號、分號) | | punctuation.accessor | 存取器 (.) | | punctuation.bracket | 括號 |

運算子

| Scope | 說明 | |-------|------| | keyword.operator | 運算子 | | keyword.operator.assignment | 賦值運算子 | | keyword.operator.arithmetic | 算術運算子 | | keyword.operator.logical | 邏輯運算子 | | keyword.operator.comparison | 比較運算子 | | keyword.operator.ternary | 三元運算子 | | keyword.operator.spread | 展開運算子 |

Meta

| Scope | 說明 | |-------|------| | meta.function | 函數區塊 | | meta.function-call | 函數呼叫 | | meta.class | 類別區塊 | | meta.block | 程式區塊 | | meta.brace | 大括號 | | meta.bracket | 中括號 | | meta.return.type | 回傳型別 | | meta.type.annotation | 型別註解 | | meta.object-literal.key | 物件鍵 | | meta.import | 匯入區塊 | | meta.export | 匯出區塊 |

無效

| Scope | 說明 | |-------|------| | invalid | 無效 | | invalid.illegal | 非法語法 | | invalid.deprecated | 已棄用 |

Markup (Markdown)

| Scope | 說明 | |-------|------| | markup.heading | 標題 | | markup.heading.1 | H1 | | markup.heading.2 | H2 | | markup.heading.3 | H3 | | markup.bold | 粗體 | | markup.italic | 斜體 | | markup.underline | 底線 | | markup.strikethrough | 刪除線 | | markup.quote | 引用 | | markup.list | 列表 | | markup.list.numbered | 有序列表 | | markup.list.unnumbered | 無序列表 | | markup.inline.raw | 行內程式碼 | | markup.raw.block | 程式碼區塊 | | markup.inserted | 插入 | | markup.deleted | 刪除 | | markup.changed | 變更 |

語言特定

JSON

| Scope | 說明 | |-------|------| | support.type.property-name.json | JSON 鍵名 | | string.json | JSON 字串值 |

CSS/SCSS

| Scope | 說明 | |-------|------| | entity.other.attribute-name.class.css | CSS 類別選擇器 | | entity.other.attribute-name.id.css | CSS ID 選擇器 | | entity.name.tag.css | CSS 標籤選擇器 | | support.type.property-name.css | CSS 屬性名 | | support.constant.property-value.css | CSS 屬性值 | | variable.scss | SCSS 變數 |

HTML/JSX

| Scope | 說明 | |-------|------| | entity.name.tag.html | HTML 標籤 | | entity.other.attribute-name.html | HTML 屬性 | | support.class.component | React 元件 | | support.class.component.jsx | JSX 元件 |

TypeScript

| Scope | 說明 | |-------|------| | entity.name.type.ts | TypeScript 型別 | | entity.name.type.interface.ts | TypeScript 介面 | | entity.name.type.enum.ts | TypeScript 列舉 | | entity.name.type.alias.ts | TypeScript 型別別名 | | meta.type.parameters.ts | 泛型參數 |

Python

| Scope | 說明 | |-------|------| | entity.name.function.decorator.python | Python 裝飾器 | | support.type.python | Python 型別 | | meta.function-call.arguments.python | Python 函數參數 |

Swift

| Scope | 說明 | |-------|------| | keyword.other.declaration-specifier.swift | Swift 宣告修飾詞 | | storage.type.swift | Swift 儲存型別 | | entity.name.type.swift | Swift 型別名稱 | | support.type.swift | Swift 支援型別 |

3. 語義高亮 (semanticTokenColors)

必須啟用 "semanticHighlighting": true，確保變數顏色正確顯示。

變數顏色規則（重要）：

• 深色主題：變數使用 #FFFFFF（白色）
• 淺色主題：變數使用 #1a1a1a（近黑色）

必須設定的 token：

| Token | 說明 | |-------|------| | variable | 變數 | | variable.readonly | 唯讀變數 | | variable.local | 區域變數 | | variable.declaration | 變數宣告 | | parameter | 參數 | | function | 函數 | | function.declaration | 函數宣告 | | function.defaultLibrary | 預設庫函數 | | method | 方法 | | method.declaration | 方法宣告 | | class | 類別 | | class.declaration | 類別宣告 | | interface | 介面 | | interface.declaration | 介面宣告 | | enum | 列舉 | | enumMember | 列舉成員 | | type | 型別 | | type.declaration | 型別宣告 | | namespace | 命名空間 | | property | 屬性 | | property.readonly | 唯讀屬性 | | property.declaration | 屬性宣告 | | macro | 巨集 | | comment | 註解 | | string | 字串 | | number | 數字 | | regexp | 正規表達式 | | operator | 運算子 |

品牌色彩映射

品牌主色 → activityBar.foreground, statusBar.background, focusBorder, editorCursor
品牌背景 → editor.background, sideBar.background, panel.background
品牌文字 → editor.foreground, sideBar.foreground
品牌輔助 → editorLineNumber.foreground, tab.inactiveForeground
品牌強調 → activityBarBadge.background, button.background

語法高亮配色建議

淺色主題：

• Comment：灰色 50-60% 亮度
• String：品牌色變體或琥珀/綠色系
• Keyword：品牌主色或深藍/紫色系
• Function：品牌輔助色或橙色系
• Class：深色強調，可加 underline
• Type：斜體，品牌色變體

深色主題：

• 所有色彩亮度 +20-30%
• 保持色相一致性

輸出格式

提供完整的 VS Code 主題 JSON，包含：

1. "semanticHighlighting": true（必須）
2. colors 物件（UI 色彩）- 必須包含上述所有類別
3. tokenColors 陣列（語法高亮）- 必須包含上述所有 scope
4. semanticTokenColors 物件（語義高亮）- 必須，確保變數顏色正確

品牌官網參考

| 品牌 | 官網 | 設計系統 | |------|------|----------| | Claude (Anthropic) | claude.ai | anthropic.com | | Microsoft Teams | teams.microsoft.com | fluent2.microsoft.design | | macOS | apple.com/macos | developer.apple.com/design | | iOS | apple.com/ios | developer.apple.com/design | | Android | android.com | m3.material.io | | Nintendo | nintendo.com | - | | Sony | sony.com | - | | shadcn/ui | ui.shadcn.com | - |

範例提取流程

1. WebFetch: https://claude.ai → 提取頁面配色
2. WebFetch: https://anthropic.com/brand → 提取品牌指南
3. 分析 CSS 變數和主要色彩
4. 建立色彩映射表
5. 生成 VS Code 主題 JSON

品質檢查

• [ ] 編輯器背景非純白/純黑
• [ ] 文字可讀性（對比度 ≥ 4.5:1）
• [ ] 品牌識別度（一眼能認出品牌）
• [ ] 語法高亮區分度
• [ ] 選取/高亮狀態清晰
• [ ] 所有 UI 色彩類別都已設定
• [ ] 所有語法高亮 scope 都已設定
• [ ] semanticHighlighting: true 已啟用
• [ ] semanticTokenColors 變數顏色已設定（深色 #FFFFFF / 淺色 #1a1a1a）
• [ ] editorUnnecessaryCode 未使用程式碼樣式已設定
• [ ] 終端機 ANSI 色彩完整
• [ ] Git 裝飾色彩清晰區分
• [ ] 括號配對色彩明顯