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#2e302a
  • activityBar.dropBackground#414339
  • activityBar.foreground#f8f8f2
  • badge.background#75715E
  • badge.foreground#f8f8f2
  • button.background#75715E
  • debugToolBar.background#1e1f1c
  • diffEditor.insertedTextBackground#66852880
  • diffEditor.removedTextBackground#90274A80
  • dropdown.background#414339
  • dropdown.listBackground#1e1f1c
  • editor.background#272822
  • editor.foreground#dee5e5
  • editor.lineHighlightBackground#3e3d32
  • editor.selectionBackground#878b9180
  • editor.selectionHighlightBackground#575b6180
  • editor.wordHighlightBackground#4a4a7680
  • editor.wordHighlightStrongBackground#6a6a9680
  • editorCursor.foreground#f8f8f0
  • editorGroup.border#414339
  • editorGroup.dropBackground#41433980
  • editorGroupHeader.tabsBackground#2e302a
  • editorHoverWidget.background#414339
  • editorHoverWidget.border#272822
  • editorIndentGuide.activeBackground#767771
  • editorIndentGuide.background#464741
  • editorLineNumber.activeForeground#c2c2bf
  • editorLineNumber.foreground#90908a
  • editorSuggestWidget.background#3e3d32
  • editorSuggestWidget.border#3e3d32
  • editorWhitespace.foreground#464741
  • editorWidget.background#1e1f1c
  • focusBorder#75715E
  • input.background#414339
  • inputOption.activeBorder#75715E
  • inputValidation.errorBackground#90274A
  • inputValidation.errorBorder#f5737d
  • inputValidation.infoBackground#546190
  • inputValidation.infoBorder#819aff
  • inputValidation.warningBackground#848528
  • inputValidation.warningBorder#e2e22e
  • list.activeSelectionBackground#75715E
  • list.dropBackground#414339
  • list.focusBackground#75715E
  • list.highlightForeground#f8f8f2
  • list.hoverBackground#3e3d32
  • list.inactiveFocusBackground#414339
  • list.inactiveSelectionBackground#414339
  • panel.border#414339
  • panelTitle.activeBorder#75715E
  • panelTitle.activeForeground#f8f8f2
  • panelTitle.inactiveForeground#75715E
  • peekView.border#30322b
  • peekViewEditor.background#30322b
  • peekViewEditor.matchHighlightBackground#75715E
  • peekViewResult.background#30322b
  • peekViewResult.matchHighlightBackground#75715E
  • peekViewResult.selectionBackground#414339
  • peekViewTitle.background#30322b
  • pickerGroup.foreground#75715E
  • progressBar.background#75715E
  • selection.background#ccccc7
  • settings.numberInputBackground#32342d
  • settings.textInputBackground#32342d
  • sideBar.background#272822
  • sideBarSectionHeader.background#272822
  • statusBar.background#414339
  • statusBar.debuggingBackground#75715E
  • statusBar.noFolderBackground#414339
  • tab.activeBackground#272822
  • tab.border#2e302a
  • tab.inactiveBackground#2e302a
  • tab.inactiveForeground#ccccc7
  • terminal.ansiBlack#333333
  • terminal.ansiBlue#6A7EC8
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#819aff
  • terminal.ansiBrightCyan#78b6e9
  • terminal.ansiBrightGreen#F8F8F2
  • terminal.ansiBrightMagenta#F8F8F2
  • terminal.ansiBrightRed#f5737d
  • terminal.ansiBrightWhite#f8f8f2
  • terminal.ansiBrightYellow#e2e22e
  • terminal.ansiCyan#56ADBC
  • terminal.ansiGreen#86B42B
  • terminal.ansiMagenta#8C6BC8
  • terminal.ansiRed#C4265E
  • terminal.ansiWhite#e3e3dd
  • terminal.ansiYellow#B3B42B
  • titleBar.activeBackground#383a34
  • widget.shadow#1e1f1c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#dee5e5
meta.embedded, source.groovy.embedded#dee5e5
comment#dee5e5
string#dee5e5
punctuation.definition.template-expression, punctuation.section.embedded#f5737d
meta.template.expression#dee5e5
constant.numeric#dee5e5
constant.character, constant.other#dee5e5
variable#dee5e5
keyword#f5737d
storage#f5737d
storage.type#78b6e9
entity.name.type, entity.name.class#e5c07b
entity.other.inherited-class#dee5e5
entity.name.function#98c379
variable.parameter#a1a09b
entity.name.tag#78b6e9
entity.other.attribute-name#f5737d
support.function#78b6e9
support.constant#78b6e9
support.type, support.class#78b6e9
support.other.variable
invalid#dee5e5
invalid.deprecated#dee5e5
meta.structure.dictionary.json string.quoted.double.json#CFCFC2
meta.diff, meta.diff.header#75715E
markup.deleted#f5737d
markup.inserted#dee5e5
markup.changed#dee5e5
constant.numeric.line-number.find-in-files - match#dee5e5A0
entity.name.filename.find-in-files#dee5e5
markup.quote#f5737d
markup.list#dee5e5
markup.bold, markup.#78b6e9
markup.inline.raw#FD971F
markup.heading#dee5e5
markup.heading.setext#dee5e5
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6
variable.language#f5737d
constant.language#e5c07b
constant.character, constant.other#a1a09b