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#2c2c2c
  • activityBar.foreground#ffffff
  • activityBarBadge.background#2186ee
  • badge.background#75715E
  • badge.foreground#f8f8f2
  • button.background#2186ee
  • debugToolBar.background#2c2c2c
  • diffEditor.insertedTextBackground#4b661680
  • diffEditor.removedTextBackground#90274A70
  • dropdown.listBackground#565656
  • editor.background#2c2c2c
  • editor.foreground#eeffff
  • editor.lineHighlightBackground#494545
  • editor.selectionBackground#878b9180
  • editor.selectionHighlightBackground#575b6180
  • editor.wordHighlightBackground#4a4a7680
  • editor.wordHighlightStrongBackground#6a6a9680
  • editorCursor.foreground#e0f7f4
  • editorGroup.border#c3c3c3
  • editorGroup.dropBackground#41433980
  • editorGroupHeader.tabsBackground#2c2c2c
  • editorHoverWidget.background#2c2c2c
  • editorHoverWidget.border#75715E
  • editorIndentGuide.activeBackground#767771
  • editorIndentGuide.background#464741
  • editorLineNumber.activeForeground#2186ee
  • editorLineNumber.foreground#f6f6f0
  • editorSuggestWidget.background#272822
  • editorSuggestWidget.border#75715E
  • editorWhitespace.foreground#464741
  • editorWidget.background#2c2c2c
  • focusBorder#75715E
  • input.background#414339
  • inputOption.activeBorder#75715E
  • inputValidation.errorBackground#90274A
  • inputValidation.errorBorder#f92672
  • inputValidation.infoBackground#546190
  • inputValidation.infoBorder#819aff
  • inputValidation.warningBackground#848528
  • inputValidation.warningBorder#e2e22e
  • list.activeSelectionBackground#75715E
  • list.dropBackground#414339
  • list.highlightForeground#f8f8f2
  • list.hoverBackground#191919
  • list.inactiveSelectionBackground#414339
  • menu.background#202020
  • menu.foreground#eaeff3
  • minimap.selectionHighlight#878b9180
  • panel.border#414339
  • panelTitle.activeBorder#2186ee
  • panelTitle.activeForeground#eaeff3
  • panelTitle.inactiveForeground#ababab
  • peekView.border#6690fa
  • peekViewEditor.background#272822
  • peekViewEditor.matchHighlightBackground#75715E
  • peekViewResult.background#2c2c2c
  • peekViewResult.matchHighlightBackground#75715E
  • peekViewResult.selectionBackground#414339
  • peekViewTitle.background#2c2c2c
  • pickerGroup.foreground#75715E
  • ports.iconRunningProcessForeground#ccccc7
  • progressBar.background#75715E
  • quickInputList.focusBackground#414339
  • selection.background#878b9180
  • settings.focusedRowBackground#4143395A
  • sideBar.background#1b1b1b
  • sideBarSectionHeader.background#272822
  • statusBar.background#6690fa
  • statusBar.debuggingBackground#75715E
  • statusBar.noFolderBackground#414339
  • statusBarItem.remoteBackground#AC6218
  • tab.activeBackground#2c2c2c
  • tab.activeBorder#2186ee
  • tab.activeForeground#e7e2e2
  • tab.border#2c2c2c
  • tab.inactiveBackground#393939
  • tab.inactiveForeground#ccccc7
  • tab.lastPinnedBorder#414339
  • tab.unfocusedHoverBackground#2c2c2c
  • terminal.ansiBlack#333333
  • terminal.ansiBlue#3a6ff4
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#819aff
  • terminal.ansiBrightCyan#66D9EF
  • terminal.ansiBrightGreen#A6E22E
  • terminal.ansiBrightMagenta#AE81FF
  • terminal.ansiBrightRed#f92672
  • terminal.ansiBrightWhite#f8f8f2
  • terminal.ansiBrightYellow#e2e22e
  • terminal.ansiCyan#56ADBC
  • terminal.ansiGreen#54c600
  • terminal.ansiMagenta#8C6BC8
  • terminal.ansiRed#d10f1b
  • terminal.ansiWhite#e3e3dd
  • terminal.ansiYellow#fbcc30
  • titleBar.activeBackground#2c2c2c
  • widget.shadow#00000098

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.tag, punctuation.definition.tag#ffffff—
entity.name.tag#61a9ff—
entity.other.attribute-name#2ee2a5—
string#efb946—
constant.language.boolean#9cfff2—
constant.numeric#5885ff—
variable#ffffff—
entity.name, entity.name.type.class, support.type, support.class, meta.use#f5e948—
meta.definition.method entity.name.function#7cd131—
meta.function entity.name.function#7fda31—
comment, punctuation.definition.comment#8d9397italic
storage.type#fb7cf3italic
entity.name.function#7cd131—
constant.numeric#778dff—
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution#7cd131underline
entity.other.inherited-class#7cd131italic underline
variable.parameter#0eececitalic
keyword#ff004e—
storage#ff004e—
punctuation.definition.template-expression, punctuation.section.embedded#ff004e—
variable.language#0eecec—
entity.name.function#d2a8ff—
meta.structure.dictionary.json support.type.property-name.json#f8844e—
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#f8cc7b—
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#f8cc7b—
meta.structure.dictionary.json string.quoted.double.json#b0f1db—
entity.other.attribute-name.class#61a9ff—
entity.other.attribute-name.id#ff7010—
source.css entity.name.tag#61a9ff—
support.type.property-name.css#7cd131—
string.other.link.title.markdown,string.other.link.description.markdown#4194f3—
markup.quote.markdown#c68fceitalic
markup.bold.markdown#bd68eebold
markup.underline.link.markdown,markup.underline.link.image.markdown#b0f1db—
markup.heading, markup.heading entity.name#06e919bold
punctuation.definition.list.begin.markdown#3a6ff4—
markup.inline.raw#15c5c5—
tyh-theme by tyh-theme - VS Code Theme