Skip to main content
Coding Theme

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#ddd
  • activityBar.foreground#333
  • activityBarBadge.background#705697
  • badge.background#705697aa
  • button.background#705697
  • dropdown.background#f5f5f5
  • editor.background#fff
  • editor.findMatchBackground#bf9cac
  • editor.findMatchHighlightBackground#edc9d899
  • editor.foreground#000000
  • editor.lineHighlightBackground#eee
  • editor.selectionBackground#c9d0d9
  • editor.wordHighlightBackground#ffcc5566
  • editorCursor.foreground#54494b
  • editorGroup.dropBackground#c9d0d988
  • editorIndentGuide.activeBackground1#b44
  • editorIndentGuide.activeBackground2#b44
  • editorIndentGuide.activeBackground3#b44
  • editorIndentGuide.activeBackground4#b44
  • editorIndentGuide.activeBackground5#b44
  • editorIndentGuide.activeBackground6#b44
  • editorIndentGuide.background1#ddd
  • editorIndentGuide.background2#ddd
  • editorIndentGuide.background3#ddd
  • editorIndentGuide.background4#ddd
  • editorIndentGuide.background5#ddd
  • editorIndentGuide.background6#ddd
  • editorLineNumber.activeForeground#9769dc
  • editorLineNumber.foreground#6d705b
  • editorWhitespace.foreground#aaaaaa
  • errorForeground#f1897f
  • focusBorder#aaa
  • inputOption.activeBorder#adafb7
  • inputValidation.errorBackground#ffeaea
  • inputValidation.errorBorder#f1897f
  • inputValidation.infoBackground#f2fcff
  • inputValidation.infoBorder#4ec1e5
  • inputValidation.warningBackground#fffee2
  • inputValidation.warningBorder#ffe055
  • list.activeSelectionBackground#e65050
  • list.activeSelectionForeground#fff
  • list.activeSelectionIconForeground#fff
  • list.focusAndSelectionOutline#e65050
  • list.hoverBackground#e0e0e0
  • list.inactiveSelectionBackground#ff8888
  • minimap.selectionHighlight#c9d0d980
  • panel.background#fbfbfb
  • peekView.border#705697
  • peekViewEditor.background#f2f8fc
  • peekViewEditor.matchHighlightBackground#c2dfe3
  • peekViewResult.background#f2f8fc
  • peekViewResult.matchHighlightBackground#93c6d6
  • peekViewTitle.background#f2f8fc
  • pickerGroup.border#749351
  • pickerGroup.foreground#a6b39b
  • ports.iconRunningProcessForeground#749351
  • progressBar.background#705697
  • quickInputList.focusBackground#cadeb9
  • selection.background#c9d0d9
  • sideBar.background#f0f0f0
  • sideBarSectionHeader.background#ede8ef
  • statusBar.background#705697
  • statusBar.noFolderBackground#705697
  • statusBarItem.remoteBackground#4e3c69
  • tab.lastPinnedBorder#c9d0d9
  • titleBar.activeBackground#c4b7d7
  • walkThrough.embeddedEditorBackground#00000014

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#999italic
keyword, entity.name.function#33b
string, constant.other.symbol#c44
storage.type.function#9e4440
entity.name.tag.html, punctuation.definition.tag#060
entity.other.attribute-name#669italic
theme-minimaliste by marc-duren - VS Code Theme