Visual Studio Code Customize your Own Edit Theme

VSCode

Tool

發佈日期: 2017-05-05

更新日期: 2024-08-05

文章字數: 506

閱讀時間: 2 分

閱讀次數:

介紹如何修改 VSCode 整個 Editor 配色．

cover

在 April 2017 Microsoft 發佈了新版的 VScode (Version 1.12.1 ) 增添了 Workbench theming 的功能，可以讓我們客製化整個編輯器的配色．

vscode_latest_version

有美感且有興趣完全打造自己風格的編輯器請參考官方說明：Theme Color Reference.

如果你沒有美感也關係，也可以直接套用預設的幾個 Theme :

vscode_plate

vscode_default_theme

或是下載別人的 Theme Extension:

vscode_theme_download

這邊帶大家看幾個修改就好：

How to Customize Your Activity Bar Color

"workbench.colorCustomizations": {
    "activityBar.background": "#cd9731"
}

修改前：

customize_activity_Bar

修改後：

customize_activity_Bar_after

How to Customize Editor Active Tab Color

"workbench.colorCustomizations": {
  "tab.activeBackground": "#cd9731"
}

修改前：

customize_tab

修改後：

customize_tab_after

How to Switch to different Theme

如何切換不同 Theme 請參考下方影片：

VSCode Theme Generator

如果你已經有想要呈現的色彩風格的色碼，也可以使用官方的vscode-theme-generator

使用與安裝很簡單，只需先下載官方的原始碼：

git clone https://github.com/Tyriar/vscode-theme-generator-quick-start
cd vscode-theme-generator-quick-start
npm install

然後透過下方程式碼修改 index.ts ：

import { generateTheme, IColorSet } from 'vscode-theme-generator';
const colorSet: IColorSet = {
  base: {
    background: '#12171F',
    foreground: '#EFEFEF',
    color1: '#399EF4',
    color2: '#DA6771',
    color3: '#4EB071',
    color4: '#FFF099',
  }
};
generateTheme('Blackie Theme', colorSet, path.join(__dirname, 'theme.json'));