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.boldbold
markup.italicitalic
string.other.link.description.markdown.citation#3E4656underline
punctuation.definition#686E7A

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...