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#f19c88
  • activityBar.background#272d35
  • activityBar.border#4e5763
  • activityBar.foreground#ced6de
  • activityBar.inactiveForeground#8c97a2
  • activityBarBadge.background#4d82d4
  • activityBarBadge.foreground#f8fafb
  • badge.background#4d82d4
  • badge.foreground#f8fafb
  • breadcrumb.activeSelectionForeground#8c97a2
  • breadcrumb.focusForeground#ced6de
  • breadcrumb.foreground#8c97a2
  • breadcrumbPicker.background#343b44
  • button.background#3c9042
  • button.foreground#ffffff
  • button.hoverBackground#50ab55
  • button.secondaryBackground#464e59
  • button.secondaryForeground#ced6de
  • button.secondaryHoverBackground#4e5763
  • checkbox.background#343b44
  • checkbox.border#4e5763
  • debugConsole.errorForeground#ffc9c5
  • debugConsole.infoForeground#8c97a2
  • debugConsole.sourceForeground#e1ba62
  • debugConsole.warningForeground#d9a237
  • debugConsoleInputIcon.foreground#d0b5f6
  • debugIcon.breakpointForeground#eb7973
  • debugTokenExpression.boolean#8bd18d
  • debugTokenExpression.error#ffc9c5
  • debugTokenExpression.name#a2d1ff
  • debugTokenExpression.number#8bd18d
  • debugTokenExpression.string#d3ebff
  • debugTokenExpression.value#d3ebff
  • debugToolBar.background#343b44
  • descriptionForeground#8c97a2
  • diffEditor.insertedLineBackground#3c904226
  • diffEditor.insertedTextBackground#71b8734d
  • diffEditor.removedLineBackground#d1595526
  • diffEditor.removedTextBackground#f89e984d
  • dropdown.background#343b44
  • dropdown.border#4e5763
  • dropdown.foreground#ced6de
  • dropdown.listBackground#343b44
  • editor.background#272d35
  • editor.findMatchBackground#ac7500
  • editor.findMatchHighlightBackground#f0d58b80
  • editor.focusedStackFrameHighlightBackground#50ab5566
  • editor.foldBackground#727f8d1a
  • editor.foreground#ced6de
  • editor.lineHighlightBackground#727f8d1a
  • editor.linkedEditingBackground#81b6f812
  • editor.selectionHighlightBackground#71b87340
  • editor.stackFrameHighlightBackground#c88f1766
  • editor.wordHighlightBackground#727f8d80
  • editor.wordHighlightBorder#727f8d99
  • editor.wordHighlightStrongBackground#727f8d4d
  • editor.wordHighlightStrongBorder#727f8d99
  • editorBracketHighlight.foreground1#a2d1ff
  • editorBracketHighlight.foreground2#8bd18d
  • editorBracketHighlight.foreground3#e1ba62
  • editorBracketHighlight.foreground4#ffc9c5
  • editorBracketHighlight.foreground5#fec6e3
  • editorBracketHighlight.foreground6#fdfbff
  • editorBracketHighlight.unexpectedBracket.foreground#8c97a2
  • editorBracketMatch.background#71b87340
  • editorBracketMatch.border#71b87399
  • editorCursor.foreground#81b6f8
  • editorGroup.border#4e5763
  • editorGroupHeader.tabsBackground#20262e
  • editorGroupHeader.tabsBorder#4e5763
  • editorGutter.addedBackground#50ab5566
  • editorGutter.deletedBackground#eb797366
  • editorGutter.modifiedBackground#c88f1766
  • editorIndentGuide.activeBackground#ced6de3d
  • editorIndentGuide.background#ced6de1f
  • editorInlayHint.background#8c97a233
  • editorInlayHint.foreground#8c97a2
  • editorInlayHint.paramBackground#8c97a233
  • editorInlayHint.paramForeground#8c97a2
  • editorInlayHint.typeBackground#8c97a233
  • editorInlayHint.typeForeground#8c97a2
  • editorLineNumber.activeForeground#ced6de
  • editorLineNumber.foreground#727f8d
  • editorOverviewRuler.border#20262e
  • editorWhitespace.foreground#616b78
  • editorWidget.background#343b44
  • errorForeground#eb7973
  • focusBorder#4d82d4
  • foreground#ced6de
  • gitDecoration.addedResourceForeground#71b873
  • gitDecoration.conflictingResourceForeground#d77f46
  • gitDecoration.deletedResourceForeground#eb7973
  • gitDecoration.ignoredResourceForeground#727f8d
  • gitDecoration.modifiedResourceForeground#d9a237
  • gitDecoration.submoduleResourceForeground#8c97a2
  • gitDecoration.untrackedResourceForeground#71b873
  • icon.foreground#8c97a2
  • input.background#272d35
  • input.border#4e5763
  • input.foreground#ced6de
  • input.placeholderForeground#727f8d
  • keybindingLabel.foreground#ced6de
  • list.activeSelectionBackground#727f8d66
  • list.activeSelectionForeground#ced6de
  • list.focusBackground#679de926
  • list.focusForeground#ced6de
  • list.highlightForeground#81b6f8
  • list.hoverBackground#727f8d1a
  • list.hoverForeground#ced6de
  • list.inactiveFocusBackground#679de926
  • list.inactiveSelectionBackground#727f8d66
  • list.inactiveSelectionForeground#ced6de
  • minimapSlider.activeBackground#8c97a247
  • minimapSlider.background#8c97a233
  • minimapSlider.hoverBackground#8c97a23d
  • notificationCenterHeader.background#343b44
  • notificationCenterHeader.foreground#8c97a2
  • notifications.background#343b44
  • notifications.border#4e5763
  • notifications.foreground#ced6de
  • notificationsErrorIcon.foreground#eb7973
  • notificationsInfoIcon.foreground#81b6f8
  • notificationsWarningIcon.foreground#d9a237
  • panel.background#20262e
  • panel.border#4e5763
  • panelInput.border#4e5763
  • panelTitle.activeBorder#f19c88
  • panelTitle.activeForeground#ced6de
  • panelTitle.inactiveForeground#8c97a2
  • peekViewEditor.background#727f8d1a
  • peekViewEditor.matchHighlightBackground#c88f1766
  • peekViewResult.background#272d35
  • peekViewResult.matchHighlightBackground#c88f1766
  • pickerGroup.border#4e5763
  • pickerGroup.foreground#8c97a2
  • progressBar.background#4d82d4
  • quickInput.background#343b44
  • quickInput.foreground#ced6de
  • scrollbar.shadow#616b7833
  • scrollbarSlider.activeBackground#8c97a247
  • scrollbarSlider.background#8c97a233
  • scrollbarSlider.hoverBackground#8c97a23d
  • settings.headerForeground#ced6de
  • settings.modifiedItemIndicator#c88f1766
  • sideBar.background#20262e
  • sideBar.border#4e5763
  • sideBar.foreground#ced6de
  • sideBarSectionHeader.background#20262e
  • sideBarSectionHeader.border#4e5763
  • sideBarSectionHeader.foreground#ced6de
  • sideBarTitle.foreground#ced6de
  • statusBar.background#272d35
  • statusBar.border#4e5763
  • statusBar.debuggingBackground#d15955
  • statusBar.debuggingForeground#f8fafb
  • statusBar.focusBorder#4d82d480
  • statusBar.foreground#8c97a2
  • statusBar.noFolderBackground#272d35
  • statusBarItem.activeBackground#ced6de1f
  • statusBarItem.focusBorder#4d82d4
  • statusBarItem.hoverBackground#ced6de14
  • statusBarItem.prominentBackground#727f8d66
  • statusBarItem.remoteBackground#4e5763
  • statusBarItem.remoteForeground#ced6de
  • symbolIcon.arrayForeground#e69a62
  • symbolIcon.booleanForeground#81b6f8
  • symbolIcon.classForeground#e69a62
  • symbolIcon.colorForeground#a2d1ff
  • symbolIcon.constantForeground#e9fbe9#b6e8b5#8bd18d#71b873#50ab55#3c9042#317a37#29652f#1f5226#143c1a
  • symbolIcon.constructorForeground#fdfbff
  • symbolIcon.enumeratorForeground#e69a62
  • symbolIcon.enumeratorMemberForeground#81b6f8
  • symbolIcon.eventForeground#727f8d
  • symbolIcon.fieldForeground#e69a62
  • symbolIcon.fileForeground#d9a237
  • symbolIcon.folderForeground#d9a237
  • symbolIcon.functionForeground#d0b5f6
  • symbolIcon.interfaceForeground#e69a62
  • symbolIcon.keyForeground#81b6f8
  • symbolIcon.keywordForeground#f89e98
  • symbolIcon.methodForeground#d0b5f6
  • symbolIcon.moduleForeground#f89e98
  • symbolIcon.namespaceForeground#f89e98
  • symbolIcon.nullForeground#81b6f8
  • symbolIcon.numberForeground#71b873
  • symbolIcon.objectForeground#e69a62
  • symbolIcon.operatorForeground#a2d1ff
  • symbolIcon.packageForeground#e69a62
  • symbolIcon.propertyForeground#e69a62
  • symbolIcon.referenceForeground#81b6f8
  • symbolIcon.snippetForeground#81b6f8
  • symbolIcon.stringForeground#a2d1ff
  • symbolIcon.structForeground#e69a62
  • symbolIcon.textForeground#a2d1ff
  • symbolIcon.typeParameterForeground#a2d1ff
  • symbolIcon.unitForeground#81b6f8
  • symbolIcon.variableForeground#e69a62
  • tab.activeBackground#272d35
  • tab.activeBorder#272d35
  • tab.activeBorderTop#f19c88
  • tab.activeForeground#ced6de
  • tab.border#4e5763
  • tab.hoverBackground#272d35
  • tab.inactiveBackground#20262e
  • tab.inactiveForeground#8c97a2
  • tab.unfocusedActiveBorder#272d35
  • tab.unfocusedActiveBorderTop#4e5763
  • tab.unfocusedHoverBackground#727f8d1a
  • terminal.ansiBlack#616b78
  • terminal.ansiBlue#81b6f8
  • terminal.ansiBrightBlack#727f8d
  • terminal.ansiBrightBlue#a2d1ff
  • terminal.ansiBrightCyan#7cdee5
  • terminal.ansiBrightGreen#8bd18d
  • terminal.ansiBrightMagenta#fdfbff
  • terminal.ansiBrightRed#ffc9c5
  • terminal.ansiBrightWhite#f8fafb
  • terminal.ansiBrightYellow#e1ba62
  • terminal.ansiCyan#59ced7
  • terminal.ansiGreen#71b873
  • terminal.ansiMagenta#d0b5f6
  • terminal.ansiRed#f89e98
  • terminal.ansiWhite#abb5bf
  • terminal.ansiYellow#d9a237
  • terminal.foreground#ced6de
  • textBlockQuote.background#20262e
  • textBlockQuote.border#4e5763
  • textCodeBlock.background#727f8d66
  • textLink.activeForeground#81b6f8
  • textLink.foreground#81b6f8
  • textPreformat.foreground#8c97a2
  • textSeparator.foreground#3f4752
  • titleBar.activeBackground#272d35
  • titleBar.activeForeground#8c97a2
  • titleBar.border#4e5763
  • titleBar.inactiveBackground#20262e
  • titleBar.inactiveForeground#8c97a2
  • tree.indentGuidesStroke#3f4752
  • welcomePage.buttonBackground#3f4752
  • welcomePage.buttonHoverBackground#4e5763

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#8c97a2—
constant.other.placeholder, constant.character#f89e98—
constant, entity.name.constant, variable.other.constant, variable.other.enummember, variable.language, entity#a2d1ff—
entity.name, meta.export.default, meta.definition.variable#f8b77f—
variable.parameter.function, meta.jsx.children, meta.block, meta.tag.attributes, entity.name.constant, meta.object.member, meta.embedded.expression#ced6de—
entity.name.function#fdfbff—
entity.name.tag, support.class.component#b6e8b5—
keyword#f89e98—
storage, storage.type#f89e98—
storage.modifier.package, storage.modifier.import, storage.type.java#ced6de—
string, string punctuation.section.embedded source#d3ebff—
support#a2d1ff—
meta.property-name#a2d1ff—
variable#f8b77f—
variable.other#ced6de—
invalid.broken#ffc9c5italic
invalid.deprecated#ffc9c5italic
invalid.illegal#ffc9c5italic
invalid.unimplemented#ffc9c5italic
carriage-return#f8fafbitalic underline
message.error#ffc9c5—
string variable#a2d1ff—
source.regexp, string.regexp#d3ebff—
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#d3ebff—
string.regexp constant.character.escape#b6e8b5bold
support.constant#a2d1ff—
support.variable#a2d1ff—
support.type.property-name.json#b6e8b5—
meta.module-reference#a2d1ff—
punctuation.definition.list.begin.markdown#f8b77f—
markup.heading, markup.heading entity.name#a2d1ffbold
markup.quote#b6e8b5—
markup.italic#ced6deitalic
markup.bold#ced6debold
markup.underline—underline
markup.strikethrough—strikethrough
markup.inline.raw#a2d1ff—
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#ffc9c5—
punctuation.section.embedded#f89e98—
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#b6e8b5—
markup.changed, punctuation.definition.changed#f8b77f—
markup.ignored, markup.untracked#343b44—
meta.diff.range#fdfbffbold
meta.diff.header#a2d1ff—
meta.separator#a2d1ffbold
meta.output#a2d1ff—
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#8c97a2—
brackethighlighter.unmatched#ffc9c5—
constant.other.reference.link, string.other.link#d3ebff—