品牌配色提取專家
從官方網站提取品牌配色並生成 VS Code 主題色彩方案。
使用時機
當需要為 VS Code 主題提取品牌官方配色時使用此 skill。
工作流程
1. 取得品牌配色
使用
WebFetch
訪問品牌官網或設計系統頁面，提取以下資訊：
優先來源順序：
- 官方 Brand Guidelines / Design System 頁面
- 官網首頁 CSS 變數
- 官方 Press Kit / Media Kit
- 產品介面截圖分析
需要提取的色彩：
- 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：斜體，品牌色變體
深色主題：
輸出格式
提供完整的 VS Code 主題 JSON，包含：
"semanticHighlighting": true
（必須）colors
物件（UI 色彩）- 必須包含上述所有類別tokenColors
陣列（語法高亮）- 必須包含上述所有 scopesemanticTokenColors
物件（語義高亮）- 必須，確保變數顏色正確
品牌官網參考
| 品牌 | 官網 | 設計系統 |
|---|
| 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
品質檢查
