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

Shiki preview

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

Loading...

tyh-theme - Coding Theme