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#16161b
  • activityBar.border#16161b
  • activityBar.foreground#efefef
  • activityBarBadge.background#16161b
  • activityBarBadge.foreground#efefef
  • badge.background#16161b
  • badge.foreground#efefef
  • button.background#efefef
  • button.foreground#16161b
  • button.hoverBackground#efefef
  • debugExceptionWidget.background#16161b
  • debugExceptionWidget.border#efefef
  • debugToolBar.background#16161b
  • diffEditor.insertedTextBackground#16161b
  • diffEditor.removedTextBackground#16161b
  • dropdown.background#16161b
  • editor.background#16161b
  • editor.findMatchBackground#666
  • editor.findMatchHighlightBackground#666
  • editor.findRangeHighlightBackground#666
  • editor.foreground#efefef
  • editor.lineHighlightBackground#222
  • editor.rangeHighlightBackground#222
  • editor.selectionBackground#666
  • editor.wordHighlightBackground#222
  • editor.wordHighlightStrongBackground#222
  • editorBracketMatch.background#16161b
  • editorBracketMatch.border#222
  • editorCursor.foreground#efefef
  • editorError.foreground#ff3333
  • editorGroup.background#16161b
  • editorGroup.border#1d242c
  • editorGroupHeader.noTabsBackground#16161b
  • editorGroupHeader.tabsBackground#16161b
  • editorGroupHeader.tabsBorder#16161b
  • editorGutter.addedBackground#c2d94c
  • editorGutter.deletedBackground#ff3333
  • editorGutter.modifiedBackground#50b4e6
  • editorHoverWidget.background#16161b
  • editorHoverWidget.border#16161b
  • editorIndentGuide.background#16161b
  • editorLineNumber.foreground#efefef
  • editorLink.activeForeground#efefef
  • editorMarkerNavigation.background#16161b
  • editorOverviewRuler.border#222
  • editorOverviewRuler.errorForeground#ff3333
  • editorOverviewRuler.warningForeground#f29718
  • editorRuler.foreground#efefef
  • editorSuggestWidget.background#16161b
  • editorSuggestWidget.border#1d242c
  • editorSuggestWidget.highlightForeground#efefef
  • editorSuggestWidget.selectedBackground#16161b
  • editorWarning.foreground#f29718
  • editorWhitespace.foreground#efefef
  • editorWidget.background#16161b
  • editorWidget.border#222
  • editorWidget.foreground#efefef
  • extensionButton.prominentBackground#16161b
  • extensionButton.prominentForeground#efefef
  • extensionButton.prominentHoverBackground#16161b
  • focusBorder#16161b
  • foreground#efefef
  • input.background#16161b
  • input.border#16161b
  • input.foreground#efefef
  • input.placeholderForeground#efefef
  • inputOption.activeBorder#16161b
  • inputValidation.errorBackground#16161b
  • inputValidation.errorBorder#ff3333
  • inputValidation.infoBackground#16161b
  • inputValidation.infoBorder#50b4e6
  • inputValidation.warningBackground#16161b
  • inputValidation.warningBorder#f29718
  • list.activeSelectionBackground#16161b
  • list.activeSelectionForeground#efefef
  • list.focusBackground#16161b
  • list.focusForeground#efefef
  • list.highlightForeground#efefef
  • list.hoverBackground#16161b
  • list.hoverForeground#efefef
  • list.inactiveSelectionBackground#16161b
  • list.inactiveSelectionForeground#efefef
  • menubar.selectionForeground#000
  • panel.background#16161b
  • panel.border#1d242c
  • panelTitle.activeBorder#f29718
  • panelTitle.activeForeground#efefef
  • panelTitle.inactiveForeground#efefef
  • peekView.border#1d242c
  • peekViewEditor.background#16161b
  • peekViewEditor.matchHighlightBackground#666
  • peekViewResult.background#16161b
  • peekViewResult.fileForeground#efefef
  • peekViewResult.matchHighlightBackground#666
  • peekViewTitle.background#16161b
  • peekViewTitleDescription.foreground#efefef
  • peekViewTitleLabel.foreground#efefef
  • pickerGroup.border#16161b
  • pickerGroup.foreground#efefef
  • progressBar.background#16161b
  • quickInputList.focusBackground#222
  • scrollbar.shadow#16161b
  • scrollbarSlider.activeBackground#16161b
  • scrollbarSlider.background#16161b
  • scrollbarSlider.hoverBackground#16161b
  • selection.background#16161b
  • sideBar.background#16161b
  • sideBar.border#16161b
  • sideBarSectionHeader.background#16161b
  • sideBarSectionHeader.foreground#efefef
  • sideBarTitle.foreground#efefef
  • statusBar.background#16161b
  • statusBar.border#16161b
  • statusBar.debuggingBackground#16161b
  • statusBar.debuggingForeground#efefef
  • statusBar.foreground#efefef
  • statusBar.noFolderBackground#16161b
  • statusBarItem.activeBackground#16161b
  • statusBarItem.hoverBackground#16161b
  • statusBarItem.prominentBackground#16161b
  • statusBarItem.prominentHoverBackground#16161b
  • tab.activeBackground#16161b
  • tab.activeBorder#16161b
  • tab.activeForeground#efefef
  • tab.border#16161b
  • tab.inactiveBackground#16161b
  • tab.inactiveForeground#efefef
  • tab.unfocusedActiveBorder#f29718
  • tab.unfocusedActiveForeground#efefef
  • tab.unfocusedInactiveForeground#efefef
  • terminal.ansiBlack#121212
  • terminal.ansiBlue#50b4e6
  • terminal.ansiBrightBlack#16161b
  • terminal.ansiBrightBlue#6871ff
  • terminal.ansiBrightCyan#a6fde1
  • terminal.ansiBrightGreen#3FDAA4
  • terminal.ansiBrightMagenta#ff77ff
  • terminal.ansiBrightRed#f00
  • terminal.ansiBrightWhite#d1d1d1
  • terminal.ansiBrightYellow#FAB795
  • terminal.ansiCyan#95e6cb
  • terminal.ansiGreen#29D398
  • terminal.ansiMagenta#ca30c7
  • terminal.ansiRed#e00
  • terminal.ansiWhite#969696
  • terminal.ansiYellow#FAB795
  • terminal.background#16161b
  • terminal.foreground#efefef
  • textBlockQuote.background#16161b
  • textLink.activeForeground#efefef
  • textLink.foreground#efefef
  • textPreformat.foreground#efefef
  • titleBar.activeBackground#16161b
  • titleBar.activeForeground#efefef
  • titleBar.border#16161b
  • titleBar.inactiveBackground#16161b
  • titleBar.inactiveForeground#efefef
  • walkThrough.embeddedEditorBackground#16161b
  • widget.shadow#16161b

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
—#efefef—
comment, punctuation.definition.comment#ddditalic
variable#efefefitalic
keyword, storage.type, storage.modifier#efefef—
constant.other.color, meta.tag, punctuation.separator.inheritance.php, punctuation.section.embedded, keyword.other.substitution#efefefbold
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#efefef—
meta.tag.jsx#efefef—
entity.name.function, keyword.other.special-method, variable.function, meta.block-level, support.function#efefefitalic
support.other.variable, string.other.link#efefefitalic
constant.numeric, constant.language, support.constant, constant.character, variable.parameter, keyword.other.unit#efefefitalic
string, keyword.other.template, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#efefefnormal
entity.name.class, entity.name.type.class, entity.name.instance, entity.name.type.instance, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter#efefef—
entity.name.module, entity.name.type.module, variable.import.parameter.js, variable.other.class.js#efefef—
variable.language#efefefitalic
invalid#efefefitalic
invalid.deprecated#efefef—
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag#efefef—
entity.other.attribute-name#efefef—
markup.inserted#efefef—
markup.deleted#efefef—
markup.changed#efefef—
string.regexp, constant.character.escape#efefef—
*url*, *link*, *uri*—underline
constant.numeric.line-number.find-in-files - match#efefef—
entity.name.filename.find-in-files#efefef—
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#efefefitalic
source.js constant.other.object.key.js string.unquoted.label.js#efefefitalic
entity.name.method.js#efefef—
meta.class-method.js entity.name.function.js, variable.function.constructor#efefef—
markup.italic#efefefitalic
markup.bold#efefefbold
markup.underline#efefefunderline
markup.strike#efefefstrike
markup.quote#efefefitalic
markup.fenced_code.block.markdown#efefef—
markup.table#efefef—
text.html.markdown, punctuation.definition.list_item.markdown#efefef—
text.html.markdown markup.inline.raw.string.markdown#efefef—
text.html.markdown meta.dummy.line-break#efefef—
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#efefef—
markup.quote, punctuation.definition.blockquote.markdown#efefefitalic
string.other.link.title.markdown#efefefunderline
markup.raw.block.fenced.markdown#efefef—
punctuation.definition.fenced.markdown, variable.language.fenced.markdown#efefef—
variable.language.fenced.markdown#efefef—
meta.separator#efefefbold
source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#efefef—
source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#efefef—
source.json meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#efefef—
source.json meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#efefef—
source.json meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#efefef—
source.json meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#efefef—
source.json meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#efefef—
source.json meta meta.structure.dictionary.json string.quoted.double.json - meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta.structure.dictionary.json punctuation.definition.string - meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#efefef—
source.json meta.structure.dictionary.json string.quoted.double.json - meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta.structure.dictionary.json punctuation.definition.string - meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#efefef—
acejump.label.blue#efefef—
acejump.label.green#efefef—
acejump.label.orange#efefef—
acejump.label.purple#efefef—
sublimelinter.mark.warning#efefef—
sublimelinter.gutter-mark#efefef—
sublimelinter.mark.error#efefef—
markup.ignored.git_gutter#efefef—
markup.untracked.git_gutter#efefef—
gutter_color#efefef—
token.info-token#efefef—
token.warn-token#efefef—
token.error-token#efefef—
token.debug-token#efefef—
Monoclean by Reaper - VS Code Theme