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#28284E
  • activityBar.border#292952
  • activityBar.dropBackground#222145
  • activityBar.foreground#FFFFFF
  • activityBarBadge.background#FAD000
  • activityBarBadge.foreground#1E1E3F
  • badge.background#FAD000
  • badge.foreground#1E1E3F
  • breadcrumb.activeSelectionForeground#FFFFFF
  • breadcrumb.focusForeground#FAD000
  • breadcrumb.foreground#A599E9
  • breadcrumbPicker.background#1E1E3F
  • button.background#FAD000
  • button.foreground#222244
  • button.hoverBackground#A599E9
  • contrastActiveBorder#FFFFFF00
  • contrastBorder#FFFFFF00
  • debugExceptionWidget.background#1E1E3F
  • debugExceptionWidget.border#A599E9
  • debugToolBar.background#1E1E3F
  • descriptionForeground#A599E9
  • diffEditor.insertedTextBackground#00FF000E
  • diffEditor.insertedTextBorder#00FF009A
  • diffEditor.removedTextBackground#FF000D1A
  • diffEditor.removedTextBorder#FF000D81
  • dropdown.background#1E1E3F
  • dropdown.border#1E1E3F
  • dropdown.foreground#FFFFFF
  • editor.background#2D2B55
  • editor.findMatchBackground#FF7200
  • editor.findMatchHighlightBackground#FFFF0336
  • editor.findRangeHighlightBackground#FFFF0336
  • editor.foreground#FFFFFF
  • editor.hoverHighlightBackground#1E1E3F80
  • editor.inactiveSelectionBackground#7580B8C0
  • editor.lineHighlightBackground#1F1F41
  • editor.lineHighlightBorder#1F1F41
  • editor.rangeHighlightBackground#1F1F41
  • editor.selectionBackground#B362FF88
  • editor.selectionHighlightBackground#7E46DF46
  • editor.wordHighlightBackground#FFFFFF0D
  • editor.wordHighlightStrongBackground#FFFFFF0D
  • editorBracketMatch.background#AD70FC46
  • editorBracketMatch.border#AD70FC46
  • editorCodeLens.foreground#A599E9
  • editorCursor.foreground#FAD000
  • editorError.foreground#EC3A37F5
  • editorGroup.border#222244
  • editorGroup.dropBackground#222244D0
  • editorGroupHeader.noTabsBackground#2D2B55
  • editorGroupHeader.tabsBackground#2D2B55
  • editorGroupHeader.tabsBorder#1F1F41
  • editorGutter.addedBackground#35AD68
  • editorGutter.background#28284E
  • editorGutter.deletedBackground#EC3A37F5
  • editorGutter.modifiedBackground#AD70FC46
  • editorHoverWidget.background#1F1F41
  • editorHoverWidget.border#1F1F41
  • editorIndentGuide.activeBackground#A599E942
  • editorIndentGuide.background#A599E90F
  • editorLineNumber.foreground#A599E9
  • editorLink.activeForeground#A599E9
  • editorMarkerNavigation.background#3B536433
  • editorMarkerNavigationError.background#EC3A37F5
  • editorMarkerNavigationWarning.background#FAD000
  • editorOverviewRuler.border#A599E91C
  • editorOverviewRuler.commonContentForeground#FFC60055
  • editorOverviewRuler.currentContentForeground#EE3A4355
  • editorOverviewRuler.incomingContentForeground#3AD90055
  • editorRuler.foreground#A599E91C
  • editorSuggestWidget.background#1F1F41
  • editorSuggestWidget.border#1F1F41
  • editorSuggestWidget.foreground#A599E9
  • editorSuggestWidget.highlightForeground#FAD000
  • editorSuggestWidget.selectedBackground#2D2B55
  • editorWarning.border#FFFFFF00
  • editorWarning.foreground#FAD000
  • editorWhitespace.foreground#FFFFFF1A
  • editorWidget.background#222244
  • editorWidget.border#1F1F41
  • errorForeground#EC3A37F5
  • extensionButton.prominentBackground#5D37F0
  • extensionButton.prominentForeground#FFFFFF
  • extensionButton.prominentHoverBackground#FF9D00
  • focusBorder#1E1E3F
  • foreground#A599E9
  • gitDecoration.conflictingResourceForeground#FF7200
  • gitDecoration.deletedResourceForeground#EC3A37F5
  • gitDecoration.ignoredResourceForeground#a599e981
  • gitDecoration.modifiedResourceForeground#FAD000
  • gitDecoration.untrackedResourceForeground#3AD900
  • input.background#2D2B55
  • input.border#1E1E3F
  • input.foreground#FAD000
  • input.placeholderForeground#A599E9
  • inputOption.activeBorder#A599E9
  • inputValidation.errorBackground#2D2B55
  • inputValidation.errorBorder#FAD000
  • inputValidation.infoBackground#2D2B55
  • inputValidation.infoBorder#2D2B55
  • inputValidation.warningBackground#2D2B55
  • inputValidation.warningBorder#FAD000
  • list.activeSelectionBackground#1E1E3F
  • list.activeSelectionForeground#FFFFFF
  • list.dropBackground#1E1E3F
  • list.focusBackground#1E1E3F
  • list.focusForeground#FFFFFF
  • list.highlightForeground#FAD000
  • list.hoverBackground#2D2B55
  • list.hoverForeground#CEC5FF
  • list.inactiveSelectionBackground#2D2B55
  • list.inactiveSelectionForeground#AAA
  • merge.border#FFFFFF00
  • merge.commonContentBackground#FFFFFF00
  • merge.commonHeaderBackground#FFFFFF00
  • merge.currentContentBackground#FFFFFF00
  • merge.currentHeaderBackground#FFFFFF00
  • merge.incomingContentBackground#FFFFFF00
  • merge.incomingHeaderBackground#FFFFFF00
  • notificationCenter.border#1E1E3F
  • notificationCenterHeader.background#6943FF
  • notificationCenterHeader.foreground#FFFFFF
  • notificationLink.foreground#FFFFFF
  • notifications.background#1E1E3F
  • notifications.border#2D2B55
  • notifications.foreground#CEC5FF
  • notificationToast.border#1E1E3F
  • panel.background#1E1E3F
  • panel.border#FAD000
  • panelTitle.activeBorder#FAD000
  • panelTitle.activeForeground#FAD000
  • panelTitle.inactiveForeground#A599E9
  • peekView.border#FAD000
  • peekViewEditor.background#1E1E3F
  • peekViewEditor.matchHighlightBackground#19354900
  • peekViewEditorGutter.background#191935
  • peekViewResult.background#1E1E3F
  • peekViewResult.fileForeground#AAA
  • peekViewResult.lineForeground#FFFFFF
  • peekViewResult.matchHighlightBackground#2D2B55
  • peekViewResult.selectionBackground#2D2B55
  • peekViewResult.selectionForeground#FFFFFF
  • peekViewTitle.background#1F1F41
  • peekViewTitleDescription.foreground#AAA
  • peekViewTitleLabel.foreground#FAD000
  • pickerGroup.border#1E1E3F
  • pickerGroup.foreground#A599E9
  • progressBar.background#FAD000
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#1E1E3FDA
  • scrollbarSlider.background#1E1E3F9D
  • scrollbarSlider.hoverBackground#1E1E3FD7
  • selection.background#B362FF
  • settings.checkboxBackground#1E1E3F
  • settings.checkboxBorder#1E1E3F
  • settings.checkboxForeground#A599E9
  • settings.dropdownBackground#1E1E3F
  • settings.dropdownBorder#1E1E3F
  • settings.dropdownForeground#A599E9
  • settings.headerForeground#FFFFFF
  • settings.inactiveSelectedItemBorder#FAD000
  • settings.modifiedItemForeground#3AD900
  • settings.numberInputBackground#1E1E3F
  • settings.numberInputBorder#1E1E3F
  • settings.numberInputForeground#A599E9
  • settings.textInputBackground#1E1E3F
  • settings.textInputBorder#1E1E3F
  • settings.textInputForeground#A599E9
  • sideBar.background#222244
  • sideBar.border#25254B
  • sideBar.foreground#A599E9
  • sideBarSectionHeader.background#1E1E3F
  • sideBarSectionHeader.foreground#A599E9
  • sideBarTitle.foreground#A599E9
  • statusBar.background#1E1E3F
  • statusBar.border#1E1E3F
  • statusBar.debuggingBackground#1E1E3F
  • statusBar.debuggingForeground#1E1E3F
  • statusBar.foreground#A599E9
  • statusBar.noFolderBackground#1E1E3F
  • statusBar.noFolderForeground#A599E9
  • statusBarItem.activeBackground#4D21FC
  • statusBarItem.hoverBackground#2D2B55
  • statusBarItem.prominentBackground#1E1E3F
  • statusBarItem.prominentHoverBackground#2D2B55
  • tab.activeBackground#222244
  • tab.activeBorder#FAD000
  • tab.activeForeground#FFFFFF
  • tab.border#1E1E3F
  • tab.inactiveBackground#2D2B55
  • tab.inactiveForeground#A599E9
  • tab.unfocusedActiveForeground#A599E9
  • tab.unfocusedInactiveForeground#A599E9
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#6943FF
  • terminal.ansiBrightBlack#5C5C61
  • terminal.ansiBrightBlue#6943FF
  • terminal.ansiBrightCyan#80FCFF
  • terminal.ansiBrightGreen#3AD900
  • terminal.ansiBrightMagenta#FB94FF
  • terminal.ansiBrightRed#EC3A37F5
  • terminal.ansiBrightWhite#2D2B55
  • terminal.ansiBrightYellow#FAD000
  • terminal.ansiCyan#80FCFF
  • terminal.ansiGreen#3AD900
  • terminal.ansiMagenta#FF2C70
  • terminal.ansiRed#EC3A37F5
  • terminal.ansiWhite#FFFFFF
  • terminal.ansiYellow#FAD000
  • terminal.background#1E1E3F
  • terminal.foreground#FFFFFF
  • terminalCursor.background#FAD000
  • terminalCursor.foreground#FAD000
  • textBlockQuote.background#1E1E3F
  • textBlockQuote.border#6943FF
  • textCodeBlock.background#1E1E3F
  • textLink.activeForeground#B362FF
  • textLink.foreground#B362FF
  • textPreformat.foreground#FAD000
  • textSeparator.foreground#1E1E3F
  • titleBar.activeBackground#1E1E3F
  • titleBar.activeForeground#FFFFFF
  • titleBar.inactiveBackground#1E1E3F
  • titleBar.inactiveForeground#A599E9
  • walkThrough.embeddedEditorBackground#1E1E3F
  • welcomePage.buttonBackground#1E1E3F
  • welcomePage.buttonHoverBackground#1E1E3F
  • widget.shadow#00000026

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#B362FF
entity#FAD000
constant#FF628C
keyword, storage.type.class.js#FF9D00
meta#9EFFFF
invalid#EC3A37F5
meta.brace#E1EFFF
punctuation#E1EFFF
punctuation.definition.parameters#FFEE80
punctuation.definition.template-expression#FFEE80
storage#FAD000
storage.type.function.arrow#FAD000
string, punctuation.definition.string#A5FF90
string.template, punctuation.definition.string.template#3AD900
support#80FFBB
support.function#FF9D00
support.variable.property.dom#9EFFFF
variable#E1EFFF
source.ini entity#E1EFFF
source.ini keyword#FAD000
source.ini punctuation.definition#FFEE80
source.ini punctuation.separator#FF9D00
source.css entity, source.stylus entity#3AD900
entity.other.attribute-name.id.css#FFB454
entity.name.tag#9EFFFF
source.css support, source.stylus support#A5FF90
source.css constant, source.css support.constant, source.stylus constant, source.stylus support.constant#FFEE80
source.css string, source.css punctuation.definition.string, source.stylus string, source.stylus punctuation.definition.string#FFEE80
source.css variable, source.stylus variable#9EFFFF
text.html.basic entity.name, punctuation.definition.tag.html, entity.name.tag.inline.any.html, meta.tag.other.html, meta.tag.inline.any.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, entity.name.tag, meta.tag.other.html, meta.tag.other.js, meta.tag.other.tsx, entity.name.tag.tsx, entity.name.tag.js, entity.name.tag, meta.tag.js, meta.tag.tsx, meta.tag.html#9EFFFF
meta.toc-list.id.html#A5FF90
text.html.basic entity.other#FAD000
meta.tag.metadata.script.html entity.name.tag.html#FAD000
punctuation.definition.string.begin, punctuation.definition.string.end#92FC79
meta.tag.inline.any.html, meta.tag.other#FF9D00
source.json support#FAD000
source.json string, source.json punctuation.definition.string#92FC79
source.js storage.type.function#FB94FF
variable.language, entity.name.type.class.js#FB94FF
entity.other.inherited-class#FFEE80
storage.type.extends.js, storage.type.class.jsdoc#FF9D00
punctuation.definition.block.tag.jsdoc#FF9D00
variable.other.jsdoc, entity.name.type.instance.jsdoc#9EFFFF
variable.other.constant.js#9EFFFF
punctuation.definition.tag.begin.js, punctuation.definition.tag.end.js#9EFFFF
meta.jsx.children.js#FFFFFF
storage.type.js, storage.type.class.js, storage.modifier.js, keyword.control, keyword.operator#FF9D00
punctuation.definition.bracket.curly#494685
keyword.operator.assignment.tsx, keyword.operator.assignment.jsx#FF9D00
keyword.operator.assignment#FF9D00
meta.jsx.children.tsx#FFFFFF
meta.object-literal.key.js#80FFBB
entity.name.type.class.tsx, entity.name.type.class.jsx, variable.other.readwrite.alias.tsx, variable.other.readwrite.tsx, variable.other.readwrite.alias.ts, variable.other.readwrite.alias.jsx, variable.other.readwrite.alias.js, variable.other.object.tsx, variable.other.object.jsx, support.class.component.tsx, support.class.component.jsx, entity.name.type.tsx, entity.name.type.jsx, variable.other.readwrite.js, variable.other.object.js#9EFFFF
variable.other.property, variable.other.object.property#FFEE80
JSXNested#FFFFFF
variable.parameter#9EFFFF
variable.parameter.function.language.special.self.python#9EFFFF
meta.function-call.python, meta.function-call.generic.python, support.function.builtin.python#FAD000
source.ts entity.name.type#80FFBB
source.ts keyword#FAD000
source.ts punctuation.definition.parameters#E1EFFF
meta.arrow.ts punctuation.definition.parameters#FFEE80
source.ts storage#9EFFFF
entity.name.section.markdown, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#FAD000bold
meta.paragraph.markdown#FFFFFF
markup.inline.raw.string.markdown#A599E9
beginning.punctuation.definition.quote.markdown#FAD000
markup.quote.markdown meta.paragraph.markdown#A599E9
meta.separator.markdown#FAD000
markup.bold.markdown#A599E9bold
markup.italic.markdown#A599E9
beginning.punctuation.definition.list.markdown#FAD000
string.other.link.title.markdown#A5FF90
string.other.link.title.markdown, string.other.link.description.markdown, string.other.link.description.title.markdown#A5FF90
markup.underline.link.markdown, markup.underline.link.image.markdown#9EFFFF
fenced_code.block.language, markup.inline.raw.markdown#9EFFFF
punctuation.definition.markdown, punctuation.definition.raw.markdown, punctuation.definition.heading.markdown, punctuation.definition.bold.markdown#494685
text.jade entity.name#9EFFFF
storage.type.function.pug#FF9D00
variable.parameter.function.js#9EFFFF
variable.control.import.include.pug#92FC79
text.jade string.interpolated#FFEE80
storage.type.cs#9EFFFF
entity.name.variable.property.cs#9EFFFF
storage.modifier.cs#80FFBB
source.php entity, variable.other.class.php#9EFFFF
keyword.other.phpdoc.php#FF9D00
entity.name.function.php, support.function.basic_functions.php, meta.function-call.php, variable.other.property#FAD000
variable.other.php, punctuation.definition.variable.php, variable.other.global.php, variable.language.this.php#9EFFFF
storage.modifier.php, keyword.other.namespace.php#FF9D00
punctuation.definition.block.sequence.item.yaml#FF9D00
storage.type.function.php, meta.function.parameters.php#FB94FF
keyword.package.go, keyword.import.go#FF9D00
entity.name.section.group-title.ini#FF9D00
keyword.other.definition.ini#FAD000
punctuation.definition.entity.ini#FFFFFF
keyword.function.go#FB94FF
variable.other.assignment.go#9EFFFF
punctuation.definition.string.begin.go, punctuation.definition.string.end.go, support.function.go#FAD000
support.type.property-name.json#FAD000
entity.name.tag.yaml#FAD000
string.unquoted.plain.out.yaml#FFFFFF
italic, keyword.control, quote, storage, modifier, this, comment, support.type.property-name, entity.other.attribute-name, punctuation.definition.comment, text.html.basic entity.other, markup.quote, markup.italic, meta.tag.sgml.doctype, punctuation.binary, markup.changed, meta.diff.header, meta.diff.header.from-file, meta.diff.header.to-file, markup.deleted.diff, markup.inserted.diff, meta.delimiter.period, punctuation.accessor, meta.var.expr, meta.class meta.method.declaration meta.var.expr storage.type, variable.other.object.property, entity.name.tag.doctype, meta.tag.sgml.doctype, entity.name.section, meta.selectoritalic
The Best Themes for programmers by Estevam Souza - VS Code Theme