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#4E98E4
  • activityBar.background#21252B
  • activityBar.border#0D1117
  • activityBar.foreground#C6CCD7
  • activityBar.inactiveForeground#6E7582
  • activityBarBadge.background#4E98E4
  • activityBarBadge.foreground#ffffff
  • badge.background#3188F55C
  • breadcrumb.focusForeground#C6CCD7
  • breadcrumb.foreground#777F8D
  • button.background#4E98E4
  • button.foreground#ffffff
  • button.hoverBackground#1b76d4
  • button.secondaryBackground#0D1117
  • button.secondaryForeground#ffffff
  • checkbox.background#61AFEF
  • checkbox.foreground#ffffff
  • contrastBorder#0D1117
  • debugToolBar.background#191D22
  • diffEditor.border#0D1117
  • diffEditor.diagonalFill#0D1117
  • diffEditor.insertedLineBackground#CBF6AC0D
  • diffEditor.insertedTextBackground#CBF6AC1A
  • diffEditor.removedLineBackground#FF9FA80D
  • diffEditor.removedTextBackground#FF9FA81A
  • dropdown.background#2b2f34
  • dropdown.border#fff
  • editor.background#1D2025
  • editor.findMatchBackground#00000000
  • editor.findMatchBorder#4E98E4
  • editor.findMatchHighlightBackground#00000000
  • editor.findMatchHighlightBorder#C6CCD7
  • editor.foreground#D3D9E3
  • editor.lineHighlightBackground#A9B2C31A
  • editor.lineHighlightBorder#00000000
  • editor.linkedEditingBackground#0D1117
  • editor.rangeHighlightBorder#C6CCD7
  • editor.selectionBackground#3188F54D
  • editor.selectionHighlightBackground#A9B2C31A
  • editor.selectionHighlightBorder#C6CCD7
  • editor.wordHighlightBackground#00000000
  • editor.wordHighlightBorder#4E98E4
  • editor.wordHighlightStrongBackground#00000000
  • editor.wordHighlightStrongBorder#4E98E4
  • editorBracketHighlight.foreground1#A9B2C3
  • editorBracketHighlight.foreground2#61AFEF
  • editorBracketHighlight.foreground3#E5C07B
  • editorBracketHighlight.foreground4#60D1DE
  • editorBracketHighlight.foreground5#87C379
  • editorBracketHighlight.foreground6#B978E8
  • editorBracketHighlight.unexpectedBracket.foreground#D74E42
  • editorBracketMatch.background#00000000
  • editorBracketMatch.border#4E98E4
  • editorCursor.foreground#A9B2C3
  • editorError.foreground#D74E42
  • editorGroup.border#0D1117
  • editorGroup.emptyBackground#1d2025
  • editorGroupHeader.tabsBackground#21252B
  • editorGutter.addedBackground#87C379
  • editorGutter.deletedBackground#E06C75
  • editorGutter.modifiedBackground#61afef
  • editorHoverWidget.background#1d2025
  • editorHoverWidget.border#4E98E4
  • editorIndentGuide.activeBackground1#A9B2C31A
  • editorIndentGuide.background1#0D1117
  • editorInfo.foreground#4E98E4
  • editorInlayHint.background#00000000
  • editorInlayHint.foreground#6E7582
  • editorLightBulb.foreground#E9D16C
  • editorLightBulbAutoFix.foreground#4E98E4
  • editorLineNumber.activeForeground#C6CCD7
  • editorLineNumber.foreground#6E7582
  • editorOverviewRuler.addedForeground#87C379
  • editorOverviewRuler.border#0D1117
  • editorOverviewRuler.deletedForeground#E06C75
  • editorOverviewRuler.errorForeground#D74E42
  • editorOverviewRuler.findMatchForeground#4E98E4
  • editorOverviewRuler.infoForeground#4E98E4
  • editorOverviewRuler.modifiedForeground#e06c75
  • editorOverviewRuler.warningForeground#E9D16C
  • editorRuler.foreground#0D1117
  • editorStickyScroll.background#1d2025
  • editorStickyScrollHover.background#21252B
  • editorSuggestWidget.background#1d2025
  • editorSuggestWidget.border#4E98E4
  • editorSuggestWidget.selectedBackground#A9B2C31A
  • editorWarning.foreground#E9D16C
  • editorWhitespace.foreground#A9B2C31A
  • editorWidget.background#1d2025
  • errorForeground#D74E42
  • focusBorder#627494
  • gitDecoration.deletedResourceForeground#61afef
  • gitDecoration.ignoredResourceForeground#6E7582
  • gitDecoration.modifiedResourceForeground#61afef
  • gitDecoration.untrackedResourceForeground#87C379
  • input.background#131619
  • inputOption.activeBorder#4E98E4
  • inputValidation.errorBackground#D74E42
  • inputValidation.errorBorder#D74E42
  • inputValidation.infoBackground#4E98E4
  • inputValidation.infoBorder#4E98E4
  • inputValidation.infoForeground#0D1117
  • inputValidation.warningBackground#E9D16C
  • inputValidation.warningBorder#E9D16C
  • inputValidation.warningForeground#0D1117
  • list.activeSelectionBackground#A9B2C31A
  • list.activeSelectionForeground#ffffff
  • list.errorForeground#D74E42
  • list.focusBackground#A9B2C31A
  • list.hoverBackground#A9B2C31A
  • list.inactiveSelectionBackground#A9B2C31A
  • list.inactiveSelectionForeground#C6CCD7
  • list.warningForeground#E9D16C
  • minimap.findMatchHighlight#4E98E4
  • minimap.selectionHighlight#C6CCD7
  • minimapGutter.addedBackground#87C379
  • minimapGutter.deletedBackground#E06C75
  • minimapGutter.modifiedBackground#61afef
  • notificationCenter.border#0D1117
  • notificationCenterHeader.background#1d2025
  • notifications.background#1d2025
  • notifications.border#0D1117
  • notificationToast.border#0D1117
  • panel.background#191C20
  • panel.border#0D1117
  • panelTitle.inactiveForeground#6E7582
  • peekView.border#4E98E4
  • peekViewEditor.background#1d2025
  • peekViewEditor.matchHighlightBackground#A9B2C31A
  • peekViewResult.background#1d2025
  • peekViewResult.matchHighlightBackground#A9B2C31A
  • peekViewResult.selectionBackground#A9B2C31A
  • peekViewResult.selectionForeground#C6CCD7
  • peekViewTitle.background#1d2025
  • sash.hoverBorder#A9B2C31A
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#A9B2C31A
  • scrollbarSlider.background#A9B2C31A
  • scrollbarSlider.hoverBackground#A9B2C31A
  • sideBar.background#21252B
  • sideBar.border#0D1117
  • sideBar.foreground#C6CCD7
  • sideBarSectionHeader.background#A9B2C30D
  • statusBar.background#21252B
  • statusBar.border#0D1117
  • statusBar.debuggingBackground#191D22
  • statusBar.debuggingBorder#60D1DE
  • statusBar.debuggingForeground#A9B2C3
  • statusBar.focusBorder#A9B2C3
  • statusBar.foreground#A9B2C3
  • statusBar.noFolderBackground#1d2025
  • statusBarItem.activeBackground#0D1117
  • statusBarItem.errorBackground#21252B
  • statusBarItem.errorForeground#D74E42
  • statusBarItem.focusBorder#A9B2C3
  • statusBarItem.hoverBackground#1d2025
  • statusBarItem.hoverForeground#A9B2C3
  • statusBarItem.remoteBackground#21252B
  • statusBarItem.remoteForeground#B978E8
  • statusBarItem.warningBackground#21252B
  • statusBarItem.warningForeground#E9D16C
  • tab.activeBackground#1d2025
  • tab.activeBorderTop#4E98E4
  • tab.activeForeground#C6CCD7
  • tab.border#0D1117
  • tab.inactiveBackground#21252B
  • tab.inactiveForeground#6E7582
  • tab.lastPinnedBorder#A9B2C31A
  • terminal.ansiBlack#6E7582
  • terminal.ansiBlue#61AFEF
  • terminal.ansiBrightBlack#6E7582
  • terminal.ansiBrightBlue#61AFEF
  • terminal.ansiBrightCyan#60D1DE
  • terminal.ansiBrightGreen#87C379
  • terminal.ansiBrightMagenta#B978E8
  • terminal.ansiBrightRed#E06C75
  • terminal.ansiBrightWhite#A9B2C3
  • terminal.ansiBrightYellow#E5C07B
  • terminal.ansiCyan#60D1DE
  • terminal.ansiGreen#87C379
  • terminal.ansiMagenta#B978E8
  • terminal.ansiRed#E06C75
  • terminal.ansiWhite#A9B2C3
  • terminal.ansiYellow#E5C07B
  • terminal.foreground#A9B2C3
  • titleBar.activeBackground#21252B
  • titleBar.activeForeground#818896
  • titleBar.border#0D1117
  • titleBar.inactiveBackground#21252B
  • titleBar.inactiveForeground#818896
  • toolbar.hoverBackground#A9B2C31A
  • widget.shadow#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, source.diff#647884—
