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#09090b
  • activityBar.border#ffffff0d
  • activityBar.foreground#a1a1a9
  • activityBarBadge.background#404048
  • activityBarBadge.foreground#DBDFE0F0
  • badge.background#404048
  • badge.foreground#DBDFE0F0
  • breadcrumb.activeSelectionForeground#DBDFE0F0
  • breadcrumb.background#101012
  • breadcrumb.foreground#CCCCD499
  • breadcrumbPicker.background#09090b
  • button.background#606068
  • button.foreground#DBDFE0F0
  • button.hoverBackground#74747c
  • button.secondaryBackground#62626a
  • button.secondaryForeground#DBDFE0F0
  • button.secondaryHoverBackground#818189
  • debugExceptionWidget.background#494951
  • debugExceptionWidget.border#09090b
  • debugToolBar.background#101012
  • diffEditor.insertedTextBackground#A3BE8C22
  • diffEditor.removedTextBackground#BF616A22
  • dropdown.background#101012
  • dropdown.border#24242c
  • dropdown.foreground#DBDFE0F0
  • editor.background#101012
  • editor.findMatchBackground#FFFFFF33
  • editor.findMatchHighlightBackground#FFFFFF1A
  • editor.findRangeHighlightBackground#FFFFFF33
  • editor.foreground#DBDFE0F0
  • editor.hoverHighlightBackground#24242c80
  • editor.inactiveSelectionBackground#40404877
  • editor.lineHighlightBackground#1c1c1e
  • editor.lineHighlightBorder#1c1c1e
  • editor.rangeHighlightBackground#40404852
  • editor.selectionBackground#40404899
  • editor.selectionHighlightBackground#404048CC
  • editor.snippetFinalTabstopHighlightBorder#CCCCD4
  • editor.snippetTabstopHighlightBackground#CCCCD455
  • editor.wordHighlightBackground#ffffff21
  • editor.wordHighlightStrongBackground#ffffff2d
  • editorBracketMatch.background#14141400
  • editorBracketMatch.border#FFFFFF55
  • editorCodeLens.foreground#494951
  • editorCursor.foreground#DBDFE0F0
  • editorError.border#BF616A00
  • editorError.foreground#BF616A
  • editorGroup.border#ffffff0d
  • editorGroup.dropBackground#2A2A3299
  • editorGroup.emptyBackground#09090b
  • editorGroupHeader.noTabsBackground#09090b
  • editorGroupHeader.tabsBackground#09090b
  • editorGroupHeader.tabsBorder#FFFFFF0D
  • editorGutter.addedBackground#A3BE8C
  • editorGutter.background#101012
  • editorGutter.deletedBackground#BF616A
  • editorGutter.modifiedBackground#EBCB8B
  • editorHoverWidget.background#101012
  • editorHoverWidget.border#24242c
  • editorIndentGuide.activeBackground1#545460
  • editorIndentGuide.background1#404048B3
  • editorInlayHint.background#00000000
  • editorInlayHint.foreground#494951
  • editorInlayHint.parameterBackground#00000000
  • editorInlayHint.parameterForeground#494951
  • editorInlayHint.typeBackground#00000000
  • editorInlayHint.typeForeground#494951
  • editorLineNumber.activeForeground#DBDFE0F0
  • editorLineNumber.foreground#494951
  • editorLink.activeForeground#DBDFE0F0
  • editorMarkerNavigation.background#ffffff70
  • editorMarkerNavigationError.background#BF616AC0
  • editorMarkerNavigationWarning.background#CCCCD4
  • editorOverviewRuler.addedForeground#A3BE8C99
  • editorOverviewRuler.border#00000000
  • editorOverviewRuler.deletedForeground#BF616A99
  • editorOverviewRuler.modifiedForeground#EBCB8B99
  • editorRuler.foreground#494951
  • editorSuggestWidget.background#09090b
  • editorSuggestWidget.border#24242c
  • editorSuggestWidget.foreground#DBDFE0F0
  • editorSuggestWidget.highlightForeground#DBDFE0F0
  • editorSuggestWidget.selectedBackground#34343c
  • editorWarning.border#CCCCD400
  • editorWarning.foreground#EBCB8B
  • editorWhitespace.foreground#505058B3
  • editorWidget.background#09090b
  • editorWidget.border#FFFFFF0D
  • editorWidget.resizeBorder#DBDFE0F0
  • errorForeground#bf616a
  • extensionButton.prominentBackground#62626a
  • extensionButton.prominentForeground#DBDFE0F0
  • extensionButton.prominentHoverBackground#74747c
  • focusBorder#494951
  • foreground#CCCCD4dd
  • gitDecoration.addedResourceForeground#A3BE8C
  • gitDecoration.deletedResourceForeground#BF616A
  • gitDecoration.ignoredResourceForeground#494951
  • gitDecoration.modifiedResourceForeground#EBCB8B
  • gitDecoration.untrackedResourceForeground#48A0C7
  • input.background#101012
  • input.border#24242c
  • input.foreground#DBDFE0F0
  • input.placeholderForeground#606068
  • inputOption.activeBorder#DBDFE0F0
  • inputValidation.errorBackground#BF616A
  • inputValidation.errorBorder#BF616A
  • inputValidation.infoBackground#48A0C7
  • inputValidation.infoBorder#48A0C7
  • inputValidation.infoForeground#09090b
  • inputValidation.warningBackground#EBCB8B
  • inputValidation.warningBorder#EBCB8B
  • keybindingLabel.foreground#DBDFE0F0
  • list.activeSelectionBackground#ffffff1d
  • list.activeSelectionForeground#DBDFE0F0
  • list.deemphasizedForeground#CCCCD4
  • list.dropBackground#FFFFFF99
  • list.errorForeground#BF616A
  • list.focusBackground#34343c
  • list.focusForeground#DBDFE0F0
  • list.highlightForeground#DBDFE0F0
  • list.hoverBackground#2A2A3299
  • list.hoverForeground#DBDFE0F0
  • list.inactiveSelectionBackground#ffffff10
  • list.inactiveSelectionForeground#ffffffd7
  • list.invalidItemForeground#CCCCD4
  • list.warningForeground#EBCB8B
  • menu.background#09090b
  • menu.border#FFFFFF0D
  • menu.foreground#a1a1a9
  • menu.selectionBackground#CCCCD433
  • menu.separatorBackground#CCCCD4
  • menubar.selectionBackground#1d1d25
  • menubar.selectionForeground#DBDFE0F0
  • merge.border#2A2A3200
  • merge.currentContentBackground#48A0C74D
  • merge.currentHeaderBackground#48A0C766
  • merge.incomingContentBackground#A3BE8C4D
  • merge.incomingHeaderBackground#A3BE8C66
  • minimap.background#09090b
  • minimap.errorHighlight#BF616A
  • minimap.findMatchHighlight#FFFFFF33
  • minimap.selectionHighlight#34343cCC
  • minimap.warningHighlight#EBCB8B
  • minimapGutter.addedBackground#A3BE8C
  • minimapGutter.deletedBackground#BF616A
  • minimapGutter.modifiedBackground#EBCB8B
  • notificationLink.foreground#DBDFE0F0
  • notifications.background#09090b
  • notifications.foreground#DBDFE0F0
  • panel.background#09090b
  • panel.border#FFFFFF0D
  • panelTitle.activeBorder#FFFFFF00
  • panelTitle.activeForeground#DBDFE0F0
  • panelTitle.inactiveForeground#CCCCD499
  • peekView.border#494951
  • peekViewEditor.background#09090b
  • peekViewEditor.matchHighlightBackground#FFFFFF66
  • peekViewEditorGutter.background#09090b
  • peekViewResult.background#09090b
  • peekViewResult.fileForeground#DBDFE0F0
  • peekViewResult.lineForeground#FFFFFF66
  • peekViewResult.matchHighlightBackground#FFFFFF66
  • peekViewResult.selectionBackground#34343c
  • peekViewResult.selectionForeground#DBDFE0F0
  • peekViewTitle.background#24242c
  • peekViewTitleDescription.foreground#DBDFE0F0
  • peekViewTitleLabel.foreground#DBDFE0F0
  • pickerGroup.border#FFFFFF0D
  • pickerGroup.foreground#DBDFE0F0
  • progressBar.background#74747c
  • quickInput.background#09090b
  • quickInput.foreground#a1a1a9
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#60606855
  • scrollbarSlider.background#40404855
  • scrollbarSlider.hoverBackground#60606855
  • selection.background#FFFFFF33
  • sideBar.background#09090b
  • sideBar.border#FFFFFF0D
  • sideBar.foreground#a1a1a9
  • sideBarSectionHeader.background#09090b
  • sideBarSectionHeader.foreground#606068
  • sideBarTitle.foreground#a1a1a9
  • statusBar.background#09090b
  • statusBar.border#FFFFFF0D
  • statusBar.debuggingBackground#34343c
  • statusBar.debuggingForeground#494951
  • statusBar.foreground#494951
  • statusBar.noFolderBackground#09090b
  • statusBar.noFolderForeground#494951
  • statusBarItem.activeBackground#ffffff25
  • statusBarItem.hoverBackground#FFFFFF00
  • statusBarItem.hoverForeground#a1a1a9
  • statusBarItem.prominentBackground#24242c
  • statusBarItem.prominentHoverBackground#34343c
  • tab.activeBackground#101012
  • tab.activeBorder#101012
  • tab.activeBorderTop#FFFFFF00
  • tab.activeForeground#DBDFE0F0
  • tab.border#09090b
  • tab.hoverBackground#FFFFFF00
  • tab.hoverForeground#a1a1a9
  • tab.inactiveBackground#09090b
  • tab.inactiveForeground#494951
  • tab.unfocusedActiveBorder#FFFFFF00
  • tab.unfocusedActiveForeground#FFFFFF99
  • tab.unfocusedHoverBackground#2A2A32B3
  • tab.unfocusedHoverBorder#FFFFFF00
  • tab.unfocusedInactiveForeground#FFFFFF66
  • terminal.ansiBlack#24242c
  • terminal.ansiBlue#48A0C7
  • terminal.ansiBrightBlack#494951
  • terminal.ansiBrightBlue#48A0C7
  • terminal.ansiBrightCyan#48A0C7
  • terminal.ansiBrightGreen#A3BE8C
  • terminal.ansiBrightMagenta#B48EAD
  • terminal.ansiBrightRed#BF616A
  • terminal.ansiBrightWhite#DBDFE0F0
  • terminal.ansiBrightYellow#EBCB8B
  • terminal.ansiCyan#48A0C7
  • terminal.ansiGreen#A3BE8C
  • terminal.ansiMagenta#B48EAD
  • terminal.ansiRed#BF616A
  • terminal.ansiWhite#DBDFE0F0
  • terminal.ansiYellow#EBCB8B
  • terminal.background#09090b
  • terminal.foreground#FFFFFFcc
  • terminal.inactiveSelectionBackground#3A3D41
  • terminal.selectionBackground#636262dd
  • terminalCursor.background#FFFFFF22
  • terminalCursor.foreground#DBDFE0F0
  • textLink.activeForeground#DBDFE0F0
  • textLink.foreground#DBDFE0F0
  • textPreformat.foreground#DBDFE0F0
  • textSeparator.foreground#494951
  • titleBar.activeBackground#09090b
  • titleBar.activeForeground#cccccc82
  • titleBar.border#FFFFFF0D
  • titleBar.inactiveBackground#09090b
  • titleBar.inactiveForeground#cccccc60
  • tree.indentGuidesStroke#CCCCD455
  • walkThrough.embeddedEditorBackground#09090b
  • widget.border#FFFFFF0D
  • widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#494951italic
