Latest Change Log
06-23-2020
- added: editor.hoverHighlightBackground - editor.symbolHighlightBackground
Contrast colors
contrastActiveBorder
contrastActiveBorder Screenshot
- テキストボックスやリストの項目にフォーカス、または単語を選択等。
- ハイコントラストテーマ用。name-color-theme.json で
"type": "hc-black" の時のみ適用される。ただし、settings.json の workbench.colorCustomizations セクションに追加すればどのテーマにも適用される。
contrastBorder
contrastBorder Screenshot
- ウインドウ、ボタン、バッジ等のボーダー。
- ハイコントラストテーマ用。name-color-theme.json で
"type": "hc-black" の時のみ適用される。settings.json の workbench.colorCustomizations セクションに記述すればどのテーマにも適用される。
Text colors
textBlockQuote.background
textBlockQuote.background Screenshot
- Extensions(⇧ + ⌘ + X / Ctrl + Shift + X) を表示。
- "Search Extensions in Marketplace" に Java Test Runner ↩︎ と入力。
- リストから "Java Test Runner" を選択。
textBlockQuote.border
textBlockQuote.border Screenshot
- Extensions(⇧ + ⌘ + X / Ctrl + Shift + X) を表示。
- "Search Extensions in Marketplace" に Java Test Runner ↩︎ と入力。
- リストから "Java Test Runner" を選択。
textCodeBlock.background
textCodeBlock.background Screenshot
- New File(⌘ + N / ctrl + N)。
- Select Language Mode(⌘ + K, M / Ctrl + K, M) を表示。
- "Select Language Mode" に HTML ↩︎ と入力。
- Editor に
! Tab と入力。
<meta charset="... の charset にマウスオーバー。
textLink.activeForeground
textLink.activeForeground Screenshot
- Extensions(⇧ + ⌘ + X / Ctrl + Shift + X) を表示。
- "Search Extensions in Marketplace" に Debugger for Microsoft Edge ↩︎ と入力。
- リストから "Debugger for Microsoft Edge" を選択。
- "Getting Started" セクションの "1. Install the extension." にマウスオーバー。
textLink.foreground
textLink.foreground Screenshot
- Extensions(⇧ + ⌘ + X / Ctrl + Shift + X) を表示。
- "Search Extensions in Marketplace" に Debugger for Microsoft Edge ↩︎ と入力。
- リストから "Debugger for Microsoft Edge" を選択。
textPreformat.foreground
textPreformat.foreground Screenshot
- Extensions(⇧ + ⌘ + X / Ctrl + Shift + X) を表示。
- "Search Extensions in Marketplace" に Debugger for Microsoft Edge ↩︎ と入力。
- リストから "Debugger for Microsoft Edge" を選択。
Progress bar
progressBar.background
progressBar.background Screenshot
- Extensions(⇧ + ⌘ + X / Ctrl + Shift + X) を表示。
- "Search Extensions in Marketplace" に test と入力。
- "Message" の上に1秒程度の短い時間プログレスバーが表示される。
Lists and trees
list.dropBackground
list.dropBackground Screenshot
- デスクトップに test フォルダを作成。
- test フォルダの中に test2 フォルダを作成。
- Visual Studio Code に戻る。
- ⌘ + O / Ctrl + O を押して test フォルダを開く。
- New File(⌘ + N / ctrl + N)。
- Save(⌘ + S / Ctrl + S) で test.txt と名前をつけて保存。
- 保存したファイルをドラッグして test2 フォルダ上に合わせる。
list.invalidItemForeground
list.invalidItemForeground Screenshot
- デスクトップに test フォルダを作成。
- Visual Studio Code に戻る。
- ⌘ + O / Ctrl + O を押して test フォルダを開く。
- を選択。
- test.code-workspace と名前をつけて保存。
- Explorer(⇧ + ⌘ + E / Ctrl + Shift + E) を表示。
- test.code-workspace を開く。
"path": "." を "path": "test" に変更。- Save(⌘ + S / Ctrl + S)。
- この方法で Explorer の test フォルダの色が変わらない場合は、一度 test フォルダをクリックした後にフォーカスを外す。
list.errorForeground
list.errorForeground Screenshot
- Explorer(⇧ + ⌘ + E / Ctrl + Shift + E) を表示。
- Select Language Mode(⌘ + K, M / Ctrl + K, M) を表示。
- "Select Language Mode" に JavaScript ↩︎ と入力。
- Editor に
function() と入力。
list.warningForeground
list.warningForeground Screenshot
- Extensions(⇧ + ⌘ + X / Ctrl + Shift + X) を表示。
- "Search Extensions in Marketplace" に HTMLHint と入力。
- "HTMLHint" の "Install" ボタンを押す。
- Explorer(⇧ + ⌘ + E / Ctrl + Shift + E) を表示。
- Select Language Mode(⌘ + K, M / Ctrl + K, M) を表示。
- "Select Language Mode" に HTML ↩︎ と入力。
- Editor に
test と入力。
- Save(⌘ + S / Ctrl + S) で test.html と名前をつけて保存。
listFilterWidget.background
listFilterWidget.background Screenshot
- Select Language Mode(⌘ + K, M / Ctrl + K, M) を表示。
- "Select Language Mode" に HTML ↩︎ と入力。
- Editor に
! Tab と入力。
- Explorer(⇧ + ⌘ + E / Ctrl + Shift + E) を表示。
- "Outline" ビューを開く。
- "Outline" ビュー内のどこかをクリックしてリストをアクティブにする。
- meta と入力。
listFilterWidget.outline
listFilterWidget.outline Screenshot
- Select Language Mode(⌘ + K, M / Ctrl + K, M) を表示。
- "Select Language Mode" に HTML ↩︎ と入力。
- Editor に
! Tab と入力。
- Explorer(⇧ + ⌘ + E / Ctrl + Shift + E) を表示。
- "Outline" ビューを開く。
- "Outline" ビュー内のどこかをクリックしてリストをアクティブにする。
- meta と入力。
listFilterWidget.noMatchesOutline
listFilterWidget.noMatchesOutline Screenshot
- Select Language Mode(⌘ + K, M / Ctrl + K, M) を表示。
- "Select Language Mode" に HTML ↩︎ と入力。
- Editor に
! Tab と入力。
- Explorer(⇧ + ⌘ + E / Ctrl + Shift + E) を表示。
- "Outline" ビューを開く。
- "Outline" ビュー内のどこかをクリックしてリストをアクティブにする。
- h1 と入力。
list.filterMatchBackground
list.filterMatchBackground Screenshot
- Select Language Mode(⌘ + K, M / Ctrl + K, M) を表示。
- "Select Language Mode" に HTML ↩︎ と入力。
- Editor に
! Tab と入力。
- Explorer(⇧ + ⌘ + E / Ctrl + Shift + E) を表示。
- "Outline" ビューを開く。
- "Outline" ビュー内のどこかをクリックしてリストをアクティブにする。
- meta と入力。
list.filterMatchBorder
list.filterMatchBorder Screenshot
- Select Language Mode(⌘ + K, M / Ctrl + K, M) を表示。
- "Select Language Mode" に HTML ↩︎ と入力。
- Editor に
! Tab と入力。
- Explorer(⇧ + ⌘ + E / Ctrl + Shift + E) を表示。
- "Outline" ビューを開く。
- "Outline" ビュー内のどこかをクリックしてリストをアクティブにする。
- meta と入力。
tree.indentGuidesStroke
tree.indentGuidesStroke Screenshot
- Select Language Mode(⌘ + K, M / Ctrl + K, M) を表示。
- "Select Language Mode" に HTML ↩︎ と入力。
- Editor に
! Tab と入力。
- Explorer(⇧ + ⌘ + E / Ctrl + Shift + E) を表示。
- "Outline" ビューを開く。
- "Outline" ビューにマウスオーバー。
list.deemphasizedForeground
list.deemphasizedForeground Screenshot
- デスクトップに test フォルダを作成。
- Visual Studio Code に戻る。
- Extensions(⇧ + ⌘ + X / Ctrl + Shift + X) を表示。
- "Search Extensions in Marketplace" に Debugger for Chrome と入力。
- "Debugger for Chrome" の "Install" ボタンを押す。
- ⌘ + O / Ctrl + O を押して test フォルダを開く。
- Run(⇧ + ⌘ + D / Ctrl + Shift + D) を表示。
- "launch.json file" リンクをクリック。
- "Chrome" を選択。
- launch.json の
"url": "http://localhost:8080", を "file": "${workspaceRoot}/test.html", に書き換えて保存。
- New File(⌘ + N / ctrl + N)。
- Editor に次のコードを入力。
<!DOCTYPE html>
<script src="test.js"></script>
- Save(⌘ + S / Ctrl + S) で test.html と名前をつけて保存。
- New File(⌘ + N / ctrl + N)。
- Editor に
alert('test'); と入力。
- Save(⌘ + S / Ctrl + S) で test.js と名前をつけて保存。
- 行番号の左側の空白部分にマウスオーバーすると、ドットが表示されるので、そのドットをクリック。
- "Run" パネル上部の右向きの三角形のアイコンをクリック。
- "Run" パネルの "Call Stack" ビューを開く。
- "Call Stack" ビューからフォーカスを外す。
- Google Chrome がインストールされていること。
Activity Bar
activityBar.dropBackground
Minimap
minimap.errorHighlight
minimap.errorHighlight Screenshot
- Select Language Mode(⌘ + K, M / Ctrl + K, M) を表示。
- "Select Language Mode" に JavaScript ↩︎ と入力。
- Editor に
function() ↩︎ と入力。
minimap.warningHighlight
minimap.warningHighlight Screenshot
- Extensions(⇧ + ⌘ + X / Ctrl + Shift + X) を表示。
- "Search Extensions in Marketplace" に HTMLHint と入力。
- "HTMLHint" の "Install" ボタンを押す。
- Explorer(⇧ + ⌘ + E / Ctrl + Shift + E) を表示。
- Select Language Mode(⌘ + K, M / Ctrl + K, M) を表示。
- "Select Language Mode" に HTML ↩︎ と入力。
- Editor に
test と入力。
- Save(⌘ + S / Ctrl + S) で test.html と名前をつけて保存。
minimapGutter.addedBackground
minimapGutter.addedBackground Screenshot
- デスクトップに test フォルダを作成。
- Visual Studio Code に戻る。
- 最初に作った test フォルダを開く。
- Source Control(⌃ + ⇧ + G / Ctrl + Shift + G) を表示。
- "Initialize Repository" ボタンをクリック。
- New File(⌘ + N / ctrl + N)。
- Editor に
test と入力。
- Save(⌘ + S / Ctrl + S) で test.txt と名前をつけて保存。
- "Source Control: Git" の "Message" に test ↩︎ と入力。
- "There are no staged changes to commit." というダイアログが表示されるので、"Yes" ボタンを押す。
- Editor に戻り
test の行にカーソルを移動。
- ↩︎ を押す。
minimapGutter.modifiedBackground
minimapGutter.modifiedBackground Screenshot
- デスクトップに test フォルダを作成。
- Visual Studio Code に戻る。
- 最初に作った test フォルダを開く。
- Source Control(⌃ + ⇧ + G / Ctrl + Shift + G) を表示。
- "Initialize Repository" ボタンをクリック。
- New File(⌘ + N / ctrl + N)。
- Editor に
test と入力。
- Save(⌘ + S / Ctrl + S) で test.txt と名前をつけて保存。
- "Source Control: Git" の "Message" に test ↩︎ と入力。
- "There are no staged changes to commit." というダイアログが表示されるので、"Yes" ボタンを押す。
- Editor に戻り
test と書かれた行に 2 と入力。
minimapGutter.deletedBackground
minimapGutter.deletedBackground Screenshot
- デスクトップに test フォルダを作成。
- Visual Studio Code に戻る。
- 最初に作った test フォルダを開く。
- Source Control(⌃ + ⇧ + G / Ctrl + Shift + G) を表示。
- "Initialize Repository" ボタンをクリック。
- New File(⌘ + N / ctrl + N)。
- Editor に次のコードを入力。
test
test2
- Save(⌘ + S / Ctrl + S) で test.txt と名前をつけて保存。
- "Source Control: Git" の "Message" に test ↩︎ と入力。
- "There are no staged changes to commit." というダイアログが表示されるので、"Yes" ボタンを押す。
- Editor に戻り
test と書かれた行をクリック。
- ⇧ + ⌘ + K / Ctrl + Shift + K で行を削除。
Editor Groups & Tabs
tab.unfocusedHoverBackground
tab.unfocusedHoverBackground Screenshot
- Split Editor Right(⌘ + \ / Ctrl + \) で Editor を分割。
- フォーカスされていない方の Editor のタブにマウスオーバー。
tab.hoverBackground が指定されていない場合は、フォーカスされているタブもこの色になる。
tab.unfocusedHoverForeground
tab.unfocusedHoverForeground Screenshot
- Split Editor Right(⌘ + \ / Ctrl + \) で Editor を分割。
- フォーカスされていない方の Editor のタブにマウスオーバー。
tab.hoverForeground が指定されていない場合は、フォーカスされているタブもこの色になる。
tab.activeModifiedBorder
tab.activeModifiedBorder Screenshot
- Settings(⌘ + , / Ctrl + ,) を表示。
- "Search settings" に workbench.editor.highlightModifiedTabs ↩︎ と入力。
- "Workbench > Editor: Highlight Modified Tabs" をオンにする。
- Editor に何か文字を入力。
tab.inactiveModifiedBorder
tab.inactiveModifiedBorder Screenshot
- Settings(⌘ + , / Ctrl + ,) を表示。
- "Search settings" に workbench.editor.highlightModifiedTabs ↩︎ と入力。
- "Workbench > Editor: Highlight Modified Tabs" をオンにする。
- Editor に何か文字を入力。
- New File(⌘ + N / ctrl + N)。
tab.unfocusedActiveModifiedBorder
tab.unfocusedActiveModifiedBorder Screenshot
- Settings(⌘ + , / Ctrl + ,) を表示。
- "Search settings" に workbench.editor.highlightModifiedTabs ↩︎ と入力。
- "Workbench > Editor: Highlight Modified Tabs" をオンにする。
- Editor に何か文字を入力。
- Split Editor Right(⌘ + \ / Ctrl + \) で Editor を分割。
tab.unfocusedInactiveModifiedBorder
tab.unfocusedInactiveModifiedBorder Screenshot
- Settings(⌘ + , / Ctrl + ,) を表示。
- "Search settings" に workbench.editor.highlightModifiedTabs ↩︎ と入力。
- "Workbench > Editor: Highlight Modified Tabs" をオンにする。
- Editor に何か文字を入力。
- New File(⌘ + N / ctrl + N)。
- Split Editor Right(⌘ + \ / Ctrl + \) で Editor を分割。
Editor colors
editorCursor.background
editorCursor.background Screenshot
- Settings(⌘ + , / Ctrl + ,) を表示。
- "Search settings" に editor.cursorStyles ↩︎ と入力。
- "Editor: Cursor Style" で "Block" を選択。
- Editor に何か文字を入力。
- 入力した文字にカーソルを合わせる。
- 変化するのはカーソルではなく、カーソルの下にある文字の色。
editor.wordHighlightBorder
editor.wordHighlightBorder Screenshot
- Select Language Mode(⌘ + K, M / Ctrl + K, M) を表示。
- "Select Language Mode" に JavaScript ↩︎ と入力。
- Editor に
'test' と入力。
test の間にカーソルを置く。
searchEditor.textInputBorder
searchEditor.textInputBorder Screenshot
- Command Palette(⇧ + ⌘ + P / Ctrl + Shift + P) を表示。
- "Search Editor: Open new Search Editor" を選択。
- Tab で Search Editor のテキストインプットフォームからフォーカスを外す。
editor.symbolHighlightBackground
editor.symbolHighlightBackground Screenshot
- Select Language Mode(⌘ + K, M / Ctrl + K, M) を表示。
- "Select Language Mode" に JavaScript ↩︎ と入力。
- Editor に次のコードを入力。
let test
test
test を ⌘ / Ctrl を押しながらクリック。
editor.symbolHighlightBorder
editorWhitespace.foreground
editorIndentGuide.background
editorIndentGuide.activeBackground
editorRuler.foreground
editorCodeLens.foreground
editorLightBulb.foreground
editorLightBulbAutoFix.foreground
editorBracketMatch.background
editorBracketMatch.border
editor.foldBackground
editorOverviewRuler.background
editorOverviewRuler.border
editorOverviewRuler.findMatchForeground
editorOverviewRuler.rangeHighlightForeground
editorOverviewRuler.selectionHighlightForeground
editorOverviewRuler.wordHighlightForeground
editorOverviewRuler.wordHighlightStrongForeground
editorOverviewRuler.modifiedForeground
editorOverviewRuler.addedForeground
editorOverviewRuler.deletedForeground
editorOverviewRuler.errorForeground
editorOverviewRuler.warningForeground
editorOverviewRuler.infoForeground
editorOverviewRuler.bracketMatchForeground
editorError.foreground
editorError.border
editorWarning.foreground
editorWarning.border
editorInfo.foreground
editorInfo.border
editorHint.foreground
editorHint.border
problemsErrorIcon.foreground
problemsWarningIcon.foreground
problemsInfoIcon.foreground
editorUnnecessaryCode.border
editorUnnecessaryCode.opacity
editorGutter.background
editorGutter.modifiedBackground
editorGutter.addedBackground
editorGutter.deletedBackground
editorGutter.commentRangeForeground
editorGutter.foldingControlForeground
Diff editor colors
diffEditor.insertedTextBackground
diffEditor.insertedTextBorder
diffEditor.removedTextBackground
diffEditor.removedTextBorder
diffEditor.border
diffEditor.diagonalFill
Peek view colors
peekView.border
peekViewEditor.background
peekViewEditorGutter.background
peekViewEditor.matchHighlightBackground
peekViewEditor.matchHighlightBorder
peekViewResult.background
peekViewResult.fileForeground
peekViewResult.lineForeground
peekViewResult.matchHighlightBackground
peekViewResult.selectionBackground
peekViewResult.selectionForeground
peekViewTitle.background
peekViewTitleDescription.foreground
peekViewTitleLabel.foreground
Merge conflicts
merge.currentHeaderBackground
merge.currentContentBackground
merge.incomingHeaderBackground
merge.incomingContentBackground
merge.border
merge.commonContentBackground
merge.commonHeaderBackground
editorOverviewRuler.currentContentForeground
editorOverviewRuler.incomingContentForeground
editorOverviewRuler.commonContentForeground
Panel colors
panel.background
panel.border
panelTitle.activeBorder
panelTitle.activeForeground
panelTitle.inactiveForeground
panelInput.border
Status Bar colors
statusBar.background
statusBar.foreground
statusBar.border
statusBar.debuggingBackground
statusBar.debuggingForeground
statusBar.debuggingBorder
statusBar.noFolderForeground
statusBar.noFolderBackground
statusBar.noFolderBorder
statusBarItem.activeBackground
statusBarItem.hoverBackground
statusBarItem.prominentForeground
statusBarItem.prominentBackground
statusBarItem.prominentHoverBackground
statusBarItem.remoteBackground
statusBarItem.remoteForeground
Title Bar colors
titleBar.activeBackground
titleBar.activeForeground
titleBar.inactiveBackground
titleBar.inactiveForeground
titleBar.border
Notification colors
notificationCenter.border
notificationCenterHeader.foreground
notificationCenterHeader.background
notificationToast.border
notifications.foreground
notifications.background
notifications.border
notificationLink.foreground
notificationsWarningIcon.foreground
notificationsInfoIcon.foreground
Extensions
extensionButton.prominentForeground
extensionButton.prominentBackground
extensionButton.prominentHoverBackground
extensionBadge.remoteBackground
extensionBadge.remoteForeground
Quick picker
pickerGroup.border
pickerGroup.foreground
quickInput.background
quickInput.foreground
quickInputTitle.background
Integrated Terminal colors
terminal.background
terminal.border
terminal.foreground
terminal.ansiBlack
terminal.ansiBlue
terminal.ansiBrightBlack
terminal.ansiBrightBlue
terminal.ansiBrightCyan
terminal.ansiBrightGreen
terminal.ansiBrightMagenta
terminal.ansiBrightRed
terminal.ansiBrightWhite
terminal.ansiBrightYellow
terminal.ansiCyan
terminal.ansiGreen
terminal.ansiMagenta
terminal.ansiRed
terminal.ansiWhite
terminal.ansiYellow
terminal.selectionBackground
terminalCursor.background
terminalCursor.foreground
Debug
debugToolBar.background
debugToolBar.border
editor.stackFrameHighlightBackground
editor.focusedStackFrameHighlightBackground
debugView.exceptionLabelForeground
debugView.exceptionLabelBackground
debugView.stateLabelForeground
debugView.stateLabelBackground
debugView.valueChangedHighlight
debugTokenExpression.name
debugTokenExpression.value
debugTokenExpression.string
debugTokenExpression.boolean
debugTokenExpression.number
debugTokenExpression.error
Welcome page
welcomePage.background
walkThrough.embeddedEditorBackground
Git colors
gitDecoration.addedResourceForeground
gitDecoration.modifiedResourceForeground
gitDecoration.deletedResourceForeground
gitDecoration.untrackedResourceForeground
gitDecoration.ignoredResourceForeground
gitDecoration.conflictingResourceForeground
gitDecoration.submoduleResourceForeground
Settings Editor colors
settings.headerForeground
settings.modifiedItemIndicator
settings.dropdownBackground
settings.dropdownForeground
settings.dropdownBorder
settings.dropdownListBorder
settings.checkboxBackground
settings.checkboxForeground
settings.checkboxBorder
settings.textInputBackground
settings.textInputForeground
settings.textInputBorder
settings.numberInputBackground
settings.numberInputForeground
settings.numberInputBorder
Breadcrumbs
breadcrumb.foreground
breadcrumb.background
breadcrumb.focusForeground
breadcrumb.activeSelectionForeground
breadcrumbPicker.background
Snippets
editor.snippetTabstopHighlightBackground
editor.snippetTabstopHighlightBorder
editor.snippetFinalTabstopHighlightBackground
editor.snippetFinalTabstopHighlightBorder
Symbol Icons
symbolIcon.arrayForeground
symbolIcon.booleanForeground
symbolIcon.classForeground
symbolIcon.colorForeground
symbolIcon.constantForeground
symbolIcon.constructorForeground
symbolIcon.enumeratorForeground
symbolIcon.enumeratorMemberForeground
symbolIcon.eventForeground
symbolIcon.fieldForeground
symbolIcon.fileForeground
symbolIcon.folderForeground
symbolIcon.functionForeground
symbolIcon.interfaceForeground
symbolIcon.keyForeground
symbolIcon.keywordForeground
symbolIcon.methodForeground
symbolIcon.moduleForeground
symbolIcon.namespaceForeground
symbolIcon.nullForeground
symbolIcon.numberForeground
symbolIcon.objectForeground
symbolIcon.operatorForeground
symbolIcon.packageForeground
symbolIcon.propertyForeground
symbolIcon.referenceForeground
symbolIcon.snippetForeground
symbolIcon.stringForeground
symbolIcon.structForeground
symbolIcon.textForeground
symbolIcon.typeParameterForeground
symbolIcon.unitForeground
symbolIcon.variableForeground
Debug Icons
debugIcon.breakpointForeground
debugIcon.breakpointDisabledForeground
debugIcon.breakpointUnverifiedForeground
debugIcon.breakpointCurrentStackframeForeground
debugIcon.breakpointStackframeForeground
debugIcon.startForeground
debugIcon.pauseForeground
debugIcon.stopForeground
debugIcon.disconnectForeground
debugIcon.restartForeground
debugIcon.stepOverForeground
debugIcon.stepIntoForeground
debugIcon.stepOutForeground
debugIcon.continueForeground
debugIcon.stepBackForeground
debugConsole.infoForeground
debugConsole.warningForeground
debugConsole.errorForeground
debugConsole.sourceForeground
debugConsoleInputIcon.foreground
