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#25282d
  • activityBar.foreground#d4d4d4
  • badge.background#4a4a45
  • badge.foreground#d4d4d4
  • button.background#4a4a45
  • debugToolBar.background#1e1e1e
  • diffEditor.insertedTextBackground#3d4a2e60
  • diffEditor.removedTextBackground#4a2a3550
  • dropdown.background#373737
  • dropdown.listBackground#1e1e1e
  • editor.background#25282d
  • editor.foreground#d4d4d4
  • editor.lineHighlightBackground#323232
  • editor.selectionBackground#5a5d6350
  • editor.selectionHighlightBackground#45484d50
  • editor.wordHighlightBackground#3d3d5550
  • editor.wordHighlightStrongBackground#4d4d6550
  • editorCursor.foreground#d4d4d4
  • editorGroup.border#3a3a3a
  • editorGroup.dropBackground#37373750
  • editorGroupHeader.tabsBackground#1e1e1e
  • editorHoverWidget.background#373737
  • editorHoverWidget.border#4a4a45
  • editorLineNumber.activeForeground#9a9a9a
  • editorLineNumber.foreground#6a6a6a
  • editorSuggestWidget.background#25282d
  • editorSuggestWidget.border#4a4a45
  • editorWhitespace.foreground#3a3a3a
  • editorWidget.background#1e1e1e
  • focusBorder#6a6a60
  • input.background#373737
  • inputOption.activeBorder#4a4a45
  • inputValidation.errorBackground#4a2a35
  • inputValidation.errorBorder#b54d6d
  • inputValidation.infoBackground#3d455a
  • inputValidation.infoBorder#6d7d9d
  • inputValidation.warningBackground#5a5a2a
  • inputValidation.warningBorder#9d9d4d
  • list.activeSelectionBackground#4a4a45
  • list.dropBackground#373737
  • list.highlightForeground#d4d4d4
  • list.hoverBackground#323232
  • list.inactiveSelectionBackground#373737
  • menu.background#1e1e1e
  • menu.foreground#b0b0b0
  • minimap.selectionHighlight#5a5d6350
  • panel.border#373737
  • panelTitle.activeBorder#4a4a45
  • panelTitle.activeForeground#d4d4d4
  • panelTitle.inactiveForeground#4a4a45
  • peekView.border#4a4a45
  • peekViewEditor.background#25282d
  • peekViewEditor.matchHighlightBackground#4a4a45
  • peekViewResult.background#1e1e1e
  • peekViewResult.matchHighlightBackground#4a4a45
  • peekViewResult.selectionBackground#373737
  • peekViewTitle.background#1e1e1e
  • pickerGroup.foreground#4a4a45
  • ports.iconRunningProcessForeground#b0b0b0
  • progressBar.background#4a4a45
  • quickInputList.focusBackground#373737
  • selection.background#5a5d6350
  • settings.focusedRowBackground#3737375a
  • sideBar.background#1e1e1e
  • sideBarSectionHeader.background#25282d
  • statusBar.background#373737
  • statusBar.debuggingBackground#4a4a45
  • statusBar.noFolderBackground#373737
  • statusBarItem.remoteBackground#6d4a2a
  • tab.border#1e1e1e
  • tab.inactiveBackground#2a2a2a
  • tab.inactiveForeground#b0b0b0
  • tab.lastPinnedBorder#373737
  • terminal.ansiBlack#2a2a2a
  • terminal.ansiBlue#5d6d8d
  • terminal.ansiBrightBlack#555555
  • terminal.ansiBrightBlue#6d7d9d
  • terminal.ansiBrightCyan#6db9cf
  • terminal.ansiBrightGreen#9a8dc0
  • terminal.ansiBrightMagenta#5dc77a
  • terminal.ansiBrightRed#b54d6d
  • terminal.ansiBrightWhite#d4d4d4
  • terminal.ansiBrightYellow#c9c94d
  • terminal.ansiCyan#4d9daf
  • terminal.ansiGreen#6d8d3a
  • terminal.ansiMagenta#7d5d9d
  • terminal.ansiRed#9d3a5d
  • terminal.ansiWhite#c4c4c4
  • terminal.ansiYellow#9d9d3a
  • titleBar.activeBackground#1e1e1e
  • widget.shadow#00000070

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python#D4D4D4
comment#6a6a60
string#79b8c8
punctuation.definition.template-expression, punctuation.section.embedded#B54D6D
constant.numeric#5DC77A
constant.language#5DC77A
constant.character, constant.other#5DC77A
variable#D4D4D4
keyword#B54D6D
storage#B54D6D
storage.type#6DB9CFitalic
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution#9A8DC0underline
entity.other.inherited-class, punctuation.separator.namespace.ruby#9A8DC0italic underline
entity.name.function#9A8DC0
variable.parameter#D8B04Ditalic
variable.other.object.ts, variable.other.property.ts, variable.other.object#D8B04D
variable.other.object.property.ts, variable.other.object.property.ts, variable.other.object#C4C4C4
variable.other.property.ts, variable.other.property#C4C4C4
markup.inline.raw#D8B04D
entity.name.tag#B54D6D
entity.other.attribute-name#9A8DC0
support.function#6DB9CF
support.constant#6DB9CF
support.type, support.class#6DB9CFitalic
invalid#C44D4D
invalid.deprecated#C44D4D
meta.structure.dictionary.json string.quoted.double.json#B0B0B0
meta.diff, meta.diff.header#4a4a45
markup.deleted#B54D6D
markup.inserted#9A8DC0
markup.changed#79B8C8
markup.quote.markdown#4a4a45italic
markup.bold.markdownbold
string.other.link.title.markdown,string.other.link.description.markdown#5DC77A
markup.underline.link.markdown,markup.underline.link.image.markdown#79B8C8
markup.italic.markdownitalic
markup.list.unnumbered.markdown, markup.list.numbered.markdown#D4D4D4
variable.language#D8B04D
token.info-token#5D8DCF
token.warn-token#B08D3A
token.error-token#C44D4D
token.debug-token#9D5DCF
Monokai Plus Ultra by k3v5 - VS Code Theme