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#1e2127
  • activityBar.foreground#d8d8d2
  • badge.background#5a584a
  • badge.foreground#d8d8d2
  • button.background#5a584a
  • debugToolBar.background#161715
  • diffEditor.insertedTextBackground#3a4d1260
  • diffEditor.removedTextBackground#6a1d3650
  • dropdown.background#33352c
  • dropdown.listBackground#161715
  • editor.background#1e2127
  • editor.foreground#d8d8d2
  • editor.lineHighlightBackground#2e2d25
  • editor.selectionBackground#676b7050
  • editor.selectionHighlightBackground#474b5050
  • editor.wordHighlightBackground#3a3a5d50
  • editor.wordHighlightStrongBackground#4a4a6d50
  • editorCursor.foreground#d8d8d0
  • editorGroup.border#282923
  • editorGroup.dropBackground#33352c50
  • editorGroupHeader.tabsBackground#161715
  • editorHoverWidget.background#33352c
  • editorHoverWidget.border#5a584a
  • editorLineNumber.activeForeground#a2a29f
  • editorLineNumber.foreground#70706a
  • editorSuggestWidget.background#1e2127
  • editorSuggestWidget.border#5a584a
  • editorWhitespace.foreground#363731
  • editorWidget.background#161715
  • focusBorder#79765c
  • input.background#33352c
  • inputOption.activeBorder#5a584a
  • inputValidation.errorBackground#6a1d36
  • inputValidation.errorBorder#d91f62
  • inputValidation.infoBackground#3d4860
  • inputValidation.infoBorder#617aaf
  • inputValidation.warningBackground#64651f
  • inputValidation.warningBorder#b2b223
  • list.activeSelectionBackground#5a584a
  • list.dropBackground#33352c
  • list.highlightForeground#d8d8d2
  • list.hoverBackground#2e2d25
  • list.inactiveSelectionBackground#33352c
  • menu.background#161715
  • menu.foreground#acacac
  • minimap.selectionHighlight#676b7050
  • panel.border#33352c
  • panelTitle.activeBorder#5a584a
  • panelTitle.activeForeground#d8d8d2
  • panelTitle.inactiveForeground#5a584a
  • peekView.border#5a584a
  • peekViewEditor.background#1e2127
  • peekViewEditor.matchHighlightBackground#5a584a
  • peekViewResult.background#161715
  • peekViewResult.matchHighlightBackground#5a584a
  • peekViewResult.selectionBackground#33352c
  • peekViewTitle.background#161715
  • pickerGroup.foreground#5a584a
  • ports.iconRunningProcessForeground#acaca7
  • progressBar.background#5a584a
  • quickInputList.focusBackground#33352c
  • selection.background#676b7050
  • settings.focusedRowBackground#33352c5a
  • sideBar.background#161715
  • sideBarSectionHeader.background#1e2127
  • statusBar.background#33352c
  • statusBar.debuggingBackground#5a584a
  • statusBar.noFolderBackground#33352c
  • statusBarItem.remoteBackground#8a4a14
  • tab.border#161715
  • tab.inactiveBackground#282923
  • tab.inactiveForeground#acaca7
  • tab.lastPinnedBorder#33352c
  • terminal.ansiBlack#232323
  • terminal.ansiBlue#5a6ea8
  • terminal.ansiBrightBlack#565656
  • terminal.ansiBrightBlue#617aaf
  • terminal.ansiBrightCyan#56c9df
  • terminal.ansiBrightGreen#42d76a
  • terminal.ansiBrightMagenta#9982d0
  • terminal.ansiBrightRed#d91f62
  • terminal.ansiBrightWhite#d8d8d2
  • terminal.ansiBrightYellow#dbc928
  • terminal.ansiCyan#29bed8
  • terminal.ansiGreen#30bd55
  • terminal.ansiMagenta#7c5ba8
  • terminal.ansiRed#b41f4e
  • terminal.ansiWhite#c3c3bd
  • terminal.ansiYellow#d6b625
  • titleBar.activeBackground#161715
  • widget.shadow#00000078

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python#D8D8D2
comment#686653
string#69c8d8
punctuation.definition.template-expression, punctuation.section.embedded#D91F62
constant.numeric#42d76a
constant.language#42d76a
constant.character, constant.other#42d76a
variable#D8D8D2
keyword#D91F62
storage#D91F62
storage.type#56C9DFitalic
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution#9982d0underline
entity.other.inherited-class, punctuation.separator.namespace.ruby#9982d0italic underline
entity.name.function#9982d0
variable.parameter#D8A314italic
variable.other.object.ts, variable.other.property.ts, variable.other.object#D8A314
variable.other.object.property.ts, variable.other.object.property.ts, variable.other.object#CFCFCF
variable.other.property.ts, variable.other.property#CFCFCF
markup.inline.raw#D8A314
entity.name.tag#D91F62
entity.other.attribute-name#9982d0
support.function#56C9DF
support.constant#56C9DF
support.type, support.class#56C9DFitalic
invalid#D43737
invalid.deprecated#D43737
meta.structure.dictionary.json string.quoted.double.json#AFAFA2
meta.diff, meta.diff.header#5a584a
markup.deleted#D91F62
markup.inserted#9982d0
markup.changed#69c8d8
markup.quote.markdown#5a584aitalic
markup.bold.markdownbold
string.other.link.title.markdown,string.other.link.description.markdown#42d76a
markup.underline.link.markdown,markup.underline.link.image.markdown#69c8d8
markup.italic.markdownitalic
markup.list.unnumbered.markdown, markup.list.numbered.markdown#D8D8D2
variable.language#D8A314
token.info-token#5786C6
token.warn-token#AD8721
token.error-token#D43737
token.debug-token#A257C6
Monokai Plus Ultra by k3v5 - VS Code Theme