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.underlineunderline
markup.strikethroughstrikethrough
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