entity.name.function, support.function, meta.definition.function, meta.diff.range, punctuation.definition.range.diff#B978E8—
keyword.control.conditional.js, keyword.control.loop.js, punctuation.definition.keyword, variable.language, markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted, punctuation.definition.from-file.diff#E06C75—
constant, support.constant#60D1DE—
variable.other.readwrite.alias.js#E5C07B—
storage, entity.name.namespace, meta.diff.header, entity.name.tag.html, entity.name.tag.js, keyword.operator.expression.in.js#61AFEF—
markup.inline.raw.string, string, markup.inserted, punctuation.definition.inserted, meta.diff.header.to-file, punctuation.definition.to-file.diff#87C379—
punctuation.definition.entity, meta.function-call.js, meta.selector.css#E5C07B—
variable.other.constant.js, variable.other.object.js, meta.var-single-variable.expr.js, entity.other.attribute-name.js, variable.language.this.js, keyword.operator.arithmetic.js, keyword.operator.assignment.js, keyword.operator.comparison.js, keyword.operator.assignment.compound.js, meta.property-name.css, entity.other.attribute-name.html, string.quoted.double.json#BDD8FF—
variable.parameter.js, meta.object-literal.key.js, meta.object.member.js, variable.other.property.js, support.constant.property-value.css, meta.property-value.css, meta.property-list.css#D3D9E3—
keyword.other.important.css#e06c75—
keyword.control.flow.js#FE9EA5—
meta.brace, punctuation#7D91A4—
keyword#61AFEF—
markup.bold, punctuation.definition.bold, entity.other.attribute-name.id—bold
comment, markup.italic, punctuation.definition.italic—italic