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.background#E2E2E4
  • activityBar.border#D0D0D4
  • activityBar.foreground#262626
  • activityBar.inactiveForeground#8A8A8F
  • activityBarBadge.background#0068DA
  • activityBarBadge.foreground#FFFFFF
  • badge.background#0068DA
  • badge.foreground#FFFFFF
  • button.background#0068DA
  • button.foreground#FFFFFF
  • button.hoverBackground#0057B8
  • button.secondaryBackground#DADADE
  • button.secondaryForeground#262626
  • descriptionForeground#6E6E73
  • diffEditor.border#D0D0D4
  • diffEditor.diagonalFill#00000012
  • diffEditor.insertedLineBackground#3E808714
  • diffEditor.insertedTextBackground#3E808728
  • diffEditor.removedLineBackground#D12F1B12
  • diffEditor.removedTextBackground#D12F1B24
  • diffEditor.unchangedCodeBackground#FFFFFF
  • diffEditor.unchangedRegionBackground#ECECEE
  • diffEditorGutter.insertedLineBackground#3E80871F
  • diffEditorGutter.removedLineBackground#D12F1B1F
  • diffEditorOverview.insertedForeground#3E808780
  • diffEditorOverview.removedForeground#D12F1B80
  • dropdown.background#FFFFFF
  • dropdown.border#C4C4C8
  • dropdown.foreground#000000
  • editor.background#FFFFFF
  • editor.findMatchBackground#FFDF5D
  • editor.findMatchHighlightBackground#FFEFA880
  • editor.foreground#000000
  • editor.hoverHighlightBackground#B2D7FF60
  • editor.inactiveSelectionBackground#D5E7FB
  • editor.lineHighlightBackground#ECF5FF
  • editor.lineHighlightBorder#00000000
  • editor.rangeHighlightBackground#ECF5FF
  • editor.selectionBackground#B2D7FF
  • editor.selectionHighlightBackground#B2D7FF80
  • editor.wordHighlightBackground#B2D7FF60
  • editor.wordHighlightStrongBackground#B2D7FF90
  • editorBracketMatch.background#B2D7FF80
  • editorBracketMatch.border#00000000
  • editorCodeLens.foreground#8A99A6
  • editorCursor.foreground#000000
  • editorError.foreground#D12F1B
  • editorGroup.border#D0D0D4
  • editorGroupHeader.noTabsBackground#E8E8EA
  • editorGroupHeader.tabsBackground#E8E8EA
  • editorGroupHeader.tabsBorder#D0D0D4
  • editorGutter.addedBackground#3E8087
  • editorGutter.deletedBackground#D12F1B
  • editorGutter.modifiedBackground#C08A00
  • editorHoverWidget.background#F5F5F7
  • editorHoverWidget.border#D0D0D4
  • editorIndentGuide.activeBackground1#BDBDC2
  • editorIndentGuide.background1#E4E4E8
  • editorInfo.foreground#0F68A0
  • editorLineNumber.activeForeground#262626
  • editorLineNumber.foreground#A0A0A5
  • editorLink.activeForeground#0F68A0
  • editorOverviewRuler.border#00000000
  • editorRuler.foreground#E4E4E8
  • editorSuggestWidget.background#F5F5F7
  • editorSuggestWidget.border#D0D0D4
  • editorSuggestWidget.highlightForeground#0B4F79
  • editorSuggestWidget.selectedBackground#0068DA
  • editorWarning.foreground#C08A00
  • editorWhitespace.foreground#D4D4D8
  • editorWidget.background#F5F5F7
  • editorWidget.border#D0D0D4
  • errorForeground#D12F1B
  • focusBorder#0068DA
  • foreground#262626
  • gitDecoration.addedResourceForeground#23575C
  • gitDecoration.conflictingResourceForeground#78492A
  • gitDecoration.deletedResourceForeground#D12F1B
  • gitDecoration.ignoredResourceForeground#A0A0A5
  • gitDecoration.modifiedResourceForeground#8A6300
  • gitDecoration.untrackedResourceForeground#3E8087
  • icon.foreground#4D4D4D
  • input.background#FFFFFF
  • input.border#C4C4C8
  • input.foreground#000000
  • input.placeholderForeground#8A8A8F
  • inputOption.activeBorder#0068DA
  • list.activeSelectionBackground#0068DA
  • list.activeSelectionForeground#FFFFFF
  • list.errorForeground#D12F1B
  • list.highlightForeground#0B4F79
  • list.hoverBackground#E0E0E4
  • list.inactiveSelectionBackground#DADADE
  • list.inactiveSelectionForeground#262626
  • list.warningForeground#8A6300
  • merge.currentContentBackground#0F68A018
  • merge.currentHeaderBackground#0F68A035
  • merge.incomingContentBackground#3E808718
  • merge.incomingHeaderBackground#3E808735
  • minimap.findMatchHighlight#FFDF5D
  • notificationCenter.border#D0D0D4
  • notifications.background#F5F5F7
  • notifications.border#D0D0D4
  • panel.background#ECECEE
  • panel.border#D0D0D4
  • panelTitle.activeBorder#0068DA
  • panelTitle.activeForeground#262626
  • panelTitle.inactiveForeground#8A8A8F
  • peekView.border#0068DA
  • peekViewEditor.background#F5F5F7
  • peekViewResult.background#ECECEE
  • peekViewTitle.background#F5F5F7
  • progressBar.background#0068DA
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#00000055
  • scrollbarSlider.background#00000025
  • scrollbarSlider.hoverBackground#00000040
  • selection.background#B2D7FF
  • sideBar.background#ECECEE
  • sideBar.border#D0D0D4
  • sideBar.foreground#262626
  • sideBarSectionHeader.background#ECECEE
  • sideBarSectionHeader.border#D0D0D4
  • sideBarSectionHeader.foreground#4D4D4D
  • sideBarTitle.foreground#262626
  • statusBar.background#E8E8EA
  • statusBar.border#D0D0D4
  • statusBar.debuggingBackground#0068DA
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#4D4D4D
  • statusBar.noFolderBackground#E8E8EA
  • statusBarItem.hoverBackground#00000012
  • statusBarItem.remoteBackground#0068DA
  • tab.activeBackground#FFFFFF
  • tab.activeBorderTop#0068DA
  • tab.activeForeground#000000
  • tab.border#D0D0D4
  • tab.hoverBackground#F0F0F2
  • tab.inactiveBackground#E8E8EA
  • tab.inactiveForeground#6E6E73
  • tab.unfocusedActiveForeground#6E6E73
  • terminal.ansiBlack#E5E5E5
  • terminal.ansiBlue#0F68A0
  • terminal.ansiBrightBlack#8A99A6
  • terminal.ansiBrightBlue#0B4F79
  • terminal.ansiBrightCyan#4B21B0
  • terminal.ansiBrightGreen#23575C
  • terminal.ansiBrightMagenta#AD3DA4
  • terminal.ansiBrightRed#D12F1B
  • terminal.ansiBrightWhite#000000
  • terminal.ansiBrightYellow#78492A
  • terminal.ansiCyan#804FB8
  • terminal.ansiGreen#3E8087
  • terminal.ansiMagenta#AD3DA4
  • terminal.ansiRed#D12F1B
  • terminal.ansiWhite#262626
  • terminal.ansiYellow#78492A
  • terminal.background#FFFFFF
  • terminal.foreground#262626
  • terminalCursor.foreground#000000
  • textLink.activeForeground#0B4F79
  • textLink.foreground#0F68A0
  • titleBar.activeBackground#E8E8EA
  • titleBar.activeForeground#262626
  • titleBar.border#D0D0D4
  • titleBar.inactiveBackground#F0F0F2
  • titleBar.inactiveForeground#8A8A8F
  • tree.indentGuidesStroke#C4C4C8
  • widget.shadow#00000020

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source, punctuation, keyword.operator, meta.brace, variable.parameter, variable.other.readwrite, variable.other.constant, meta.definition.variable variable#000000
comment, punctuation.definition.comment, comment.block.documentation, string.quoted.docinfo#5D6C79
comment.block.documentation keyword, comment.block.documentation storage.type, keyword.other.documentation#5D6C79bold
comment.line.double-slash.documentation.mark#000000bold
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical.python, storage, storage.type, storage.modifier, constant.language, variable.language, support.type.builtin, entity.name.tag, meta.tag entity.name.tag, keyword.declaration#AD3DA4
string, punctuation.definition.string, string.quoted, string.template, markup.inserted, meta.embedded.line string#D12F1B
string.regexp, constant.other.character-class.regexp#D12F1B
constant.numeric, constant.character, constant.other.rgb-value, keyword.other.unit, constant.character.escape#272AD8
meta.preprocessor, keyword.control.directive, entity.name.function.preprocessor, keyword.control.at-rule, punctuation.definition.directive#78492A
entity.name.function.macro, support.other.macro, meta.decorator, meta.decorator entity.name.function, punctuation.decorator#78492A
entity.other.attribute-name, meta.tag entity.other.attribute-name, storage.modifier.attribute, meta.attribute#815F03
entity.name.type, entity.name.class, entity.name.struct, entity.name.enum, entity.name.interface, entity.name.type.class, entity.name.type.struct, entity.name.type.enum, entity.name.type.interface#23575C
entity.name.namespace, entity.name.type.namespace, entity.name.scope-resolution#703DAA
entity.name.function, meta.function entity.name.function#23575C
meta.definition.type entity.name, meta.definition.class entity.name, meta.class-declaration entity.name.type, meta.struct-declaration entity.name.type, meta.interface-declaration entity.name.type, meta.enum-declaration entity.name.type, meta.record-declaration entity.name.type#0B4F79
meta.definition.function entity.name.function, meta.function.definition entity.name.function, meta.method-declaration entity.name.function, meta.constructor-declaration entity.name.function#0F68A0
meta.function-call entity.name.function, meta.method-call entity.name.function, variable.function, entity.name.function.call#23575C
variable.other.property, variable.other.object.property, variable.other.member, meta.object-literal.key, support.type.property-name, entity.name.tag.yaml#3E8087
support.class, support.type, entity.name.type.module, entity.other.inherited-class, support.type.primitive, meta.type support.class#703DAA
support.function, support.variable, support.constant, variable.language.this, variable.language.super#4B21B0
markup.underline.link, string.other.link, constant.other.reference.link#0F68A0
support.type.property-name.css, support.type.vendored.property-name.css#3E8087
support.constant.property-value.css, meta.property-value.css support.constant#272AD8
markup.heading, entity.name.section#D12F1Bbold
markup.italicitalic
markup.boldbold
markup.inline.raw, markup.fenced_code.block#23575C
invalid, invalid.illegal#D12F1B
invalid.deprecated#8A6300strikethrough