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#1F2838
  • activityBar.border#2D3A52
  • activityBar.dropBackground#2D3A52
  • activityBar.foreground#fff
  • activityBarBadge.background#E6A2C5
  • activityBarBadge.foreground#000
  • badge.background#E6A2C5
  • badge.foreground#000
  • button.background#527A86
  • button.foreground#fff
  • button.hoverBackground#D8A49B
  • contrastBorder#ffffff00
  • debugExceptionWidget.background#2D3A52
  • debugExceptionWidget.border#dad0d0
  • debugToolBar.background#2D3A52
  • descriptionForeground#dad0d0
  • diffEditor.insertedTextBackground#00A69A22
  • diffEditor.insertedTextBorder#00A69A44
  • diffEditor.removedTextBackground#B81B1222
  • diffEditor.removedTextBorder#B81B1244
  • dropdown.background#2D3A52
  • dropdown.border#1F2838
  • dropdown.foreground#fff
  • editor.background#2D3A52
  • editor.findMatchBackground#FF720066
  • editor.findMatchHighlightBackground#408fa766
  • editor.findRangeHighlightBackground#243E51
  • editor.foreground#fff
  • editor.hoverHighlightBackground#E6A2C533
  • editor.inactiveSelectionBackground#1F283880
  • editor.lineHighlightBackground#3C4475
  • editor.lineHighlightBorder#424a80
  • editor.rangeHighlightBackground#3C4475
  • editor.selectionBackground#74628A
  • editor.selectionHighlightBackground#74628A80
  • editor.wordHighlightBackground#ffffff21
  • editor.wordHighlightStrongBackground#ffffff21
  • editorBracketMatch.background#2D3A52
  • editorBracketMatch.border#E6A2C580
  • editorCodeLens.foreground#dad0d0
  • editorCursor.foreground#E6A2C5
  • editorError.border#2D3A52
  • editorError.foreground#A22929
  • editorGroup.background#A22929
  • editorGroup.border#7496D2
  • editorGroup.dropBackground#7496D299
  • editorGroupHeader.noTabsBackground#2D3A52
  • editorGroupHeader.tabsBackground#2D3A52
  • editorGroupHeader.tabsBorder#1F2838
  • editorGutter.addedBackground#3C9F4A
  • editorGutter.background#2D3A5266
  • editorGutter.deletedBackground#A22929
  • editorGutter.modifiedBackground#26506D
  • editorHoverWidget.background#1F2838
  • editorHoverWidget.border#2D3A52
  • editorIndentGuide.background#57709E
  • editorLineNumber.foreground#aaa
  • editorLink.activeForeground#dad0d0
  • editorMarkerNavigation.background#57709E33
  • editorMarkerNavigationError.background#A22929
  • editorMarkerNavigationWarning.background#E6A2C5
  • editorOverviewRuler.border#2D3A52
  • editorOverviewRuler.commonContentForeground#E6A2C555
  • editorOverviewRuler.currentContentForeground#ee3a4355
  • editorOverviewRuler.incomingContentForeground#7496D255
  • editorRuler.foreground#3C4475
  • editorSuggestWidget.background#1F2838
  • editorSuggestWidget.border#1F2838
  • editorSuggestWidget.foreground#dad0d0
  • editorSuggestWidget.highlightForeground#E6A2C5
  • editorSuggestWidget.selectedBackground#2D3A52
  • editorWarning.border#ffffff00
  • editorWarning.foreground#E6A2C5
  • editorWhitespace.foreground#ffffff1a
  • editorWidget.background#1F2838
  • editorWidget.border#2D3A52
  • errorForeground#A22929
  • extensionButton.prominentBackground#527A86
  • extensionButton.prominentForeground#fff
  • extensionButton.prominentHoverBackground#D8A49B
  • focusBorder#2D3A52
  • foreground#dad0d0
  • gitDecoration.conflictingResourceForeground#FF7200
  • gitDecoration.deletedResourceForeground#ff628c
  • gitDecoration.ignoredResourceForeground#808080
  • gitDecoration.modifiedResourceForeground#E6A2C5
  • gitDecoration.untrackedResourceForeground#7496D2
  • input.background#2D3A52
  • input.border#2D3A52
  • input.foreground#E6A2C5
  • input.placeholderForeground#dad0d0
  • inputOption.activeBorder#457A96
  • inputValidation.errorBackground#2D3A52
  • inputValidation.errorBorder#E6A2C5
  • inputValidation.infoBackground#2D3A52
  • inputValidation.infoBorder#2D3A52
  • inputValidation.warningBackground#2D3A52
  • inputValidation.warningBorder#E6A2C5
  • list.activeSelectionBackground#2D3A52
  • list.activeSelectionForeground#ece3e3
  • list.dropBackground#2D3A52
  • list.focusBackground#2D3A52
  • list.focusForeground#dad0d0
  • list.highlightForeground#E6A2C5
  • list.hoverBackground#2D3A52
  • list.hoverForeground#ece3e3
  • list.inactiveSelectionBackground#2D3A52
  • list.inactiveSelectionForeground#aaa
  • menu.background#546e9b
  • merge.border#ffffff00
  • merge.commonContentBackground#c97d0c
  • merge.commonHeaderBackground#c97d0c
  • merge.currentContentBackground#2F7366
  • merge.currentHeaderBackground#2F7366
  • merge.incomingContentBackground#185294
  • merge.incomingHeaderBackground#185294
  • notification.background#E6A2C5
  • notification.buttonBackground#527A86
  • notification.buttonForeground#fff
  • notification.buttonHoverBackground#D8A49B
  • notification.errorBackground#A22929
  • notification.errorForeground#fff
  • notification.foreground#000
  • notification.infoBackground#527A86
  • notification.infoForeground#fff
  • notification.warningBackground#D8A49B
  • notification.warningForeground#000
  • notificationCenter.border#E6A2C5
  • notificationCenterHeader.background#2D3A52
  • notificationCenterHeader.foreground#dad0d0
  • notificationLink.foreground#E6A2C5
  • notifications.background#2D3A52
  • notifications.border#E6A2C5
  • notifications.foreground#dad0d0
  • notificationToast.border#E6A2C5
  • panel.background#2D3A52
  • panel.border#E6A2C5
  • panelTitle.activeBorder#E6A2C5
  • panelTitle.activeForeground#E6A2C5
  • panelTitle.inactiveForeground#dad0d0
  • peekView.border#E6A2C5
  • peekViewEditor.background#2D3A52
  • peekViewEditor.matchHighlightBackground#2D3A5200
  • peekViewEditorGutter.background#34435E
  • peekViewResult.background#1F2838
  • peekViewResult.fileForeground#dad0d0
  • peekViewResult.lineForeground#fff
  • peekViewResult.matchHighlightBackground#2D3A52
  • peekViewResult.selectionBackground#2D3A52
  • peekViewResult.selectionForeground#fff
  • peekViewTitle.background#1F2838
  • peekViewTitleDescription.foreground#dad0d0
  • peekViewTitleLabel.foreground#E6A2C5
  • pickerGroup.border#2D3A52
  • pickerGroup.foreground#dad0d0
  • progressBar.background#E6A2C5
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#D8A49Bcc
  • scrollbarSlider.background#57709E80
  • scrollbarSlider.hoverBackground#57709Ecc
  • selection.background#2D3A52
  • sideBar.background#1F2838
  • sideBar.border#2D3A52
  • sideBar.foreground#dad0d0
  • sideBarSectionHeader.background#2D3A52
  • sideBarSectionHeader.foreground#dad0d0
  • sideBarTitle.foreground#dad0d0
  • statusBar.background#1F2838
  • statusBar.border#2D3A52
  • statusBar.debuggingBackground#1F2838
  • statusBar.debuggingBorder#E6A2C5
  • statusBar.debuggingForeground#E6A2C5
  • statusBar.foreground#dad0d0
  • statusBar.noFolderBackground#1F2838
  • statusBar.noFolderBorder#2D3A52
  • statusBar.noFolderForeground#dad0d0
  • statusBarItem.activeBackground#527A86
  • statusBarItem.hoverBackground#2D3A52
  • statusBarItem.prominentBackground#1F2838
  • statusBarItem.prominentHoverBackground#2D3A52
  • tab.activeBackground#34435E
  • tab.activeBorder#E6A2C5
  • tab.activeForeground#fff
  • tab.border#1F2838
  • tab.inactiveBackground#1F2838
  • tab.inactiveForeground#dad0d0
  • tab.unfocusedActiveForeground#dad0d0
  • tab.unfocusedInactiveForeground#dad0d0
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#527A86
  • terminal.ansiBrightBlack#1F2838
  • terminal.ansiBrightBlue#527A86
  • terminal.ansiBrightCyan#80fcff
  • terminal.ansiBrightGreen#7496D2
  • terminal.ansiBrightMagenta#fb94ff
  • terminal.ansiBrightRed#ff628c
  • terminal.ansiBrightWhite#2D3A52
  • terminal.ansiBrightYellow#E6A2C5
  • terminal.ansiCyan#80fcff
  • terminal.ansiGreen#7496D2
  • terminal.ansiMagenta#fb94ff
  • terminal.ansiRed#ff628c
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#E6A2C5
  • terminal.background#34435E
  • terminal.foreground#f1e6e4
  • terminalCursor.background#E6A2C5
  • terminalCursor.foreground#E6A2C5
  • textBlockQuote.background#2D3A52
  • textBlockQuote.border#527A86
  • textCodeBlock.background#2D3A52
  • textLink.activeForeground#527A86
  • textLink.foreground#527A86
  • textPreformat.foreground#E6A2C5
  • textSeparator.foreground#2D3A52
  • titleBar.activeBackground#1F2838
  • titleBar.activeForeground#ffffff
  • titleBar.inactiveBackground#2D3A52
  • titleBar.inactiveForeground#ffffff33
  • walkThrough.embeddedEditorBackground#2D3A52
  • welcomePage.buttonBackground#2D3A52
  • welcomePage.buttonHoverBackground#2D3A52
  • widget.shadow#00000026

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9CD9BFitalic
constant#dac291
entity#E6A2C5
invalid#f44542
storage.type.function#D8A49B
keyword, storage.type.class#D8A49B
meta#C7CEF6
meta.jsx.children, meta.jsx.children.js, meta.jsx.children.tsx#fff
entity.name.tag.js#C7CEF6
support.class.component.js#fb94ff
meta.brace#e1efff
punctuation#e1efff
punctuation.definition.parameters#DAC391
punctuation.definition.template-expression#DAC391
storage#E6A2C5
storage.type.function.arrow#E6A2C5
storage.type.js, storage.modifier.js, storage.modifier.ts, storage.modifier.tsx#D8A49B
string, punctuation.definition.string#7396D1
string.template, punctuation.definition.string.template#7496D2
support#C7CEF6
support.function#D8A49B
support.variable.property.dom#e1efff
variable#e1efff
source.css entity, source.stylus entity#D8A49B
support.type.property-name.css#C7CEF6
support.constant.property-value.css#6f98DE
keyword.other.unit.rem.css, constant.numeric.css#6f98DE
keyword.other.important#DAC391
entity.other.attribute-name.id.css#FFB454
entity.name.tag#D8A49B
support.function.misc.scss#D8A49B
source.css support, source.stylus support#7396D1
source.css constant, source.css support.constant, source.stylus constant, source.stylus support.constant#DAC391
source.css string, source.css punctuation.definition.string, source.stylus string, source.stylus punctuation.definition.string#DAC391
source.css variable, source.stylus variable#C7CEF6
text.html.basic entity.name#C7CEF6
meta.toc-list.id.html#7396D1
text.html.basic entity.other#E6A2C5italic
meta.tag.metadata.script.html entity.name.tag.html#E6A2C5
punctuation.definition.string.begin, punctuation.definition.string.end#7A9DDE
source.ini entity#e1efff
source.ini keyword#E6A2C5
source.ini punctuation.definition#DAC391
source.ini punctuation.separator#D8A49B
source.js storage.type.function#fb94ff
variable.language, entity.name.type.class.js#fb94ff
entity.other.inherited-class.js#ccc
variable.parameter.function.language.special.self.python#fb94ff
source.json support#E6A2C5
source.json string, source.json punctuation.definition.string#e1efff
punctuation.definition.heading.markdown#e1efff
entity.name.section.markdown, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#E6A2C5bold
meta.paragraph.markdown#e1efff
beginning.punctuation.definition.quote.markdown#E6A2C5
markup.quote.markdown meta.paragraph.markdown#C7CEF6italic
meta.separator.markdown#E6A2C5
markup.bold.markdown#C7CEF6bold
markup.italic.markdown#C7CEF6italic
beginning.punctuation.definition.list.markdown#E6A2C5
string.other.link.title.markdown#7396D1
string.other.link.title.markdown, string.other.link.description.markdown, string.other.link.description.title.markdown#7396D1
markup.underline.link.markdown, markup.underline.link.image.markdown#C7CEF6
fenced_code.block.language, markup.inline.raw.markdown#C7CEF6
fenced_code.block.language, markup.inline.raw.markdown#C7CEF6
text.jade entity.name#C7CEF6
text.jade entity.other.attribute-name.tagitalic
text.jade string.interpolated#DAC391
source.ts entity.name.type#6f98DE
source.ts keyword#E6A2C5
source.ts punctuation.definition.parameters#e1efff
meta.arrow.ts punctuation.definition.parameters#DAC391
source.ts storage#C7CEF6
variable.language, entity.name.type.class.ts, entity.name.type.class.tsx#fb94ff
entity.other.inherited-class.ts, entity.other.inherited-class.tsx#ccc
source.php entity#C7CEF6
variable.other.php#E6A2C5
storage.type.cs#C7CEF6
entity.name.variable.property.cs#C7CEF6
storage.modifier.cs#6f98DE
modifier, this, comment, storage.modifier.js, storage.modifier.ts, storage.modifier.tsx, entity.other.attribute-name.js, entity.other.attribute-name.ts, entity.other.attribute-name.tsx, entity.other.attribute-name.htmlitalic
storage.modifier.cs, keyword.type.cs#fb94ff
storage.type.cs#6f98DE
entity.name.type.namespace.cs, entity.name.variable.parameter.cs, entity.name.variable.field.cs, entity.name.variable.property.cs#e1efff