Skip to main content
Coding Theme

Color themes

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Loading...

colors

Workbench UI color keys from the theme JSON colors map.

  • activityBar.activeBorder#4D707A
  • activityBar.activeFocusBorder#1F4C59
  • activityBar.background#D7D7D8
  • activityBar.foreground#141F33
  • activityBar.inactiveForeground#AAACB1
  • badge.foreground#141F33
  • breadcrumb.background#FAF7F5
  • breadcrumb.foreground#141F33
  • button.background#4D707A
  • button.border#1F4C59
  • button.foreground#C0C1C4
  • button.hoverBackground#1F4C59
  • diffEditor.diagonalFill#C0C1C444
  • diffEditor.insertedTextBackground#4D707A22
  • diffEditor.removedTextBackground#95684622
  • dropdown.background#C0C1C4
  • dropdown.border#B5B6BB
  • dropdown.foreground#141F33
  • dropdown.listBackground#C0C1C4
  • editor.background#FAF7F5
  • editor.findMatchBackground#95684666
  • editor.findMatchHighlightBackground#95684633
  • editor.findRangeHighlightBackground#95684610
  • editor.foreground#141F33
  • editor.lineHighlightBorder#FAF7F5
  • editor.selectionBackground#C0C1C466
  • editorCursor.foreground#706380
  • editorGroup.border#D7D7D8
  • editorGroupHeader.tabsBackground#D7D7D8
  • editorGutter.addedBackground#4D7A4E
  • editorGutter.deletedBackground#91546B
  • editorGutter.modifiedBackground#4D707A
  • editorIndentGuide.activeBackground1#AAACB166
  • editorIndentGuide.activeBackground2#AAACB166
  • editorIndentGuide.activeBackground3#AAACB166
  • editorIndentGuide.activeBackground4#AAACB166
  • editorIndentGuide.activeBackground5#AAACB166
  • editorIndentGuide.activeBackground6#AAACB166
  • editorIndentGuide.background1#CCCCCE66
  • editorIndentGuide.background2#CCCCCE66
  • editorIndentGuide.background3#CCCCCE66
  • editorIndentGuide.background4#CCCCCE66
  • editorIndentGuide.background5#CCCCCE66
  • editorIndentGuide.background6#CCCCCE66
  • editorLineNumber.activeForeground#AAACB1
  • editorLineNumber.foreground#CCCCCE
  • editorStickyScroll.shadow#CCCCCE66
  • editorWidget.background#D7D7D8
  • editorWidget.border#CCCCCE
  • editorWidget.foreground#141F33
  • foreground#141F33
  • gitDecoration.addedResourceForeground#1F5921
  • gitDecoration.deletedResourceForeground#752946
  • gitDecoration.ignoredResourceForeground#B5B6BB
  • gitDecoration.modifiedResourceForeground#1F4C59
  • gitDecoration.untrackedResourceForeground#752946
  • icon.foreground#141F33
  • input.background#FAF7F5
  • input.foreground#141F33
  • input.placeholderForeground#C0C1C4
  • list.activeFocusBackground#C0C1C4
  • list.activeSelectionBackground#C0C1C4
  • list.activeSelectionForeground#141F33
  • list.focusAndSelectionOutline#D7D7D8
  • list.focusOutline#D7D7D8
  • list.highlightForeground#141F33
  • list.hoverBackground#B5B6BB
  • list.hoverForeground#141F33
  • list.inactiveFocusBackground#C0C1C4
  • list.inactiveFocusOutline#D7D7D8
  • list.inactiveSelectionBackground#C0C1C4
  • notebook.cellHoverBackground#D7D7D855
  • notebook.focusedCellBackground#D7D7D8
  • notebook.focusedCellBorder#D7D7D8
  • notebook.focusedEditorBorder#4B3C61
  • notebookStatusErrorIcon.foreground#91546B
  • notebookStatusRunningIcon.foreground#4D707A
  • notebookStatusSuccessIcon.foreground#4D7A4E
  • panelStickyScroll.shadow#CCCCCE66
  • panelTitle.activeForeground#AAACB1
  • panelTitle.inactiveForeground#B5B6BB
  • pickerGroup.border#B5B6BB
  • quickInput.background#D7D7D8
  • quickInput.foreground#141F33
  • quickInputList.focusBackground#CCCCCE
  • quickInputList.focusForeground#1F4C59
  • scrollbar.shadow#CCCCCE66
  • sideBar.background#D7D7D8
  • sideBar.border#D7D7D8
  • sideBar.dropBackground#4D707A
  • sideBarSectionHeader.background#CCCCCE
  • sideBarSectionHeader.foreground#141F33
  • sideBarStickyScroll.background#CCCCCE
  • sideBarStickyScroll.shadow#CCCCCE66
  • sideBarTitle.foreground#141F33
  • statusBar.background#D7D7D8
  • statusBar.foreground#141F33
  • tab.activeBorderTop#4D707A
  • tab.activeForeground#141F33
  • tab.border#D7D7D8
  • tab.inactiveBackground#CCCCCE
  • tab.inactiveForeground#141F33
  • tab.unfocusedActiveBackground#FAF7F5
  • terminal.ansiBlue#1F4C59
  • terminal.ansiBrightBlue#4D707A
  • terminal.ansiBrightGreen#4D7A4E
  • terminal.ansiBrightMagenta#706380
  • terminal.ansiBrightRed#91546B
  • terminal.ansiBrightYellow#956846
  • terminal.ansiGreen#1F5921
  • terminal.ansiMagenta#4B3C61
  • terminal.ansiRed#752946
  • terminal.ansiYellow#7A4217
  • terminal.background#FAF7F5
  • terminal.border#D7D7D8
  • terminal.foreground#141F33
  • terminal.tab.activeBorder#4B3C61
  • terminalCursor.background#4B3C6166
  • terminalCursor.foreground#141F33
  • titleBar.activeBackground#D7D7D8
  • titleBar.activeForeground#141F33
  • titleBar.inactiveBackground#D7D7D8
  • titleBar.inactiveForeground#141F33
  • widgetStickyScroll.shadow#CCCCCE66
  • window.activeBorder#D7D7D8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#535A68—
support.type#7A4217—
support.function.macro#91546Bitalic
constant#752946—
constant.numeric#1F5921—
constant.character.escape#3E4656bold italic
keyword.operator#3E4656—
keyword.operator.boolean#4D707A—
meta.bracket#535A68—
string#4D7A4E—
keyword#4B3C61—
variable.interpolation#91546B—
entity.name.function#1F4C59italic
support.function#1F4C59—
entity.other.attribute-name.table.array.toml, entity.other.attribute-name.table.toml#4B3C61bold
entity.name.tag#4B3C61bold
string.quoted.single.yaml, string.quoted.double.yaml#1F4C59—
markup.heading.markdown#1F4C59bold
fenced_code.block.language#4B3C61italic
string.other.link.title.markdown, string.other.link.description.markdown#1F5921bold
constant.other.reference.link.markdown#956846italic
markup.underline.link.markdown#4D707Aunderline
markup.inline.raw.string.markdown#4B3C61
markup.bold—bold
markup.italic—italic
string.other.link.description.markdown.citation#3E4656underline
punctuation.definition#686E7A—