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#3f303e
  • activityBar.border#dd76c5
  • activityBar.dropBackground#dd76c5
  • activityBar.foreground#e9f459
  • activityBarBadge.background#ff7d7d
  • activityBarBadge.foreground#000
  • badge.background#ff7d7d
  • badge.foreground#000
  • button.background#2F7366
  • button.foreground#e9f459
  • button.hoverBackground#fc76bf
  • contrastBorder#ffffff00
  • debugExceptionWidget.background#67325d
  • debugExceptionWidget.border#ffeeb3
  • debugToolBar.background#67325d
  • descriptionForeground#ffeeb3
  • diffEditor.insertedTextBackground#3ad90033
  • diffEditor.insertedTextBorder#3ad90055
  • diffEditor.removedTextBackground#ee3a4333
  • diffEditor.removedTextBorder#ee3a4355
  • dropdown.background#67325d
  • dropdown.border#2e232e
  • dropdown.foreground#e9f459
  • editor.background#27221F
  • editor.findMatchBackground#FF720066
  • editor.findMatchHighlightBackground#CAD40F66
  • editor.findRangeHighlightBackground#243E51
  • editor.foreground#e9f459
  • editor.hoverHighlightBackground#ff7d7d33
  • editor.inactiveSelectionBackground#67325d
  • editor.lineHighlightBackground#563E56
  • editor.lineHighlightBorder#67325d
  • editor.rangeHighlightBackground#563E56
  • editor.selectionBackground#67325d
  • editor.selectionHighlightBackground#0050A480
  • editor.wordHighlightBackground#ffffff21
  • editor.wordHighlightStrongBackground#ffffff21
  • editorBracketMatch.background#dd76c5
  • editorBracketMatch.border#ff7d7d80
  • editorCodeLens.foreground#ffeeb3
  • editorCursor.foreground#ff7d7d
  • editorError.border#dd76c5
  • editorError.foreground#A22929
  • editorGroup.border#3f303e
  • editorGroup.dropBackground#3f303e99
  • editorGroupHeader.noTabsBackground#67325d
  • editorGroupHeader.tabsBackground#67325d
  • editorGroupHeader.tabsBorder#2e232e
  • editorGutter.addedBackground#3C9F4A
  • editorGutter.background#3f303e66
  • editorGutter.deletedBackground#A22929
  • editorGutter.modifiedBackground#26506D
  • editorHoverWidget.background#2e232e
  • editorHoverWidget.border#dd76c5
  • editorIndentGuide.background#3B5364
  • editorLineNumber.foreground#ffeeb3
  • editorLink.activeForeground#ffeeb3
  • editorMarkerNavigation.background#3B536433
  • editorMarkerNavigationError.background#A22929
  • editorMarkerNavigationWarning.background#ff7d7d
  • editorOverviewRuler.border#dd76c5
  • editorOverviewRuler.commonContentForeground#ff7d7d55
  • editorOverviewRuler.currentContentForeground#ee3a4355
  • editorOverviewRuler.incomingContentForeground#3ad90055
  • editorRuler.foreground#563E56
  • editorSuggestWidget.background#2e232e
  • editorSuggestWidget.border#2e232e
  • editorSuggestWidget.foreground#ffeeb3
  • editorSuggestWidget.highlightForeground#ff7d7d
  • editorSuggestWidget.selectedBackground#67325d
  • editorWarning.border#ffffff00
  • editorWarning.foreground#ff7d7d
  • editorWhitespace.foreground#ffffff1a
  • editorWidget.background#2e232e
  • editorWidget.border#dd76c5
  • errorForeground#A22929
  • extensionButton.prominentBackground#67325d
  • extensionButton.prominentForeground#e9f459
  • extensionButton.prominentHoverBackground#fc76bf
  • focusBorder#dd76c5
  • foreground#ffeeb3
  • gitDecoration.conflictingResourceForeground#FF7200
  • gitDecoration.deletedResourceForeground#ff628c
  • gitDecoration.ignoredResourceForeground#747476
  • gitDecoration.modifiedResourceForeground#ff7d7d
  • gitDecoration.untrackedResourceForeground#3ad900
  • input.background#67325d
  • input.border#dd76c5
  • input.foreground#ff7d7d
  • input.placeholderForeground#ffeeb3
  • inputOption.activeBorder#8dffff
  • inputValidation.errorBackground#67325d
  • inputValidation.errorBorder#ff7d7d
  • inputValidation.infoBackground#67325d
  • inputValidation.infoBorder#0D3A58
  • inputValidation.warningBackground#67325d
  • inputValidation.warningBorder#ff7d7d
  • list.activeSelectionBackground#67325d
  • list.activeSelectionForeground#ffeeb3
  • list.dropBackground#dd76c5
  • list.focusBackground#dd76c5
  • list.focusForeground#ffeeb3
  • list.highlightForeground#ff7d7d
  • list.hoverBackground#67325d
  • list.hoverForeground#ffeeb3
  • list.inactiveSelectionBackground#dd76c5
  • list.inactiveSelectionForeground#ffeeb3
  • menu.background#3f303e
  • merge.border#ffffff00
  • merge.commonContentBackground#c97d0c
  • merge.commonHeaderBackground#c97d0c
  • merge.currentContentBackground#2F7366
  • merge.currentHeaderBackground#2F7366
  • merge.incomingContentBackground#67325d
  • merge.incomingHeaderBackground#67325d
  • notificationCenter.border#ff7d7d
  • notificationCenterHeader.background#3f303e
  • notificationCenterHeader.foreground#ffeeb3
  • notificationLink.foreground#ff7d7d
  • notifications.background#3f303e
  • notifications.border#ff7d7d
  • notifications.foreground#ffeeb3
  • notificationToast.border#ff7d7d
  • panel.background#3f303e
  • panel.border#ff7d7d
  • panelTitle.activeBorder#ff7d7d
  • panelTitle.activeForeground#ff7d7d
  • panelTitle.inactiveForeground#ffeeb3
  • peekView.border#ff7d7d
  • peekViewEditor.background#67325d
  • peekViewEditor.matchHighlightBackground#67325d00
  • peekViewEditorGutter.background#3f303e
  • peekViewResult.background#2e232e
  • peekViewResult.fileForeground#ffeeb3
  • peekViewResult.lineForeground#e9f459
  • peekViewResult.matchHighlightBackground#dd76c5
  • peekViewResult.selectionBackground#dd76c5
  • peekViewResult.selectionForeground#e9f459
  • peekViewTitle.background#2e232e
  • peekViewTitleDescription.foreground#ffeeb3
  • peekViewTitleLabel.foreground#ff7d7d
  • pickerGroup.border#dd76c5
  • pickerGroup.foreground#ffeeb3
  • progressBar.background#ff7d7d
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#355166cc
  • scrollbarSlider.background#563E5680
  • scrollbarSlider.hoverBackground#406179cc
  • selection.background#67325d
  • sideBar.background#2e232e
  • sideBar.border#dd76c5
  • sideBar.foreground#ffeeb3
  • sideBarSectionHeader.background#67325d
  • sideBarSectionHeader.foreground#aaaaaa
  • sideBarTitle.foreground#aaaaaa
  • statusBar.background#2e232e
  • statusBar.border#dd76c5
  • statusBar.debuggingBackground#2e232e
  • statusBar.debuggingBorder#ff7d7d
  • statusBar.debuggingForeground#ff7d7d
  • statusBar.foreground#ffeeb3
  • statusBar.noFolderBackground#2e232e
  • statusBar.noFolderBorder#dd76c5
  • statusBar.noFolderForeground#ffeeb3
  • statusBarItem.activeBackground#5daff3
  • statusBarItem.hoverBackground#dd76c5
  • statusBarItem.prominentBackground#2e232e
  • statusBarItem.prominentHoverBackground#dd76c5
  • tab.activeBackground#3f303e
  • tab.activeBorder#ff7d7d
  • tab.activeForeground#e9f459
  • tab.border#1e1a1e
  • tab.inactiveBackground#67325d
  • tab.inactiveForeground#ffeeb3
  • tab.unfocusedActiveForeground#ffeeb3
  • tab.unfocusedInactiveForeground#ffeeb3
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#5daff3
  • terminal.ansiBrightBlack#0050A4
  • terminal.ansiBrightBlue#5daff3
  • terminal.ansiBrightCyan#80fcff
  • terminal.ansiBrightGreen#3ad900
  • terminal.ansiBrightMagenta#fb94ff
  • terminal.ansiBrightRed#ff628c
  • terminal.ansiBrightWhite#67325d
  • terminal.ansiBrightYellow#ff7d7d
  • terminal.ansiCyan#80fcff
  • terminal.ansiGreen#3ad900
  • terminal.ansiMagenta#fb94ff
  • terminal.ansiRed#ff628c
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#ff7d7d
  • terminal.background#3f303e
  • terminal.foreground#ffffff
  • terminalCursor.background#ff7d7d
  • terminalCursor.foreground#ff7d7d
  • textBlockQuote.background#67325d
  • textBlockQuote.border#67325d
  • textCodeBlock.background#67325d
  • textLink.activeForeground#ff7d7d
  • textLink.foreground#ff7d7d
  • textPreformat.foreground#3ad900
  • textSeparator.foreground#dd76c5
  • titleBar.activeBackground#1e1a1e
  • titleBar.activeForeground#ffffff
  • titleBar.inactiveBackground#67325d
  • titleBar.inactiveForeground#ffffff33
  • walkThrough.embeddedEditorBackground#dd76c5
  • welcomePage.buttonBackground#67325d
  • welcomePage.buttonHoverBackground#dd76c5
  • widget.shadow#00000026

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5daff3italic
constant#ff628c
entity#ff7d7d
invalid#f44542
storage.type.function#fc76bf
keyword, storage.type.class#fc76bf
meta#ffd9fb
meta.brace#e6d891
punctuation#e6d891
punctuation.definition.parameters#e9f459
punctuation.definition.template-expression#e9f459
storage#ff7d7d
storage.type.function.arrow#ff7d7d
string, punctuation.definition.string#80ffbb
string.template, punctuation.definition.string.template#3ad900
support#3ad900
support.function#fc76bf
support.variable.property.dom#e6d891
variable#e6d891
source.css entity, source.stylus entity#3ad900
entity.other.attribute-name.id.css#FFB454
entity.name.tag#ffd9fb
source.css support, source.stylus support#dd76c5
source.css constant, source.css support.constant, source.stylus constant, source.stylus support.constant#e9f459
source.css string, source.css punctuation.definition.string, source.stylus string, source.stylus punctuation.definition.string#e9f459
source.css variable, source.stylus variable#ffd9fb
text.html.basic entity.name#ffd9fb
meta.toc-list.id.html#A5FF90
text.html.basic entity.other#ff7d7ditalic
meta.tag.metadata.script.html entity.name.tag.html#ff7d7d
punctuation.definition.string.begin, punctuation.definition.string.end#80ffbb
source.ini entity#e6d891
source.ini keyword#ff7d7d
source.ini punctuation.definition#e9f459
source.ini punctuation.separator#fc76bf
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#ff7d7d
source.json string, source.json punctuation.definition.string#e6d891
punctuation.definition.heading.markdown#e6d891
entity.name.section.markdown, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#ff7d7dbold
meta.paragraph.markdown#e6d891
beginning.punctuation.definition.quote.markdown#ff7d7d
markup.quote.markdown meta.paragraph.markdown#ffd9fbitalic
meta.separator.markdown#ff7d7d
markup.bold.markdown#ffd9fbbold
markup.italic.markdown#ffd9fbitalic
beginning.punctuation.definition.list.markdown#ff7d7d
string.other.link.title.markdown#dd76c5
string.other.link.title.markdown, string.other.link.description.markdown, string.other.link.description.title.markdown#dd76c5
markup.underline.link.markdown, markup.underline.link.image.markdown#ffd9fb
fenced_code.block.language, markup.inline.raw.markdown#ffd9fb
fenced_code.block.language, markup.inline.raw.markdown#ffd9fb
markup.heading.markdown#80ffbb
punctuation.definition.string.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, meta.link.inline.markdown punctuation.definition.string#e9f459
punctuation.definition.metadata.markdown#80ffbb
beginning.punctuation.definition.list.markdown#e9f459
markup.inline.raw.string.markdown#80ffbb
text.jade entity.name#ffd9fb
text.jade entity.other.attribute-name.tagitalic
text.jade string.interpolated#e9f459
source.ts entity.name.type#80ffbb
source.ts keyword#ff7d7d
source.ts punctuation.definition.parameters#e6d891
meta.arrow.ts punctuation.definition.parameters#e9f459
source.ts storage#ffd9fb
meta.import.ts punctuation.definition.block, meta.import.tsx punctuation.definition.block, meta.export.ts punctuation.definition.block, meta.export.tsx punctuation.definition.block#d6deeb
meta.class entity.name.type.class.tsx#e6d891
entity.name.type.tsx, entity.name.type.module.tsx#e6d891
meta.decorator punctuation.decorator.ts, meta.decorator punctuation.decorator.tsx#ff628c
meta.tag.js meta.jsx.children.tsx#ff628c
meta.method.declaration storage.type.ts, meta.method.declaration storage.type.tsx#ff628c
source.php entity#ffd9fb
variable.other.php#ff7d7d
meta.function-call.php punctuation#d6deeb
storage.type.cs#ffd9fb
entity.name.variable.property.cs#ffd9fb
storage.modifier.cs#80ffbb