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#003847
  • badge.background#047aa6
  • button.background#2aa19899
  • debugExceptionWidget.background#00212b
  • debugExceptionWidget.border#ab395b
  • debugToolBar.background#00212b
  • dropdown.background#00212b
  • dropdown.border#2aa19899
  • editor.background#073642
  • editor.foreground#7D99A3
  • editor.lineHighlightBackground#073642
  • editor.selectionBackground#073642
  • editor.selectionHighlightBackground#005a6faa
  • editor.wordHighlightBackground#004454aa
  • editor.wordHighlightStrongBackground#005a6faa
  • editorCursor.foreground#839496
  • editorGroup.border#00212b
  • editorGroup.dropBackground#2aa19844
  • editorGroupHeader.tabsBackground#004052
  • editorGutter.background#073642
  • editorHoverWidget.background#004052
  • editorLineNumber.activeForeground#6e8a93
  • editorLineNumber.foreground#566c74
  • editorMarkerNavigationError.background#ab395b
  • editorMarkerNavigationWarning.background#5b7e7a
  • editorWhitespace.foreground#93a1a180
  • editorWidget.background#00212b
  • errorForeground#ffeaea
  • focusBorder#2aa19899
  • input.background#003847
  • input.foreground#93a1a1
  • input.placeholderForeground#93a1a1aa
  • 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.focusBackground#005a6f
  • list.highlightForeground#1ebcc5
  • list.hoverBackground#004454aa
  • list.inactiveSelectionBackground#00445488
  • panel.border#2b2b4a
  • peekView.border#2b2b4a
  • peekViewEditor.background#10192c
  • peekViewEditor.matchHighlightBackground#7744aa40
  • peekViewEditorGutter.background#073642
  • peekViewResult.background#00212b
  • peekViewTitle.background#00212b
  • pickerGroup.border#2aa19899
  • pickerGroup.foreground#2aa19899
  • progressBar.background#047aa6
  • selection.background#2aa19899
  • sideBar.background#00212b
  • sideBarTitle.foreground#93a1a1
  • statusBar.background#00212b
  • statusBar.debuggingBackground#00212b
  • statusBar.foreground#93a1a1
  • statusBar.noFolderBackground#00212b
  • statusBarItem.prominentBackground#003847
  • statusBarItem.prominentHoverBackground#003847
  • tab.activeBackground#002b37
  • tab.activeForeground#d6dbdb
  • tab.border#003847
  • tab.inactiveBackground#004052
  • tab.inactiveForeground#93a1a1
  • terminal.ansiBlack#073642
  • terminal.ansiBlue#268bd2
  • terminal.ansiBrightBlack#586e75
  • terminal.ansiBrightBlue#839496
  • terminal.ansiBrightCyan#93a1a1
  • terminal.ansiBrightGreen#859900
  • terminal.ansiBrightMagenta#6c71c4
  • terminal.ansiBrightRed#cb4b16
  • terminal.ansiBrightWhite#839496
  • terminal.ansiBrightYellow#657b83
  • terminal.ansiCyan#2aa198
  • terminal.ansiGreen#859900
  • terminal.ansiMagenta#d33682
  • terminal.ansiRed#dc322f
  • terminal.ansiWhite#839496
  • terminal.ansiYellow#b58900
  • terminal.foreground#839496
  • titleBar.activeBackground#002c39

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#93A1A1italic
comment.block.preprocessor#93A1A1
comment.documentation, comment.block.documentation#708787
invalid.illegal#660000
keyword.operator#268BD2
keyword, storage#268BD2
storage.type, support.type#268BD2
constant.language, support.constant, variable.language#268BD2
variable, support.variable#839496
variable.parameter#B58900
entity.name.function, support.function#839496bold
entity.name.type, entity.other.inherited-class, support.class, source.go#B58900bold
entity.name.exception#660000
entity.name.sectionbold
constant.numeric, constant.character, constant#B58900
string#7D99A3
constant.character.escape#D33682
string.regexp#D33682
constant.other.symbol#7D99A3
punctuation#7D99A3
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html#93A1A1
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#D33682
entity.name.tag#D33682
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#D33682italic
constant.character.entity, punctuation.definition.entity#839496
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.parent-selector.css#268BD2
meta.property-name, support.type.property-name#839496
meta.property-value, meta.property-value constant.other, support.constant.property-value#B58900
keyword.other.importantbold
markup.deleted#dc322f
markup.changed#cb4b16
markup.inserted#219186
markup.quote#859900
markup.list#B58900
markup.bold, markup.italic#D33682
markup.inline.raw#2AA198
markup.heading#268BD2
markup.heading.setext#268BD2