constant, entity.name.constant, variable.other.constant, variable.other.enummember, variable.other.object.property#79b8ff
variable.language, variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python#CC7C8Aitalic
entity, entity.name, punctuation.accessor.optional.ts, meta.function-call.generic.python#b392f0
variable.parameter.function#DBDFE0F0
entity.name.tag#85e89d
punctuation.definition.tag#DBDFE0A6
punctuation.separator.key-value#DBDFE0F0
keyword#f97583
storage, storage.type#f97583
storage.modifier.package, storage.modifier.import, storage.type.java#DBDFE0F0
string, punctuation.definition.string, string punctuation.section.embedded source#9ecbff
support#79b8ff
meta.property-name#79b8ff
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, support.constant.color#f97583
keyword.other.unit, constant.numeric.css, constant.other.color.rgb-value, constant.other.rgb-value#DBDFE0F0
variable#ffab70
variable.other#DBDFE0F0
invalid.broken#fdaeb7italic
invalid.deprecated#fdaeb7italic
invalid.illegal#fdaeb7italic
invalid.unimplemented#fdaeb7italic
carriage-return#24292eitalic underline
message.error#fdaeb7
string variable#79b8ff
source.regexp, string.regexp#79b8ff
string.regexp.character-class, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#79b8ff
string.regexp constant.character.escape#79b8ff
support.constant#79b8ff
support.variable#79b8ff
meta.module-reference#79b8ff
punctuation.definition.list.begin.markdown#ffab70
markup.heading, markup.heading entity.name#79b8ffbold
markup.quote#85e89d
markup.italic#DBDFE0F0italic
markup.bold#DBDFE0F0bold
markup.underlineunderline
markup.strikethroughstrikethrough
markup.inline.raw#79b8ff
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#fdaeb7
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#85e89d
markup.changed, punctuation.definition.changed#ffab70
markup.ignored, markup.untracked#2f363d
meta.diff.range#b392f0bold
meta.diff.header#79b8ff
meta.separator#79b8ffbold
meta.output#79b8ff
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#d1d5da
brackethighlighter.unmatched#fdaeb7
constant.other.reference.link, string.other.link#79b8ffunderline
entity.other.attribute-name#b392f0
keyword.other.documentation.javadoc.java, punctuation.definition.block.tag.javadoc, storage.type.class.jsdoc#81A1C1
comment.block.javadoc.java, string.quoted.docstring, comment.block.documentation, comment.block.documentation punctuation.definition.comment, string.quoted.docstring punctuation.definition.string#81A1C1A6
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#f97583