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.underline—underline
markup.strikethrough—strikethrough
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—