VSCodeやCursorの色のカスタマイズ

VisualStudioCode や Cursor の色のカスタマイズ方法です。各種テーマではしっくりこない場合は「setting.json」をいじっていけば エディタやサイドバーなど けっこう細かい変更ができます。

###route
- ファイル
- ユーザー設定
- 設定
###

###center
(img://18/511s)

###route
- 「setting」で検索
- 「settings.json で編集」(画像のオレンジの箇所) をクリック

###center
(img://18/512s)

###
 settings.json を直接編集していく

###center
(img://18/513s)

###title
settings.json 設定の参考

###
以下は参考です。"workbench.colorCustomizations" が主なポイントです

###center
(下記設定後のデザイン)
(img://18/517s)

###command
(settings.json の "workbench.colorCustomizations" 部分)

"workbench.colorCustomizations": {

//"activityBar.background":"#FF0000",
        "dropdown.background": "#3355aacc",
        "dropdown.border": "#ff0",
        "dropdown.foreground": "#fff",

"input.background": "#ffffff",
        "input.border": "#00aaff",
        "input.foreground": "#000",
        "inputOption.activeBorder": "#00aaff",
        "inputValidation.errorBackground": "#ffdddd",
        "inputValidation.errorBorder": "#ff0000",

"widget.shadow": "#00ccffee",
        "scrollbar.shadow": "#00ccffee",
        //"selection.background":"#ff0",

// エディター
        "editorWhitespace.foreground": "#3757C7A7",
        "editor.lineHighlightBackground": "#1f1fffcc",
        "editor.lineHighlightBorder": "#1f1ffaff",
		"editorLineNumber.foreground": "#6793e0",
        // "editor.lineHighlightBackground": "#5c75e331",
        //"editor.selectionBackground": "#ffffff88",
        "editor.selectionBackground": "#ffffff77",

"editor.selectionHighlightBackground": "#7070ffcc",
        "editorCursor.foreground": "#ffffc499",
        "editor.background": "#000000",
        "editor.foreground": "#ffffff",
        "editor.bracketPairColorization.enabled": true,
        "editor.guides.bracketPairs": true,
 		// "editor.findMatchBackground": "#aaaaaa",

// スクロールバー
        "scrollbarSlider.background": "#7070ffcc",
        "scrollbarSlider.hoverBackground": "#50a0ffff",

// 上部タブ
        "tab.activeBackground": "#404090",
        "tab.activeForeground": "#ffffff",
        "tab.border": "#777777",
        //"tab.activeBorder": "#777777",
        "tab.inactiveBackground": "#333333",
        "tab.inactiveForeground": "#eeeeee",
        
       
		// ターミナル
        "terminal.background": "#282936",
        "terminal.foreground": "#E9E9F4",
        "terminalCursor.background": "#E9E9F4",
        "terminalCursor.foreground": "#E9E9F4",
        "sideBar.background": "#282936",
        "sideBar.foreground": "#ffffff",
        "sideBar.border": "#a8ac0d",
        "editorGroup.border": "#a8ac0d",
        "titleBar.border": "#a8ac0d",

//"sideBarTitle.foreground": "#000000",

// 主にファイル一覧など
        "list.inactiveSelectionBackground": "#cddb0163",
        "list.inactiveSelectionForeground": "#ffffff",
        "list.hoverBackground": "#a89e0fc4",
        "list.hoverForeground": "#ffffff",

// .git の .ignore されている色
        "gitDecoration.ignoredResourceForeground": "#55aadd",

//"list.foreground":"#ffffff",
        //"list.focusBackground": "#ffffff",
        //"list.inactiveSelectionBackground": "#ffffff",
        //"list.focusHighlightForeground": "#ff0000",
		// 左側のナビ
        "sideBarSectionHeader.background": "#0030a0c5",
        "sideBarSectionHeader.foreground": "#ffffff",
        "sideBarSectionHeader.border": "#a8ac0d"

//"window.activeBorder": "#ffffff",
        //"window.inactiveBorder": "#ff0000",
        //"activityBar.border": "#ff0000",

wakatta 記法

このコンテンツを見る