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.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#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
A Colorful GitHub Theme Pack by Mark Miro - VS Code Theme