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#333D3D
  • activityBar.background#202729
  • activityBar.foreground#D4D4D4
  • activityBar.inactiveForeground#808080
  • activityBarBadge.background#D0C099
  • activityBarBadge.foreground#333D3D
  • badge.background#333D3D
  • badge.foreground#D4D4D4
  • breadcrumb.activeSelectionForeground#8DA8D2
  • breadcrumb.background#202729
  • breadcrumb.focusForeground#8DA8D2
  • breadcrumb.foreground#D4D4D4
  • button.background#D1C099
  • button.foreground#242B2E
  • button.hoverBackground#D1C099
  • checkbox.background#202729
  • checkbox.border#30373A
  • descriptionForeground#808080
  • diffEditor.diagonalFill#FFFFFF12
  • diffEditor.insertedLineBackground#2F5E3A1A
  • diffEditor.insertedTextBackground#2F5E3A59
  • diffEditor.insertedTextBorder#2F5E3A70
  • diffEditor.removedLineBackground#5E26291A
  • diffEditor.removedTextBackground#5E262959
  • diffEditor.removedTextBorder#5E262970
  • dropdown.background#202729
  • dropdown.border#333D3D
  • dropdown.foreground#D4D4D4
  • editor.background#202729
  • editor.findMatchBackground#FFFFFF3D
  • editor.findMatchBorder#FFFFFF00
  • editor.findMatchHighlightBackground#FFFFFF1F
  • editor.findRangeHighlightBackground#30373A
  • editor.foldBackground#00000000
  • editor.foreground#D4D4D4
  • editor.inactiveSelectionBackground#FFFFFF1F
  • editor.lineHighlightBackground#FFFFFF0F
  • editor.linkedEditingBackground#A7A59640
  • editor.rangeHighlightBackground#30373A
  • editor.rangeHighlightBorder#FFFFFF00
  • editor.selectionBackground#FFFFFF3D
  • editor.selectionForeground#D4D4D4
  • editor.selectionHighlightBackground#FFFFFF1F
  • editor.wordHighlightBackground#FFFFFF00
  • editor.wordHighlightStrongBackground#FFFFFF00
  • editorBracketHighlight.foreground1#D4D4D4
  • editorBracketHighlight.foreground2#D4D4D4
  • editorBracketHighlight.foreground3#D4D4D4
  • editorBracketHighlight.foreground4#D4D4D4
  • editorBracketHighlight.foreground5#D4D4D4
  • editorBracketHighlight.foreground6#D4D4D4
  • editorBracketHighlight.unexpectedBracket.foreground#E15A60
  • editorBracketMatch.background#FFFFFF00
  • editorBracketMatch.border#FFFFFF4D
  • editorBracketPairGuide.activeBackground1#808080
  • editorBracketPairGuide.activeBackground2#808080
  • editorBracketPairGuide.activeBackground3#808080
  • editorBracketPairGuide.activeBackground4#808080
  • editorBracketPairGuide.activeBackground5#808080
  • editorBracketPairGuide.activeBackground6#808080
  • editorBracketPairGuide.background1#FFFFFF1F
  • editorBracketPairGuide.background2#FFFFFF1F
  • editorBracketPairGuide.background3#FFFFFF1F
  • editorBracketPairGuide.background4#FFFFFF1F
  • editorBracketPairGuide.background5#FFFFFF1F
  • editorBracketPairGuide.background6#FFFFFF1F
  • editorCodeLens.foreground#808080
  • editorCursor.foreground#A94448
  • editorError.foreground#E15A60
  • editorGhostText.foreground#A7A7A14D
  • editorGroup.border#30373A
  • editorGroupHeader.tabsBackground#202729
  • editorGroupHeader.tabsBorder#30373A
  • editorGutter.addedBackground#99C794
  • editorGutter.commentRangeForeground#7F7F7F
  • editorGutter.deletedBackground#E15A60
  • editorGutter.modifiedBackground#8DA8D2
  • editorHint.foreground#808080
  • editorHoverWidget.background#202729
  • editorHoverWidget.border#30373A
  • editorIndentGuide.activeBackground1#808080
  • editorIndentGuide.activeBackground2#808080
  • editorIndentGuide.activeBackground3#808080
  • editorIndentGuide.activeBackground4#808080
  • editorIndentGuide.activeBackground5#808080
  • editorIndentGuide.activeBackground6#808080
  • editorIndentGuide.background1#FFFFFF1F
  • editorIndentGuide.background2#FFFFFF1F
  • editorIndentGuide.background3#FFFFFF1F
  • editorIndentGuide.background4#FFFFFF1F
  • editorIndentGuide.background5#FFFFFF1F
  • editorIndentGuide.background6#FFFFFF1F
  • editorInfo.foreground#8DA8D2
  • editorInlayHint.background#333D3D
  • editorInlayHint.foreground#808080
  • editorInlayHint.parameterBackground#333D3D
  • editorInlayHint.parameterForeground#808080
  • editorInlayHint.typeBackground#333D3D
  • editorInlayHint.typeForeground#808080
  • editorLineHighlightBorder#2F3130
  • editorLineNumber.activeForeground#808080
  • editorLineNumber.foreground#545454
  • editorOverviewRuler.errorForeground#E15A60
  • editorOverviewRuler.infoForeground#8DA8D2
  • editorOverviewRuler.warningForeground#F99157
  • editorRuler.foreground#FFFFFF1F
  • editorStickyScroll.background#202729
  • editorStickyScroll.border#30373A
  • editorStickyScrollHover.background#202729
  • editorSuggestWidget.background#202729
  • editorSuggestWidget.border#30373A
  • editorSuggestWidget.foreground#D4D4D4
  • editorSuggestWidget.highlightForeground#8DA8D2
  • editorSuggestWidget.selectedBackground#30373A
  • editorSuggestWidget.selectedForeground#D4D4D4
  • editorWarning.foreground#F99157
  • editorWhitespace.foreground#545454
  • editorWidget.background#202729
  • editorWidget.border#30373A
  • errorForeground#E15A60
  • focusBorder#333D3D
  • foreground#D4D4D4
  • gitDecoration.addedResourceForeground#D1C099
  • gitDecoration.conflictingResourceForeground#E15A60
  • gitDecoration.deletedResourceForeground#E15A60
  • gitDecoration.ignoredResourceForeground#4e5759
  • gitDecoration.modifiedResourceForeground#D1C099
  • gitDecoration.untrackedResourceForeground#D1C099
  • input.background#202729
  • input.border#333D3D
  • input.foreground#D4D4D4
  • input.placeholderForeground#808080
  • inputOption.activeBorder#808080
  • list.activeSelectionBackground#333D3D
  • list.activeSelectionForeground#D4D4D4
  • list.errorForeground#E15A60
  • list.focusBackground#333D3D
  • list.focusForeground#D4D4D4
  • list.focusOutline#333D3D
  • list.highlightForeground#D4D4D4
  • list.hoverBackground#333D3D
  • list.hoverForeground#D4D4D4
  • list.inactiveSelectionBackground#333D3D
  • list.inactiveSelectionForeground#AAAAAA
  • list.warningForeground#F99157
  • menu.background#202729
  • menu.foreground#D4D4D4
  • menu.selectionBackground#333D3D
  • menu.selectionForeground#D4D4D4
  • menu.separatorBackground#333D3D
  • merge.commonHeaderBackground#202729
  • merge.currentHeaderBackground#202729
  • merge.incomingHeaderBackground#202729
  • minimap.errorHighlight#E15A60
  • minimap.findMatchHighlight#FFFFFF3D
  • minimap.selectionHighlight#FFFFFF3D
  • minimap.warningHighlight#F99157
  • minimapGutter.addedBackground#99C794
  • minimapGutter.deletedBackground#E15A60
  • minimapGutter.modifiedBackground#8DA8D2
  • notificationCenter.border#30373A
  • notificationCenterHeader.background#202729
  • notificationLink.foreground#8DA8D2
  • notifications.background#202729
  • notifications.border#30373A
  • notifications.foreground#D4D4D4
  • panel.background#202729
  • panel.border#30373A
  • panelTitle.activeForeground#D4D4D4
  • panelTitle.inactiveForeground#808080
  • peekView.border#30373A
  • peekViewEditor.background#202729
  • peekViewEditor.matchHighlightBackground#FFFFFF1F
  • peekViewEditorGutter.background#202729
  • peekViewResult.background#202729
  • peekViewResult.matchHighlightBackground#FFFFFF1F
  • peekViewTitle.background#202729
  • progressBar.background#D1C099
  • quickInput.background#202729
  • quickInput.foreground#D4D4D4
  • quickInputList.focusBackground#333D3D
  • quickInputList.focusForeground#D4D4D4
  • scrollbarSlider.activeBackground#333D3D
  • scrollbarSlider.background#FFFFFF0F
  • scrollbarSlider.hoverBackground#FFFFFF1F
  • selection.background#333D3D
  • sideBar.background#202729
  • sideBar.border#333D3D
  • sideBar.foreground#AAAAAA
  • sideBarSectionHeader.background#202729
  • sideBarSectionHeader.foreground#D4D4D4
  • sideBarTitle.foreground#D4D4D4
  • statusBar.background#202729
  • statusBar.border#30373A
  • statusBar.debuggingBackground#202729
  • statusBar.foreground#808080
  • statusBar.noFolderBackground#202729
  • tab.activeBackground#242B2E
  • tab.activeBorder#30373A
  • tab.activeBorderTop#30373A
  • tab.activeForeground#D4D4D4
  • tab.activeModifiedBorder#8DA8D2
  • tab.border#30373A
  • tab.hoverBackground#242B2E
  • tab.inactiveBackground#202729
  • tab.inactiveForeground#AAAAAA
  • tab.inactiveModifiedBorder#5986B3
  • tab.unfocusedActiveBorder#30373A
  • tab.unfocusedActiveModifiedBorder#8DA8D2
  • tab.unfocusedInactiveModifiedBorder#5986B3
  • terminal.ansiBlack#808080
  • terminal.ansiBlue#8DA8D2
  • terminal.ansiBrightBlack#808080
  • terminal.ansiBrightBlue#8DA8D2
  • terminal.ansiBrightCyan#5FB3B3
  • terminal.ansiBrightGreen#99C794
  • terminal.ansiBrightMagenta#C594C5
  • terminal.ansiBrightRed#E15A60
  • terminal.ansiBrightWhite#D4D4D4
  • terminal.ansiBrightYellow#D1C099
  • terminal.ansiCyan#5FB3B3
  • terminal.ansiGreen#99C794
  • terminal.ansiMagenta#C594C5
  • terminal.ansiRed#E15A60
  • terminal.ansiWhite#D4D4D4
  • terminal.ansiYellow#D1C099
  • terminal.background#202729
  • terminal.foreground#D4D4D4
  • terminal.selectionBackground#8DA8D2
  • testing.iconFailed#E15A60
  • testing.iconPassed#99C794
  • testing.iconQueued#D1C099
  • titleBar.activeBackground#202729
  • titleBar.activeForeground#808080
  • titleBar.border#30373A
  • titleBar.inactiveBackground#202729
  • titleBar.inactiveForeground#808080
  • tree.indentGuidesStroke#333D3D
  • welcomePage.background#202729
  • welcomePage.progress.background#333D3D
  • welcomePage.progress.foreground#333D3D

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
storage.modifier, keyword.declaration, keyword.other, keyword.control#C594C5bold
entity.name.function, meta.function-call, support.function#8DA8D2—
variable.other, variable.other.readwrite, variable.other.object, variable.other.constant, meta.definition.variable variable.other, meta.variable.declaration variable.other, meta.variable.assignment variable.other#D4D4D4—
variable.language.this, variable.language.super, variable.language.self, keyword.operator.new, keyword.other.new, keyword.control.new, storage.type.new, entity.name.type.interface, entity.name.type.enum, entity.name.type, support.class, entity.name.function.decorator, storage.type.annotation, punctuation.definition.decorator, punctuation.definition.annotation, meta.annotation.identifier, meta.decorator variable.other.readwrite, meta.decorator entity.name.function, meta.function.decorator entity.name.function, meta.function.decorator.python entity.name.function#D98C8C—
meta.type, meta.type.annotation, meta.type.declaration, meta.return.type, meta.type entity.name.type, meta.type.annotation entity.name.type, support.type, support.type.primitive, support.type.builtin, storage.type#D98C8C—
string, markup.inline.raw#99C794—
constant.numeric, constant.language, support.constant, constant.character, keyword.other.unit#F99157—
constant.language.boolean, constant.language.null, constant.language.undefined#F99157—
keyword.control.import, keyword.control.export, keyword.control.from#C594C5—
meta.object-literal.key, support.type.property-name, meta.structure.dictionary.json support.type.property-name.json, entity.name.tag.yaml, meta.key.yaml#D4D4D4—
source.js.jsx entity.other.attribute-name, source.jsx entity.other.attribute-name, source.tsx entity.other.attribute-name, meta.tag.jsx entity.other.attribute-name, meta.tag.tsx entity.other.attribute-name, meta.tag.attributes.jsx entity.other.attribute-name, meta.tag.attributes.tsx entity.other.attribute-name#C9A8C6—
support.type.property-name, meta.object-literal.key#D1C099—
entity.name.tag, entity.name.tag.css, entity.other.attribute-name, entity.other.attribute-name.id.css, entity.other.attribute-name.class.css#F0969E—
string.regexp, constant.character.escape, string.regexp.group, string.regexp.arbitrary-repetition#5FB3B3—
invalid, invalid.deprecated#E15A60underline
comment, punctuation.definition.comment#7F7F7F—