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.activeBorder#ec775c
  • activityBar.background#1e2a20
  • activityBar.border#405043
  • activityBar.foreground#aabfad
  • activityBar.inactiveForeground#738876
  • activityBarBadge.background#316dca
  • activityBarBadge.foreground#cadecd
  • badge.background#316dca
  • badge.foreground#cadecd
  • breadcrumb.activeSelectionForeground#738876
  • breadcrumb.focusForeground#aabfad
  • breadcrumb.foreground#738876
  • breadcrumbPicker.background#29362b
  • button.background#347d39
  • button.foreground#ffffff
  • button.hoverBackground#46954a
  • button.secondaryBackground#39483b
  • button.secondaryForeground#aabfad
  • button.secondaryHoverBackground#405043
  • checkbox.background#29362b
  • checkbox.border#405043
  • debugConsole.errorForeground#fb987e
  • debugConsole.infoForeground#738876
  • debugConsole.sourceForeground#cdb048
  • debugConsole.warningForeground#ba962e
  • debugConsoleInputIcon.foreground#bc80e2
  • debugIcon.breakpointForeground#e5534b
  • debugTokenExpression.boolean#56c682
  • debugTokenExpression.error#fb987e
  • debugTokenExpression.name#81b1fe
  • debugTokenExpression.number#56c682
  • debugTokenExpression.string#a2ccff
  • debugTokenExpression.value#a2ccff
  • debugToolBar.background#29362b
  • descriptionForeground#738876
  • diffEditor.insertedLineBackground#1d7e4b26
  • diffEditor.insertedTextBackground#42ad6e4d
  • diffEditor.removedLineBackground#c4451e26
  • diffEditor.removedTextBackground#ef77564d
  • disabledForeground#c4d0c580
  • dropdown.background#29362b
  • dropdown.border#405043
  • dropdown.foreground#aabfad
  • dropdown.listBackground#29362b
  • editor.background#1e2a20
  • editor.findMatchBackground#966600
  • editor.findMatchHighlightBackground#dccb6880
  • editor.focusedStackFrameHighlightBackground#46954a66
  • editor.foldBackground#5f73621a
  • editor.foreground#aabfad
  • editor.lineHighlightBackground#5f73621a
  • editor.linkedEditingBackground#539bf512
  • editor.selectionHighlightBackground#42ad6e40
  • editor.stackFrameHighlightBackground#ae7c1466
  • editor.wordHighlightBackground#5f736280
  • editor.wordHighlightBorder#5f736299
  • editor.wordHighlightStrongBackground#5f73624d
  • editor.wordHighlightStrongBorder#5f736299
  • editorBracketHighlight.foreground1#81b1fe
  • editorBracketHighlight.foreground2#56c682
  • editorBracketHighlight.foreground3#cdb048
  • editorBracketHighlight.foreground4#fb987e
  • editorBracketHighlight.foreground5#ff8eb6
  • editorBracketHighlight.foreground6#e4bbf2
  • editorBracketHighlight.unexpectedBracket.foreground#738876
  • editorBracketMatch.background#42ad6e40
  • editorBracketMatch.border#42ad6e99
  • editorCursor.foreground#539bf5
  • editorGroup.border#405043
  • editorGroupHeader.tabsBackground#18241a
  • editorGroupHeader.tabsBorder#405043
  • editorGutter.addedBackground#46954a66
  • editorGutter.deletedBackground#e5534b66
  • editorGutter.modifiedBackground#ae7c1466
  • editorHoverWidget.border#3e4840
  • editorIndentGuide.activeBackground#aabfad3d
  • editorIndentGuide.background#aabfad1f
  • editorInlayHint.background#73887633
  • editorInlayHint.foreground#738876
  • editorInlayHint.paramBackground#73887633
  • editorInlayHint.paramForeground#738876
  • editorInlayHint.typeBackground#73887633
  • editorInlayHint.typeForeground#738876
  • editorLineNumber.activeForeground#aabfad
  • editorLineNumber.foreground#5f7362
  • editorOverviewRuler.border#1c2128
  • editorWhitespace.foreground#506153
  • editorWidget.background#29362b
  • errorForeground#e5534b
  • focusBorder#316dca
  • foreground#aabfad
  • gitDecoration.addedResourceForeground#57ab5a
  • gitDecoration.conflictingResourceForeground#cc6b2c
  • gitDecoration.deletedResourceForeground#e5534b
  • gitDecoration.ignoredResourceForeground#5f7362
  • gitDecoration.modifiedResourceForeground#c69026
  • gitDecoration.submoduleResourceForeground#738876
  • gitDecoration.untrackedResourceForeground#57ab5a
  • icon.foreground#738876
  • input.background#1e2a20
  • input.border#405043
  • input.foreground#aabfad
  • input.placeholderForeground#5f7362
  • keybindingLabel.foreground#aabfad
  • list.activeSelectionBackground#5f736266
  • list.activeSelectionForeground#aabfad
  • list.focusBackground#4184e426
  • list.focusForeground#aabfad
  • list.highlightForeground#539bf5
  • list.hoverBackground#5f73621a
  • list.hoverForeground#aabfad
  • list.inactiveFocusBackground#4184e426
  • list.inactiveSelectionBackground#5f736266
  • list.inactiveSelectionForeground#aabfad
  • minimapSlider.activeBackground#73887647
  • minimapSlider.background#73887633
  • minimapSlider.hoverBackground#7388763d
  • notificationCenterHeader.background#29362b
  • notificationCenterHeader.foreground#738876
  • notifications.background#29362b
  • notifications.border#405043
  • notifications.foreground#aabfad
  • notificationsErrorIcon.foreground#e5534b
  • notificationsInfoIcon.foreground#539bf5
  • notificationsWarningIcon.foreground#c69026
  • panel.background#18241a
  • panel.border#405043
  • panelInput.border#405043
  • panelTitle.activeBorder#ec775c
  • panelTitle.activeForeground#aabfad
  • panelTitle.inactiveForeground#738876
  • peekViewEditor.background#5f73621a
  • peekViewEditor.matchHighlightBackground#ae7c1466
  • peekViewResult.background#1e2a20
  • peekViewResult.matchHighlightBackground#ae7c1466
  • pickerGroup.border#405043
  • pickerGroup.foreground#738876
  • progressBar.background#316dca
  • quickInput.background#29362b
  • quickInput.foreground#aabfad
  • scrollbar.shadow#50615333
  • scrollbarSlider.activeBackground#73887647
  • scrollbarSlider.background#73887633
  • scrollbarSlider.hoverBackground#7388763d
  • settings.headerForeground#aabfad
  • settings.modifiedItemIndicator#ae7c1466
  • sideBar.background#18241a
  • sideBar.border#405043
  • sideBar.foreground#aabfad
  • sideBarSectionHeader.background#18241a
  • sideBarSectionHeader.border#405043
  • sideBarSectionHeader.foreground#aabfad
  • sideBarTitle.foreground#aabfad
  • statusBar.background#1e2a20
  • statusBar.border#405043
  • statusBar.debuggingBackground#c93c37
  • statusBar.debuggingForeground#cadecd
  • statusBar.focusBorder#316dca80
  • statusBar.foreground#738876
  • statusBar.noFolderBackground#1e2a20
  • statusBarItem.activeBackground#aabfad1f
  • statusBarItem.focusBorder#316dca
  • statusBarItem.hoverBackground#aabfad14
  • statusBarItem.prominentBackground#5f736266
  • statusBarItem.remoteBackground#405043
  • statusBarItem.remoteForeground#aabfad
  • symbolIcon.arrayForeground#d78935
  • symbolIcon.booleanForeground#6e96f2
  • symbolIcon.classForeground#d78935
  • symbolIcon.colorForeground#81b1fe
  • symbolIcon.constantForeground#aaf2c2#7edd9f#56c682#42ad6e#31965d#1d7e4b#186b3f#155935#0f482b#08341f
  • symbolIcon.constructorForeground#e4bbf2
  • symbolIcon.enumeratorForeground#d78935
  • symbolIcon.enumeratorMemberForeground#6e96f2
  • symbolIcon.eventForeground#5f7362
  • symbolIcon.fieldForeground#d78935
  • symbolIcon.fileForeground#ba962e
  • symbolIcon.folderForeground#ba962e
  • symbolIcon.functionForeground#bc80e2
  • symbolIcon.interfaceForeground#d78935
  • symbolIcon.keyForeground#6e96f2
  • symbolIcon.keywordForeground#ef7756
  • symbolIcon.methodForeground#bc80e2
  • symbolIcon.moduleForeground#ef7756
  • symbolIcon.namespaceForeground#ef7756
  • symbolIcon.nullForeground#6e96f2
  • symbolIcon.numberForeground#42ad6e
  • symbolIcon.objectForeground#d78935
  • symbolIcon.operatorForeground#81b1fe
  • symbolIcon.packageForeground#d78935
  • symbolIcon.propertyForeground#d78935
  • symbolIcon.referenceForeground#6e96f2
  • symbolIcon.snippetForeground#6e96f2
  • symbolIcon.stringForeground#81b1fe
  • symbolIcon.structForeground#d78935
  • symbolIcon.textForeground#81b1fe
  • symbolIcon.typeParameterForeground#81b1fe
  • symbolIcon.unitForeground#6e96f2
  • symbolIcon.variableForeground#d78935
  • tab.activeBackground#1e2a20
  • tab.activeBorder#1e2a20
  • tab.activeBorderTop#ec775c
  • tab.activeForeground#aabfad
  • tab.border#405043
  • tab.hoverBackground#1e2a20
  • tab.inactiveBackground#18241a
  • tab.inactiveForeground#738876
  • tab.unfocusedActiveBorder#1e2a20
  • tab.unfocusedActiveBorderTop#405043
  • tab.unfocusedHoverBackground#5f73621a
  • terminal.ansiBlack#506153
  • terminal.ansiBlue#6e96f2
  • terminal.ansiBrightBlack#5f7362
  • terminal.ansiBrightBlue#81b1fe
  • terminal.ansiBrightCyan#62d1e6
  • terminal.ansiBrightGreen#56c682
  • terminal.ansiBrightMagenta#e4bbf2
  • terminal.ansiBrightRed#fb987e
  • terminal.ansiBrightWhite#cadecd
  • terminal.ansiBrightYellow#cdb048
  • terminal.ansiCyan#49c2d8
  • terminal.ansiGreen#42ad6e
  • terminal.ansiMagenta#bc80e2
  • terminal.ansiRed#ef7756
  • terminal.ansiWhite#8da290
  • terminal.ansiYellow#ba962e
  • terminal.foreground#aabfad
  • textBlockQuote.background#18241a
  • textBlockQuote.border#405043
  • textCodeBlock.background#5f736266
  • textLink.activeForeground#539bf5
  • textLink.foreground#539bf5
  • textPreformat.background#5f736266
  • textPreformat.foreground#738876
  • textSeparator.foreground#334236
  • titleBar.activeBackground#1e2a20
  • titleBar.activeForeground#738876
  • titleBar.border#405043
  • titleBar.inactiveBackground#18241a
  • titleBar.inactiveForeground#738876
  • tree.indentGuidesStroke#334236
  • welcomePage.buttonBackground#334236
  • welcomePage.buttonHoverBackground#405043

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#738876
constant.other.placeholder, constant.character#ef7756
constant, entity.name.constant, variable.other.constant, variable.other.enummember, variable.language, entity#81b1fe
entity.name, meta.export.default, meta.definition.variable#eba44c
variable.parameter.function, meta.jsx.children, meta.block, meta.tag.attributes, entity.name.constant, meta.object.member, meta.embedded.expression#aabfad
entity.name.function#e4bbf2
entity.name.tag, support.class.component#7edd9f
keyword#ef7756
storage, storage.type#ef7756
storage.modifier.package, storage.modifier.import, storage.type.java#aabfad
string, string punctuation.section.embedded source#a2ccff
support#81b1fe
meta.property-name#81b1fe
variable#eba44c
variable.other#aabfad
invalid.broken#fb987eitalic
invalid.deprecated#fb987eitalic
invalid.illegal#fb987eitalic
invalid.unimplemented#fb987eitalic
carriage-return#cadecditalic underline
message.error#fb987e
string variable#81b1fe
source.regexp, string.regexp#a2ccff
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#a2ccff
string.regexp constant.character.escape#7edd9fbold
support.constant#81b1fe
support.variable#81b1fe
support.type.property-name.json#7edd9f
meta.module-reference#81b1fe
punctuation.definition.list.begin.markdown#eba44c
markup.heading, markup.heading entity.name#81b1febold
markup.quote#7edd9f
markup.italic#aabfaditalic
markup.bold#aabfadbold
markup.underlineunderline
markup.strikethroughstrikethrough
markup.inline.raw#81b1fe
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#fb987e
punctuation.section.embedded#ef7756
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#7edd9f
markup.changed, punctuation.definition.changed#eba44c
markup.ignored, markup.untracked#29362b
meta.diff.range#e4bbf2bold
meta.diff.header#81b1fe
meta.separator#81b1febold
meta.output#81b1fe
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#738876
brackethighlighter.unmatched#fb987e
constant.other.reference.link, string.other.link#a2ccff