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.background#DDDDDD
  • activityBar.foreground#424242
  • activityBar.inactiveForeground#9f9f9f
  • badge.background#00000000
  • badge.foreground#000
  • editor.background#F7F7F7
  • editor.findMatchBackground#FFBC5D
  • editor.findMatchBorder#FFBC5D
  • editor.findMatchHighlightBackground#00000000
  • editor.findMatchHighlightBorder#FFBC5D
  • editor.findRangeHighlightBackground#00000000
  • editor.findRangeHighlightBorder#FFBC5D
  • editor.foreground#000
  • editor.inactiveSelectionBackground#e0e0e0
  • editor.lineHighlightBackground#f0f0f0
  • editor.lineHighlightBorder#f0f0f0
  • editor.rangeHighlightBackground#00000000
  • editor.rangeHighlightBorder#00000000
  • editor.selectionBackground#bfdbfe
  • editor.selectionHighlightBackground#00000000
  • editor.selectionHighlightBorder#FFBC5D
  • editorCursor.foreground#007ACC
  • editorGroupHeader.tabsBackground#DDDDDD
  • editorGroupHeader.tabsBorder#00000000
  • editorIndentGuide.background#d2d2d2
  • editorLineNumber.activeForeground#7c7c7c
  • editorLineNumber.foreground#7c7c7c
  • focusBorder#00000000
  • gitDecoration.addedResourceForeground#448C27
  • gitDecoration.conflictingResourceForeground#cd974b
  • gitDecoration.deletedResourceForeground#F05050
  • gitDecoration.ignoredResourceForeground#BBBBBB
  • gitDecoration.modifiedResourceForeground#007ACC
  • gitDecoration.submoduleResourceForeground#7A3E9D
  • gitDecoration.untrackedResourceForeground#9f9f9f
  • list.activeSelectionBackground#e8e8e8
  • list.activeSelectionForeground#313131
  • list.focusBackground#eeeeee
  • list.focusForeground#313131
  • list.hoverBackground#eeeeee
  • list.hoverForeground#313131
  • list.inactiveSelectionBackground#e8e8e8
  • list.inactiveSelectionForeground#313131
  • panel.background#F7F7F7
  • panel.border#DDDDDD
  • peekView.border#bababa
  • peekViewEditor.background#f7f7f7
  • peekViewResult.matchHighlightBackground#FFBC5D
  • peekViewResult.selectionBackground#e8e8e8
  • peekViewResult.selectionForeground#313131
  • scrollbar.shadow#00000000
  • scrollbarSlider.background#a6a6a64f
  • scrollbarSlider.hoverBackground#a6a6a67a
  • sideBar.background#DDDDDD
  • sideBar.foreground#313131
  • statusBar.background#cacaca
  • statusBar.border#bababa
  • statusBar.debuggingBackground#FFBC5D
  • statusBar.debuggingForeground#000
  • statusBar.foreground#545454
  • statusBar.noFolderBackground#7A3E9D
  • statusBar.noFolderForeground#fff
  • statusBarItem.hoverBackground#cacaca
  • statusBarItem.prominentHoverBackground#cacaca
  • tab.border#00000000
  • tab.inactiveBackground#e8e8e8
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#325CC0
  • terminal.ansiBrightBlack#777777
  • terminal.ansiBrightBlue#007ACC
  • terminal.ansiBrightCyan#00AACB
  • terminal.ansiBrightGreen#60CB00
  • terminal.ansiBrightMagenta#E64CE6
  • terminal.ansiBrightRed#F05050
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#d6a96a
  • terminal.ansiCyan#0083B2
  • terminal.ansiGreen#448C27
  • terminal.ansiMagenta#7A3E9D
  • terminal.ansiRed#AA3731
  • terminal.ansiWhite#BBBBBB
  • terminal.ansiYellow#cd974b
  • terminal.foreground#000
  • titleBar.activeBackground#DDDDDD
  • titleBar.inactiveBackground#DDDDDD
  • tree.indentGuidesStroke#a6a6a6
  • widget.shadow#DDDDDD

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#AA3731—
string, string.regexp, constant.other.symbol#448C27—
constant.character.escape#777777—
constant.numeric, constant.character, constant.keyword, constant#7A3E9D—
entity.name#325CC0—
punctuation#777777—
invalid#660000—
meta.diff.range, meta.diff.index, meta.separator#434343—
meta.diff.header.from-file#434343—
meta.diff.header.to-file#434343—

Shiki preview

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

Loading...