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#312226
  • activityBar.border#59454a
  • activityBar.foreground#ccb0b7
  • activityBar.inactiveForeground#947980
  • activityBarBadge.background#316dca
  • activityBarBadge.foreground#eacfd6
  • badge.background#316dca
  • badge.foreground#eacfd6
  • breadcrumb.activeSelectionForeground#947980
  • breadcrumb.focusForeground#ccb0b7
  • breadcrumb.foreground#947980
  • breadcrumbPicker.background#3e2d32
  • button.background#347d39
  • button.foreground#ffffff
  • button.hoverBackground#46954a
  • button.secondaryBackground#513d43
  • button.secondaryForeground#ccb0b7
  • button.secondaryHoverBackground#59454a
  • checkbox.background#3e2d32
  • checkbox.border#59454a
  • debugConsole.errorForeground#fb987e
  • debugConsole.infoForeground#947980
  • 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#3e2d32
  • descriptionForeground#947980
  • diffEditor.insertedLineBackground#1d7e4b26
  • diffEditor.insertedTextBackground#42ad6e4d
  • diffEditor.removedLineBackground#c4451e26
  • diffEditor.removedTextBackground#ef77564d
  • disabledForeground#d8c7cb80
  • dropdown.background#3e2d32
  • dropdown.border#59454a
  • dropdown.foreground#ccb0b7
  • dropdown.listBackground#3e2d32
  • editor.background#312226
  • editor.findMatchBackground#966600
  • editor.findMatchHighlightBackground#dccb6880
  • editor.focusedStackFrameHighlightBackground#46954a66
  • editor.foldBackground#7e656c1a
  • editor.foreground#ccb0b7
  • editor.lineHighlightBackground#7e656c1a
  • editor.linkedEditingBackground#539bf512
  • editor.selectionHighlightBackground#42ad6e40
  • editor.stackFrameHighlightBackground#ae7c1466
  • editor.wordHighlightBackground#7e656c80
  • editor.wordHighlightBorder#7e656c99
  • editor.wordHighlightStrongBackground#7e656c4d
  • editor.wordHighlightStrongBorder#7e656c99
  • editorBracketHighlight.foreground1#81b1fe
  • editorBracketHighlight.foreground2#56c682
  • editorBracketHighlight.foreground3#cdb048
  • editorBracketHighlight.foreground4#fb987e
  • editorBracketHighlight.foreground5#ff8eb6
  • editorBracketHighlight.foreground6#e4bbf2
  • editorBracketHighlight.unexpectedBracket.foreground#947980
  • editorBracketMatch.background#42ad6e40
  • editorBracketMatch.border#42ad6e99
  • editorCursor.foreground#539bf5
  • editorGroup.border#59454a
  • editorGroupHeader.tabsBackground#2b1c20
  • editorGroupHeader.tabsBorder#59454a
  • editorGutter.addedBackground#46954a66
  • editorGutter.deletedBackground#e5534b66
  • editorGutter.modifiedBackground#ae7c1466
  • editorHoverWidget.border#4f4145
  • editorIndentGuide.activeBackground#ccb0b73d
  • editorIndentGuide.background#ccb0b71f
  • editorInlayHint.background#94798033
  • editorInlayHint.foreground#947980
  • editorInlayHint.paramBackground#94798033
  • editorInlayHint.paramForeground#947980
  • editorInlayHint.typeBackground#94798033
  • editorInlayHint.typeForeground#947980
  • editorLineNumber.activeForeground#ccb0b7
  • editorLineNumber.foreground#7e656c
  • editorOverviewRuler.border#1c2128
  • editorWhitespace.foreground#6c555b
  • editorWidget.background#3e2d32
  • errorForeground#e5534b
  • focusBorder#316dca
  • foreground#ccb0b7
  • gitDecoration.addedResourceForeground#57ab5a
  • gitDecoration.conflictingResourceForeground#cc6b2c
  • gitDecoration.deletedResourceForeground#e5534b
  • gitDecoration.ignoredResourceForeground#7e656c
  • gitDecoration.modifiedResourceForeground#c69026
  • gitDecoration.submoduleResourceForeground#947980
  • gitDecoration.untrackedResourceForeground#57ab5a
  • icon.foreground#947980
  • input.background#312226
  • input.border#59454a
  • input.foreground#ccb0b7
  • input.placeholderForeground#7e656c
  • keybindingLabel.foreground#ccb0b7
  • list.activeSelectionBackground#7e656c66
  • list.activeSelectionForeground#ccb0b7
  • list.focusBackground#4184e426
  • list.focusForeground#ccb0b7
  • list.highlightForeground#539bf5
  • list.hoverBackground#7e656c1a
  • list.hoverForeground#ccb0b7
  • list.inactiveFocusBackground#4184e426
  • list.inactiveSelectionBackground#7e656c66
  • list.inactiveSelectionForeground#ccb0b7
  • minimapSlider.activeBackground#94798047
  • minimapSlider.background#94798033
  • minimapSlider.hoverBackground#9479803d
  • notificationCenterHeader.background#3e2d32
  • notificationCenterHeader.foreground#947980
  • notifications.background#3e2d32
  • notifications.border#59454a
  • notifications.foreground#ccb0b7
  • notificationsErrorIcon.foreground#e5534b
  • notificationsInfoIcon.foreground#539bf5
  • notificationsWarningIcon.foreground#c69026
  • panel.background#2b1c20
  • panel.border#59454a
  • panelInput.border#59454a
  • panelTitle.activeBorder#ec775c
  • panelTitle.activeForeground#ccb0b7
  • panelTitle.inactiveForeground#947980
  • peekViewEditor.background#7e656c1a
  • peekViewEditor.matchHighlightBackground#ae7c1466
  • peekViewResult.background#312226
  • peekViewResult.matchHighlightBackground#ae7c1466
  • pickerGroup.border#59454a
  • pickerGroup.foreground#947980
  • progressBar.background#316dca
  • quickInput.background#3e2d32
  • quickInput.foreground#ccb0b7
  • scrollbar.shadow#6c555b33
  • scrollbarSlider.activeBackground#94798047
  • scrollbarSlider.background#94798033
  • scrollbarSlider.hoverBackground#9479803d
  • settings.headerForeground#ccb0b7
  • settings.modifiedItemIndicator#ae7c1466
  • sideBar.background#2b1c20
  • sideBar.border#59454a
  • sideBar.foreground#ccb0b7
  • sideBarSectionHeader.background#2b1c20
  • sideBarSectionHeader.border#59454a
  • sideBarSectionHeader.foreground#ccb0b7
  • sideBarTitle.foreground#ccb0b7
  • statusBar.background#312226
  • statusBar.border#59454a
  • statusBar.debuggingBackground#c93c37
  • statusBar.debuggingForeground#eacfd6
  • statusBar.focusBorder#316dca80
  • statusBar.foreground#947980
  • statusBar.noFolderBackground#312226
  • statusBarItem.activeBackground#ccb0b71f
  • statusBarItem.focusBorder#316dca
  • statusBarItem.hoverBackground#ccb0b714
  • statusBarItem.prominentBackground#7e656c66
  • statusBarItem.remoteBackground#59454a
  • statusBarItem.remoteForeground#ccb0b7
  • 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#7e656c
  • 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#312226
  • tab.activeBorder#312226
  • tab.activeBorderTop#ec775c
  • tab.activeForeground#ccb0b7
  • tab.border#59454a
  • tab.hoverBackground#312226
  • tab.inactiveBackground#2b1c20
  • tab.inactiveForeground#947980
  • tab.unfocusedActiveBorder#312226
  • tab.unfocusedActiveBorderTop#59454a
  • tab.unfocusedHoverBackground#7e656c1a
  • terminal.ansiBlack#6c555b
  • terminal.ansiBlue#6e96f2
  • terminal.ansiBrightBlack#7e656c
  • terminal.ansiBrightBlue#81b1fe
  • terminal.ansiBrightCyan#62d1e6
  • terminal.ansiBrightGreen#56c682
  • terminal.ansiBrightMagenta#e4bbf2
  • terminal.ansiBrightRed#fb987e
  • terminal.ansiBrightWhite#eacfd6
  • terminal.ansiBrightYellow#cdb048
  • terminal.ansiCyan#49c2d8
  • terminal.ansiGreen#42ad6e
  • terminal.ansiMagenta#bc80e2
  • terminal.ansiRed#ef7756
  • terminal.ansiWhite#af939a
  • terminal.ansiYellow#ba962e
  • terminal.foreground#ccb0b7
  • textBlockQuote.background#2b1c20
  • textBlockQuote.border#59454a
  • textCodeBlock.background#7e656c66
  • textLink.activeForeground#539bf5
  • textLink.foreground#539bf5
  • textPreformat.background#7e656c66
  • textPreformat.foreground#947980
  • textSeparator.foreground#4a373d
  • titleBar.activeBackground#312226
  • titleBar.activeForeground#947980
  • titleBar.border#59454a
  • titleBar.inactiveBackground#2b1c20
  • titleBar.inactiveForeground#947980
  • tree.indentGuidesStroke#4a373d
  • welcomePage.buttonBackground#4a373d
  • welcomePage.buttonHoverBackground#59454a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#947980—
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#ccb0b7—
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#ccb0b7—
string, string punctuation.section.embedded source#a2ccff—
support#81b1fe—
meta.property-name#81b1fe—
variable#eba44c—
variable.other#ccb0b7—
invalid.broken#fb987eitalic
invalid.deprecated#fb987eitalic
invalid.illegal#fb987eitalic
invalid.unimplemented#fb987eitalic
carriage-return#eacfd6italic 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#ccb0b7italic
markup.bold#ccb0b7bold
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#3e2d32—
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#947980—
brackethighlighter.unmatched#fb987e—
constant.other.reference.link, string.other.link#a2ccff—