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#282828
  • activityBar.border#3c3836
  • activityBar.dropBackground#1d2021
  • activityBar.foreground#ebdbb2
  • activityBarBadge.background#458588
  • activityBarBadge.foreground#ebdbb2
  • badge.background#d3869b
  • badge.foreground#1d2021
  • button.background#45858880
  • button.foreground#ebdbb2
  • button.hoverBackground#45858860
  • debugConsole.infoForeground#ebdbb2
  • debugToolBar.background#1d2021
  • diffEditor.insertedTextBackground#b8bb2630
  • diffEditor.insertedTextBorder#98971a00
  • diffEditor.removedTextBackground#fb493430
  • diffEditor.removedTextBorder#cc241d00
  • dropdown.background#1d2021
  • dropdown.border#3c3836
  • dropdown.foreground#ebdbb2
  • editor.background#282828
  • editor.findMatchBackground#83a59870
  • editor.findMatchHighlightBackground#fe801930
  • editor.findRangeHighlightBackground#83a59870
  • editor.foreground#ebdbb2
  • editor.hoverHighlightBackground#689d6a50
  • editor.lineHighlightBackground#3c383660
  • editor.lineHighlightBorder#3c383600
  • editor.selectionBackground#689d6a40
  • editor.selectionHighlightBackground#fabd2f40
  • editorBracketMatch.background#92837480
  • editorBracketMatch.border#1d202100
  • editorCodeLens.foreground#a8998490
  • editorCursor.foreground#eee5e5
  • editorError.foreground#cc241d
  • editorGroup.background#3c3836
  • editorGroup.border#3c3836
  • editorGroup.dropBackground#3c383660
  • editorGroupHeader.noTabsBackground#3c3836
  • editorGroupHeader.tabsBackground#282828
  • editorGroupHeader.tabsBorder#3c3836
  • editorGutter.addedBackground#b8bb26
  • editorGutter.background#1d202100
  • editorGutter.deletedBackground#fb4934
  • editorGutter.modifiedBackground#83a598
  • editorHoverWidget.background#1d2021
  • editorHoverWidget.border#3c3836
  • editorIndentGuide.activeBackground#a8998450
  • editorIndentGuide.background#a8998420
  • editorInfo.foreground#458588
  • editorLineNumber.foreground#665c54
  • editorLink.activeForeground#ebdbb2
  • editorOverviewRuler.addedForeground#83a598
  • editorOverviewRuler.border#1d202100
  • editorOverviewRuler.commonContentForeground#928374
  • editorOverviewRuler.currentContentForeground#458588
  • editorOverviewRuler.deletedForeground#83a598
  • editorOverviewRuler.errorForeground#fb4934
  • editorOverviewRuler.findMatchForeground#bdae93
  • editorOverviewRuler.incomingContentForeground#689d6a
  • editorOverviewRuler.infoForeground#d3869b
  • editorOverviewRuler.modifiedForeground#83a598
  • editorOverviewRuler.rangeHighlightForeground#bdae93
  • editorOverviewRuler.selectionHighlightForeground#665c54
  • editorOverviewRuler.warningForeground#d79921
  • editorOverviewRuler.wordHighlightForeground#665c54
  • editorOverviewRuler.wordHighlightStrongForeground#665c54
  • editorRuler.foreground#a8998440
  • editorSuggestWidget.background#1d2021
  • editorSuggestWidget.border#3c3836
  • editorSuggestWidget.foreground#ebdbb2
  • editorSuggestWidget.highlightForeground#689d6a
  • editorSuggestWidget.selectedBackground#616363
  • editorWarning.foreground#d79921
  • editorWhitespace.foreground#a8998420
  • editorWidget.background#1d2021
  • editorWidget.border#3c3836
  • errorForeground#fb4934
  • extensionButton.prominentBackground#b8bb2680
  • extensionButton.prominentHoverBackground#b8bb2630
  • focusBorder#3c3836
  • foreground#ebdbb2
  • gitDecoration.conflictingResourceForeground#b16286
  • gitDecoration.deletedResourceForeground#cc241d
  • gitDecoration.ignoredResourceForeground#7c6f64
  • gitDecoration.modifiedResourceForeground#8db0dc
  • gitDecoration.untrackedResourceForeground#c5e650
  • input.background#ebdbb205
  • input.border#3c3836
  • input.foreground#ebdbb2
  • input.placeholderForeground#ebdbb260
  • inputOption.activeBorder#ebdbb260
  • inputValidation.errorBackground#cc241d80
  • inputValidation.errorBorder#fb4934
  • inputValidation.infoBackground#45858880
  • inputValidation.infoBorder#83a598
  • inputValidation.warningBackground#d7992180
  • inputValidation.warningBorder#fabd2f
  • list.activeSelectionBackground#3c383680
  • list.activeSelectionForeground#8ec07c
  • list.dropBackground#3c3836
  • list.focusBackground#3c3836
  • list.focusForeground#ebdbb2
  • list.highlightForeground#689d6a
  • list.hoverBackground#3c383680
  • list.hoverForeground#d5c4a1
  • list.inactiveSelectionBackground#3c383680
  • list.inactiveSelectionForeground#689d6a
  • merge.border#1d202100
  • merge.currentContentBackground#45858820
  • merge.currentHeaderBackground#45858840
  • merge.incomingContentBackground#689d6a20
  • merge.incomingHeaderBackground#689d6a40
  • notification.background#1d2021
  • notification.buttonBackground#665c54
  • notification.buttonForeground#ebdbb2
  • notification.buttonHoverBackground#665c5450
  • notification.errorBackground#fb4934
  • notification.errorForeground#1d2021
  • notification.foreground#ebdbb2
  • notification.infoBackground#83a598
  • notification.infoForeground#1d2021
  • notification.warningBackground#fabd2f
  • notification.warningForeground#1d2021
  • panel.border#3c3836
  • panelTitle.activeForeground#ebdbb2
  • peekView.border#3c3836
  • peekViewEditor.background#3c383650
  • peekViewEditor.matchHighlightBackground
  • peekViewEditorGutter.background#3c383650
  • peekViewResult.background#3c383650
  • peekViewResult.fileForeground#ebdbb2
  • peekViewResult.matchHighlightBackground#8ec07c30
  • peekViewResult.selectionBackground#8ec07c30
  • peekViewResult.selectionForeground#8ec07c30
  • peekViewTitle.background#3c383650
  • peekViewTitleDescription.foreground#bdae93
  • peekViewTitleLabel.foreground#ebdbb2
  • progressBar.background#689d6a
  • scrollbar.shadow#1d2021
  • scrollbarSlider.activeBackground#689d6a
  • scrollbarSlider.background#50494599
  • scrollbarSlider.hoverBackground#665c54
  • selection.background#689d6a80
  • sideBar.background#282828
  • sideBar.border#3c3836
  • sideBar.foreground#d5c4a1
  • sideBarSectionHeader.background#1d202100
  • sideBarSectionHeader.foreground#ebdbb2
  • sideBarTitle.foreground#ebdbb2
  • statusBar.background#282828
  • statusBar.border#3c3836
  • statusBar.debuggingBackground#fe8019
  • statusBar.debuggingBorder#1d202100
  • statusBar.debuggingForeground#1d2021
  • statusBar.foreground#e78f0a
  • statusBar.noFolderBackground#1d2021
  • statusBar.noFolderBorder#1d202100
  • statusBar.prominentBackground#689d6a
  • statusBar.prominentHoverBackground#689d6a70
  • tab.activeBackground#202020
  • tab.activeBorder#689d6a
  • tab.activeForeground#e78f0a
  • tab.border#1d202100
  • tab.inactiveBackground#282828
  • tab.inactiveForeground#a89984
  • tab.unfocusedActiveBorder#1d202100
  • tab.unfocusedActiveForeground#a89984
  • tab.unfocusedInactiveForeground#928374
  • terminal.ansiBlack#3c3836
  • terminal.ansiBlue#458588
  • terminal.ansiBrightBlack#928374
  • terminal.ansiBrightBlue#83a598
  • terminal.ansiBrightCyan#8ec07c
  • terminal.ansiBrightGreen#b8bb26
  • terminal.ansiBrightMagenta#d3869b
  • terminal.ansiBrightRed#fb4934
  • terminal.ansiBrightWhite#ebdbb2
  • terminal.ansiBrightYellow#fabd2f
  • terminal.ansiCyan#689d6a
  • terminal.ansiGreen#98971a
  • terminal.ansiMagenta#b16286
  • terminal.ansiRed#cc241d
  • terminal.ansiWhite#a89984
  • terminal.ansiYellow#d79921
  • terminal.background#282828
  • terminal.foreground#ebdbb2
  • textLink.activeForeground#458588
  • textLink.foreground#83a598
  • titleBar.activeBackground#282828
  • widget.shadow#1d202130

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#1d2021
comment, punctuation.definition.comment#928374italic
invalid.deprecated
invalid.illegal#ff0000
keyword#fb4934
keyword.other.import, keyword.other.package#8EC07C
keyword.control.new#fe8019
keyword.operator#ebdbb2bold
storage#8ec07c
storage.type.annotation, storage.type.annotation.java, punctuation.definition.annotation#83a598
storage.modifier#fe8019
storage.modifier.import, storage.modifier.package#ebdbb2
storage.type, support.type#ebdbb2
constant.language, support.constant, variable.language#fe8019
variable.language.this.java#fe8019italic
entity.name.function, support.function#ebdbb2
entity.name.type, entity.other.inherited-class, support.class#ebdbb2
entity.name.exception#660000
string#b8bb26
constant.character.escape#777777
string.regexp#fe8019
constant.other.symbol#AB6526
punctuation#ebdbb2
support.type.property-name.json#b8bb26
string.quoted.double.json#ebdbb2
string source, text source#ebdbb2
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html#AAAAAA
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#ebdbb2
entity.name.tag#8ec07c
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#FABD2F
string.quoted.double.html#b8bb26
source.css
constant.character.entity, punctuation.definition.entity#AB6526
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css#AB6526
meta.property-name, support.type.property-name, support.type.vendored.property-name.css#fabd2f
punctuation.definition.entity.css#AB6526
meta.property-value, meta.property-value constant.other, support.constant.property-value, support.constant.font-name.css#ebdbb2
keyword.other.unit.px.css
markup.changed#000000
markup.deleted#000000
markup.italicitalic
markup.error#660000
markup.inserted#000000
meta.link#4B83CD
markup.output, markup.raw#777777
markup.prompt#777777
markup.heading#AA3731
markup.traceback#660000
markup.underlineunderline
markup.quote#7A3E9D
markup.list#4B83CD
markup.bold, markup.italic#095e09
markup.inline.raw#AB6526
meta.object-literal.key, meta.object-literal.key entity.name.function#ebdbb2
variable.language#ebdbb2
string.quoted.double.js#B8BB26
string.quoted.single.js#B8BB26
support.class.console.js, meta.function-call.js, meta.block.js, meta.function.expression.js, meta.method.declaration.js, meta.objectliteral.js#ebdbb2
meta.object-literal.key.js
meta.object-literal.key.js entity.name.function#696539
variable.parameter.js#ebdbb2
keyword.operator.expression.delete.js#8ec07c
constant.language #d3869b
storage.type.function.js#8ec07c
storage.type.js#8ec07c
variable.language.this.js#8ec07c