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#6E6F78
  • activityBar.background#FFFFFF
  • activityBar.foreground#6E6F78
  • activityBarBadge.background#6E6F78
  • activityBarBadge.foreground#FFFFFF
  • breadcrumb.foreground#A0A1A7
  • button.background#ECECEC
  • button.foreground#383A42
  • button.hoverBackground#DCDCDC
  • button.secondaryBackground#D3D3D3
  • button.secondaryForeground#383A42
  • button.secondaryHoverBackground#C0C0C0
  • commandCenter.activeForeground#383A42
  • commandCenter.foreground#A0A1A7
  • debugConsole.errorForeground#F08A9C
  • debugConsole.infoForeground#383A42
  • debugConsole.sourceForeground#A0A1A7
  • debugConsole.warningForeground#E8B547
  • debugConsoleInputIcon.foreground#A0A1A7
  • debugIcon.breakpointCurrentStackframeForeground#E8B547
  • debugIcon.breakpointDisabledForeground#C0C0C0
  • debugIcon.breakpointForeground#F08A9C
  • debugIcon.breakpointStackframeForeground#E8B547
  • debugIcon.breakpointUnverifiedForeground#A0A1A7
  • debugIcon.disconnectForeground#A0A1A7
  • debugIcon.pauseForeground#A0A1A7
  • debugIcon.restartForeground#383A42
  • debugIcon.startForeground#383A42
  • debugIcon.stepBackForeground#A0A1A7
  • debugIcon.stopForeground#F08A9C
  • debugTokenExpression.boolean#6E548C
  • debugTokenExpression.name#383A42
  • debugTokenExpression.number#3A6E96
  • debugTokenExpression.string#3A6E96
  • debugToolBar.background#F3F3F3
  • debugToolBar.border#D3D3D3
  • debugView.exceptionLabelBackground#F2DEDE
  • debugView.exceptionLabelForeground#383A42
  • debugView.stateLabelBackground#F3F3F3
  • debugView.stateLabelForeground#383A42
  • debugView.valueChangedHighlight#3A6E96
  • diffEditor.insertedLineBackground#7DD09520
  • diffEditor.insertedTextBackground#7DD09520
  • diffEditor.removedLineBackground#F08A9C20
  • diffEditor.removedTextBackground#F08A9C20
  • diffEditorOverview.insertedForeground#7DD095
  • diffEditorOverview.removedForeground#F08A9C
  • dropdown.background#FFFFFF
  • dropdown.border#D3D3D3
  • dropdown.foreground#383A42
  • editor.background#FFFFFF
  • editor.findMatchBackground#ADD6FF50
  • editor.findMatchBorder#383A4260
  • editor.findMatchHighlightBackground#ADD6FF30
  • editor.focusedStackFrameHighlightBackground#ADD6FF50
  • editor.foreground#383A42
  • editor.inactiveSelectionBackground#ADD6FF40
  • editor.lineHighlightBackground#F3F3F3
  • editor.selectionBackground#ADD6FF80
  • editor.stackFrameHighlightBackground#ADD6FF30
  • editor.wordHighlightBackground#ADD6FF30
  • editor.wordHighlightStrongBackground#ADD6FF50
  • editorBracketHighlight.foreground1#54555D
  • editorBracketHighlight.foreground2#6E6F78
  • editorBracketHighlight.foreground3#7A7B82
  • editorBracketHighlight.foreground4#878890
  • editorBracketHighlight.foreground5#94959C
  • editorBracketHighlight.foreground6#A1A2A8
  • editorBracketHighlight.unexpectedBracket.foreground#6E548C
  • editorBracketPairGuide.activeBackground1#54555D20
  • editorBracketPairGuide.activeBackground2#6E6F7820
  • editorBracketPairGuide.activeBackground3#7A7B8220
  • editorBracketPairGuide.activeBackground4#87889020
  • editorBracketPairGuide.activeBackground5#94959C20
  • editorBracketPairGuide.activeBackground6#A1A2A820
  • editorBracketPairGuide.background1#54555D10
  • editorBracketPairGuide.background2#6E6F7810
  • editorBracketPairGuide.background3#7A7B8210
  • editorBracketPairGuide.background4#87889010
  • editorBracketPairGuide.background5#94959C10
  • editorBracketPairGuide.background6#A1A2A810
  • editorCursor.foreground#A0A1A7
  • editorError.foreground#F08A9C
  • editorGhostText.foreground#A0A1A7
  • editorGroup.border#D3D3D3
  • editorGroupHeader.tabsBackground#FFFFFF
  • editorGutter.addedBackground#7DD095
  • editorGutter.deletedBackground#F08A9C
  • editorGutter.modifiedBackground#E8B547
  • editorHint.border#A0A1A740
  • editorHint.foreground#A0A1A7
  • editorIndentGuide.activeBackground1#A0A1A780
  • editorIndentGuide.background1#D3D3D380
  • editorInfo.foreground#3A6E96
  • editorInlayHint.background#A0A1A715
  • editorInlayHint.foreground#A0A1A7
  • editorInlayHint.parameterForeground#A0A1A7
  • editorInlayHint.typeForeground#A0A1A7
  • editorLineNumber.activeForeground#383A42
  • editorLineNumber.foreground#A0A1A7
  • editorLink.activeForeground#A0A1A7
  • editorOverviewRuler.addedForeground#7DD095
  • editorOverviewRuler.deletedForeground#F08A9C
  • editorOverviewRuler.errorForeground#F08A9C
  • editorOverviewRuler.infoForeground#3A6E96
  • editorOverviewRuler.modifiedForeground#E8B547
  • editorOverviewRuler.warningForeground#E8B547
  • editorSuggestWidget.background#F3F3F3
  • editorSuggestWidget.foreground#383A42
  • editorSuggestWidget.highlightForeground#383A42
  • editorSuggestWidget.selectedBackground#ADD6FF50
  • editorWarning.foreground#E8B547
  • editorWhitespace.foreground#D3D3D3
  • editorWidget.background#F3F3F3
  • editorWidget.border#D3D3D3
  • editorWidget.foreground#383A42
  • focusBorder#6E6F7880
  • gitDecoration.addedResourceForeground#7DD095
  • gitDecoration.conflictingResourceForeground#E8B547
  • gitDecoration.deletedResourceForeground#F08A9C
  • gitDecoration.ignoredResourceForeground#C0C0C0
  • gitDecoration.modifiedResourceForeground#E8B547
  • gitDecoration.stageDeletedResourceForeground#F08A9C
  • gitDecoration.stageModifiedResourceForeground#E8B547
  • gitDecoration.untrackedResourceForeground#7DD095
  • input.background#FFFFFF
  • input.border#D3D3D3
  • input.foreground#383A42
  • input.placeholderForeground#A0A1A7
  • inputOption.activeBorder#383A42
  • inputValidation.errorBackground#F2DEDE
  • inputValidation.errorBorder#D1242F
  • list.activeSelectionBackground#ADD6FF50
  • list.activeSelectionForeground#3A6E96
  • list.errorForeground#F08A9C
  • list.highlightForeground#3A6E96
  • list.hoverBackground#F3F3F3
  • list.inactiveSelectionBackground#ADD6FF30
  • list.warningForeground#E8B547
  • menu.background#FFFFFF
  • menu.foreground#383A42
  • menu.selectionBackground#ADD6FF50
  • menu.selectionForeground#383A42
  • menu.separatorBackground#D3D3D3
  • merge.commonContentBackground#E8B54720
  • merge.commonHeaderBackground#E8B54740
  • merge.currentContentBackground#7DD09520
  • merge.currentHeaderBackground#7DD09540
  • merge.incomingContentBackground#3A6E9620
  • merge.incomingHeaderBackground#3A6E9640
  • minimap.background#FFFFFF
  • minimap.errorHighlight#F08A9C
  • minimap.infoHighlight#3A6E96
  • minimap.warningHighlight#E8B547
  • minimapGutter.addedBackground#7DD095
  • minimapGutter.deletedBackground#F08A9C
  • minimapGutter.modifiedBackground#E8B547
  • minimapSlider.background#D3D3D350
  • minimapSlider.hoverBackground#D3D3D370
  • notificationCenter.border#D3D3D3
  • notificationLink.foreground#A0A1A7
  • notifications.background#F3F3F3
  • notifications.foreground#383A42
  • notificationsErrorIcon.foreground#F08A9C
  • notificationsInfoIcon.foreground#3A6E96
  • notificationsWarningIcon.foreground#E8B547
  • notificationToast.border#D3D3D3
  • panel.background#FFFFFF
  • panel.border#D3D3D3
  • panelTitle.activeForeground#383A42
  • panelTitle.inactiveForeground#A0A1A7
  • peekViewEditor.background#FFFFFF
  • peekViewResult.background#F3F3F3
  • peekViewTitleLabel.foreground#383A42
  • problemsErrorIcon.foreground#F08A9C
  • problemsInfoIcon.foreground#3A6E96
  • problemsWarningIcon.foreground#E8B547
  • progressBar.background#6E6F78
  • scrollbarSlider.activeBackground#D3D3D3A0
  • scrollbarSlider.background#D3D3D350
  • scrollbarSlider.hoverBackground#D3D3D380
  • sideBar.background#FFFFFF
  • sideBar.foreground#383A42
  • sideBarSectionHeader.background#FFFFFF
  • sideBarSectionHeader.foreground#383A42
  • sideBarTitle.foreground#A0A1A7
  • statusBar.background#FFFFFF
  • statusBar.debuggingBackground#E8E8E8
  • statusBar.debuggingForeground#383A42
  • statusBar.foreground#6E6F78
  • statusBar.noFolderForeground#C0C0C0
  • statusBarItem.errorBackground#F08A9C
  • statusBarItem.errorForeground#FFFFFF
  • statusBarItem.warningBackground#E8B547
  • statusBarItem.warningForeground#FFFFFF
  • tab.activeBackground#FFFFFF
  • tab.activeBorderTop#00000000
  • tab.activeForeground#383A42
  • tab.border#FFFFFF
  • tab.inactiveBackground#FFFFFF
  • tab.inactiveForeground#A0A1A7
  • tab.unfocusedActiveBorderTop#00000000
  • terminal.ansiBlack#383A42
  • terminal.ansiBlue#3A6E96
  • terminal.ansiBrightBlack#A0A1A7
  • terminal.ansiBrightBlue#3A6E96
  • terminal.ansiBrightCyan#3A6E96
  • terminal.ansiBrightGreen#7DD095
  • terminal.ansiBrightMagenta#6E548C
  • terminal.ansiBrightRed#F08A9C
  • terminal.ansiBrightWhite#383A42
  • terminal.ansiBrightYellow#E8B547
  • terminal.ansiCyan#3A6E96
  • terminal.ansiGreen#7DD095
  • terminal.ansiMagenta#6E548C
  • terminal.ansiRed#F08A9C
  • terminal.ansiWhite#383A42
  • terminal.ansiYellow#E8B547
  • terminal.background#FFFFFF
  • terminal.foreground#383A42
  • testing.iconErrored#F08A9C
  • testing.iconFailed#F08A9C
  • testing.iconPassed#7DD095
  • testing.iconQueued#E8B547
  • testing.iconSkipped#A0A1A7
  • textLink.activeForeground#A0A1A7
  • textLink.foreground#A0A1A7
  • titleBar.activeBackground#FFFFFF
  • titleBar.activeForeground#6E6F78
  • titleBar.inactiveBackground#FFFFFF
  • titleBar.inactiveForeground#C0C0C0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#A0A1A7italic
keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.trycatch, keyword.control.import#6E548C—
keyword, keyword.operator.new, storage.type, storage.modifier#383A42—
string, constant.other.symbol, constant.other.key, string.regexp#3A6E96—
constant.numeric, constant.language, constant.character, constant.escape, keyword.other.unit#3A6E96—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method, entity.name.method#383A42—
entity.name.type, entity.name.class, entity.other.inherited-class, support.type, support.class, support.type.sys-types#3A6E96—
variable, variable.other, variable.parameter#383A42—
variable.language#3A6E96italic
entity.name.tag, meta.tag, punctuation.definition.tag#383A42—
entity.other.attribute-name#383A42—
meta.decorator, punctuation.decorator, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#6E548C—
punctuation.accessor, punctuation.separator, punctuation.terminator#6E6F78—
invalid, invalid.illegal#6E548C—
*url*, *link*, *uri*#383A42underline
source.json support.type.property-name, source.json meta.structure.dictionary.json support.type.property-name.json, source.json meta.object-literal.key#3A6E96—
source.json meta.structure.dictionary.value.json string.quoted, source.json meta.structure.dictionary.value.json string.quoted punctuation.definition.string, source.json meta.structure.array.json string.quoted, source.json meta.structure.array.json string.quoted punctuation.definition.string#383A42—
markup.heading, markup.heading entity.name, punctuation.definition.heading.markdown#6E548C—
markup.bold#383A42bold
markup.italic#383A42italic
markup.raw.inline, markup.raw.block#3A6E96—
markup.quote#A0A1A7italic
string.other.link.title.markdown#6E548C—
markup.inserted#383A42—
markup.deleted#383A42—
markup.changed#383A42—