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#00212B
  • activityBar.border#073642
  • activityBar.foreground#93a1a1
  • badge.background#047aa6
  • button.background#2AA19899
  • debugExceptionWidget.background#00212B
  • debugExceptionWidget.border#AB395B
  • debugToolBar.background#00212B
  • dropdown.background#00212B
  • dropdown.border#2AA19899
  • editor.background#002B36
  • editor.findMatchBackground#732b0d99
  • editor.findMatchHighlightBackground#424d0099
  • editor.foreground#93a1a1
  • editor.lineHighlightBorder#073642
  • editor.rangeHighlightBackground#073642cc
  • editor.selectionBackground#268bd240
  • editor.selectionHighlightBackground#005A6FAA
  • editor.wordHighlightBackground#424d0080
  • editor.wordHighlightStrongBackground#732b0d80
  • editorBracketMatch.background#b588002e
  • editorBracketMatch.border#b589004d
  • editorCursor.foreground#b58900
  • editorGroup.border#00212B
  • editorGroup.dropBackground#2AA19844
  • editorGroupHeader.border#073642
  • editorGroupHeader.tabsBackground#00212B
  • editorHoverWidget.background#004052
  • editorIndentGuide.activeBackground1#586e75bf
  • editorIndentGuide.background1#586e754d
  • editorLineNumber.activeForeground#93a1a1
  • editorLineNumber.foreground#8394964d
  • editorMarkerNavigationError.background#AB395B
  • editorMarkerNavigationWarning.background#5B7E7A
  • editorRuler.foreground#586e754d
  • editorWhitespace.foreground#657b8380
  • editorWidget.background#00212B
  • errorForeground#ffeaea
  • focusBorder#2AA19899
  • input.background#003847
  • input.foreground#93a1a1
  • input.placeholderForeground#839496AA
  • inputOption.activeBorder#2AA19899
  • inputValidation.errorBackground#571b26
  • inputValidation.errorBorder#a92049
  • inputValidation.infoBackground#052730
  • inputValidation.infoBorder#363b5f
  • inputValidation.warningBackground#5d5938
  • inputValidation.warningBorder#9d8a5e
  • list.activeSelectionBackground#005A6F
  • list.dropBackground#00445488
  • list.highlightForeground#1ebcc5
  • list.hoverBackground#004454AA
  • list.inactiveSelectionBackground#00445488
  • minimap.selectionHighlight#268bd240
  • panel.background#00212B
  • panel.border#073642
  • panelTitle.border#073642
  • peekView.border#2b2b4a
  • peekViewEditor.background#10192c
  • peekViewEditor.matchHighlightBackground#7744AA40
  • peekViewResult.background#00212B
  • peekViewTitle.background#00212B
  • pickerGroup.border#2AA19899
  • pickerGroup.foreground#2AA19899
  • ports.iconRunningProcessForeground#369432
  • progressBar.background#047aa6
  • quickInputList.focusBackground#005A6F
  • selection.background#2AA19899
  • sideBar.background#00212B
  • sideBar.border#073642
  • sideBar.foreground#839496
  • sideBarTitle.foreground#93a1a1
  • statusBar.background#00212B
  • statusBar.border#073642
  • statusBar.debuggingBackground#00212B
  • statusBar.foreground#93a1a1
  • statusBar.noFolderBackground#00212B
  • statusBarItem.prominentBackground#003847
  • statusBarItem.prominentHoverBackground#003847
  • statusBarItem.remoteBackground#2AA19899
  • tab.activeBackground#002B37
  • tab.activeForeground#d6dbdb
  • tab.border#003847
  • tab.inactiveBackground#00212B
  • tab.inactiveForeground#93a1a1
  • tab.lastPinnedBorder#2AA19844
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#268bd2
  • terminal.ansiBrightBlack#000000
  • terminal.ansiBrightBlue#268bd2
  • terminal.ansiBrightCyan#2aa198
  • terminal.ansiBrightGreen#859900
  • terminal.ansiBrightMagenta#d33682
  • terminal.ansiBrightRed#dc322f
  • terminal.ansiBrightWhite#fdf6e3
  • terminal.ansiBrightYellow#b58900
  • terminal.ansiCyan#2aa198
  • terminal.ansiGreen#859900
  • terminal.ansiMagenta#d33682
  • terminal.ansiRed#dc322f
  • terminal.ansiWhite#fdf6e3
  • terminal.ansiYellow#b58900
  • terminal.background#002b36
  • terminal.foreground#93a1a1
  • titleBar.activeBackground#002C39

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
entity.name.variable#93a1a1
comment, punctuation.definition.comment#cb4b16
string, string.regexp, constant.other.symbol#859900
constant.character.escape#657b83
constant.numeric, constant.character, constant.keyword, constant#d33682
entity.name,support.function#b58900
punctuation,meta.brace#657b83
invalid#dc322f