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.activeBackground#401E63
  • activityBar.activeBorder#20B2AB
  • activityBar.background#2E143D
  • activityBar.border#230F2E
  • activityBar.foreground#C7C7CC
  • activityBar.inactiveForeground#7137BE
  • activityBarBadge.background#20B2AB
  • activityBarBadge.foreground#170A1F
  • badge.background#20B2AB
  • badge.foreground#170A1F
  • breadcrumb.activeSelectionForeground#E5E5EA
  • breadcrumb.background#2E143D
  • breadcrumb.focusForeground#E5E5EA
  • breadcrumb.foreground#AEAEB2
  • breadcrumbPicker.background#230F2E
  • button.background#20B2AB
  • button.foreground#E5E5EA
  • button.hoverBackground#198C86
  • button.secondaryBackground#20B2AB88
  • button.secondaryHoverBackground#198C8688
  • charts.blue#007AFF
  • charts.foreground#E5E5EA
  • charts.green#34C759
  • charts.lines#230F2E
  • charts.orange#FF9500
  • charts.purple#5856D6
  • charts.red#FF3B30
  • charts.yellow#FFCC00
  • checkbox.background#2E143D
  • checkbox.border#401E63
  • checkbox.foreground#E5E5EA
  • debugConsole.errorForeground#FF3B30
  • debugConsole.infoForeground#BAF3F0
  • debugConsole.sourceForeground#34C759
  • debugConsole.warningForeground#FFCC00
  • debugConsoleInputIcon.foreground#E5E5EA
  • debugExceptionWidget.background#F2382E44
  • debugExceptionWidget.border#D93229
  • debugTokenExpression.boolean#5856D6
  • debugTokenExpression.error#FF3B30
  • debugTokenExpression.name#5AC8FA
  • debugTokenExpression.number#FF9500
  • debugTokenExpression.string#34C759
  • debugTokenExpression.value#C7C7CC
  • debugToolBar.background#230F2E
  • debugView.stateLabelBackground#20B2AB
  • debugView.stateLabelForeground#170A1F
  • debugView.valueChangedHighlight#7137BE
  • descriptionForeground#C7C7CC
  • diffEditor.insertedTextBackground#34C75955
  • diffEditor.removedTextBackground#FF3B3055
  • dropdown.background#230F2E
  • dropdown.foreground#E5E5EA
  • dropdown.listBackground#401E63
  • editor.background#170A1F
  • editor.findMatchBackground#7137BE66
  • editor.findMatchBorder#7137BE99
  • editor.findMatchHighlightBackground#20B2AB66
  • editor.findRangeHighlightBackground#2E143D99
  • editor.focusedStackFrameHighlightBackground#198C8633
  • editor.foreground#E5E5EA
  • editor.inactiveSelectionBackground#401E63AA
  • editor.lineHighlightBackground#2E143D99
  • editor.rangeHighlightBackground#2E143D99
  • editor.selectionBackground#401E63
  • editor.selectionHighlightBackground#401E6377
  • editor.stackFrameHighlightBackground#20B2AB44
  • editor.wordHighlightBackground#51288899
  • editor.wordHighlightStrongBackground#20B2AB77
  • editorBracketMatch.background#401E6399
  • editorBracketMatch.border#51288899
  • editorCodeLens.foreground#AEAEB2
  • editorCursor.foreground#E5E5EADD
  • editorError.foreground#FF3B30
  • editorGroup.border#AEAEB277
  • editorGroup.dropBackground#46206188
  • editorGroupHeader.border#2E143D
  • editorGroupHeader.noTabsBackground#230F2E
  • editorGroupHeader.tabsBackground#170A1F
  • editorGroupHeader.tabsBorder#2E143D
  • editorGutter.addedBackground#34C759
  • editorGutter.deletedBackground#FF3B30
  • editorGutter.modifiedBackground#5AC8FA
  • editorHint.foreground#20B2AB
  • editorHoverWidget.background#2E143D
  • editorHoverWidget.border#230F2E
  • editorIndentGuide.activeBackground1#20B2AB
  • editorIndentGuide.background1#401E63
  • editorInfo.foreground#007AFF
  • editorLightBulb.foreground#FFCC00
  • editorLightBulbAutoFix.foreground#5AC8FA
  • editorLineNumber.activeForeground#E5E5EA
  • editorLineNumber.foreground#E5E5EA55
  • editorLink.activeForeground#20B2AB
  • editorMarkerNavigation.background#230F2E
  • editorOverviewRuler.addedForeground#34C759
  • editorOverviewRuler.border#2E143D
  • editorOverviewRuler.bracketMatchForeground#7137BE
  • editorOverviewRuler.deletedForeground#FF3B30
  • editorOverviewRuler.errorForeground#FF3B30
  • editorOverviewRuler.findMatchForeground#20B2AB7f
  • editorOverviewRuler.infoForeground#007AFF
  • editorOverviewRuler.modifiedForeground#5AC8FA
  • editorOverviewRuler.rangeHighlightForeground#20B2AB7f
  • editorOverviewRuler.selectionHighlightForeground#51288899
  • editorOverviewRuler.warningForeground#FFCC00
  • editorOverviewRuler.wordHighlightForeground#20B2ABAA
  • editorOverviewRuler.wordHighlightStrongForeground#198C8688
  • editorPane.background#170A1F
  • editorRuler.foreground#198C86
  • editorSuggestWidget.background#230F2E
  • editorSuggestWidget.border#170A1F
  • editorSuggestWidget.highlightForeground#E5E5EA
  • editorSuggestWidget.selectedBackground#401E63
  • editorWarning.foreground#FFCC00
  • editorWhitespace.foreground#20B2AB55
  • editorWidget.background#230F2E
  • editorWidget.resizeBorder#20B2AB
  • errorForeground#C7C7CC
  • extensionBadge.remoteBackground#20B2AB
  • extensionBadge.remoteForeground#170A1F
  • extensionButton.prominentBackground#20B2AB
  • extensionButton.prominentForeground#E5E5EA
  • extensionButton.prominentHoverBackground#198c86
  • focusBorder#2E143D
  • foreground#E5E5EA
  • gitDecoration.addedResourceForeground#8D8CE3
  • gitDecoration.conflictingResourceForeground#FFC370
  • gitDecoration.deletedResourceForeground#FF7770
  • gitDecoration.ignoredResourceForeground#FFFFFF4f
  • gitDecoration.modifiedResourceForeground#88D7FB
  • gitDecoration.renamedResourceForeground#8D8CE3
  • gitDecoration.stageDeletedResourceForeground#FF7770
  • gitDecoration.stageModifiedResourceForeground#88D7FB
  • gitDecoration.submoduleResourceForeground#8D8CE3
  • gitDecoration.untrackedResourceForeground#7DDE97
  • icon.foreground#20B2AB
  • input.background#230F2E
  • input.border#2E143D
  • input.foreground#E5E5EA
  • input.placeholderForeground#C7C7CC
  • inputOption.activeBackground#401E63
  • inputOption.activeForeground#E5E5EA
  • inputValidation.errorBackground#D93229
  • inputValidation.errorBorder#F2382E
  • inputValidation.errorForeground#E5E5EA
  • inputValidation.infoBackground#20B2AB
  • inputValidation.infoBorder#198C86
  • inputValidation.infoForeground#E5E5EA
  • inputValidation.warningBackground#FFCC00
  • inputValidation.warningBorder#E0B400
  • inputValidation.warningForeground#E5E5EA
  • list.activeSelectionBackground#401E63
  • list.activeSelectionForeground#E5E5EA
  • list.deemphasizedForeground#C7C7CC
  • list.dropBackground#2E143D
  • list.errorForeground#F2382E
  • list.focusBackground#401E63
  • list.focusForeground#E5E5EA
  • list.highlightForeground#20B2AB
  • list.hoverBackground#2E143D
  • list.hoverForeground#E5E5EA
  • list.inactiveSelectionBackground#2E143D
  • list.inactiveSelectionForeground#E5E5EA
  • list.invalidItemForeground#D93229
  • list.warningForeground#FFCC00
  • listFilterWidget.background#401E63
  • listFilterWidget.noMatchesOutline#F2382E
  • listFilterWidget.outline#20B2AB
  • menu.background#230F2E
  • menu.border#170A1F
  • menu.foreground#C7C7CC
  • menu.selectionBackground#401E63
  • menu.selectionForeground#E5E5EA
  • menu.separatorBackground#7137BE
  • menubar.selectionBackground#2E143D
  • menubar.selectionBorder#2E143D
  • menubar.selectionForeground#E5E5EA
  • merge.currentContentBackground#7137BE44
  • merge.currentHeaderBackground#7137BEAA
  • merge.incomingContentBackground#20B2AB44
  • merge.incomingHeaderBackground#20B2ABAA
  • minimap.findMatchHighlight#20B2AB66
  • minimap.selectionHighlight#401E6377
  • minimapGutter.addedBackground#34C759
  • minimapGutter.deletedBackground#FF3B30
  • minimapGutter.modifiedBackground#5AC8FA
  • notificationCenterHeader.background#2E143D
  • notificationLink.foreground#7137BE
  • notifications.background#230F2E
  • notificationsErrorIcon.foreground#F2382E
  • notificationsInfoIcon.foreground#20B2AB
  • notificationsWarningIcon.foreground#FFCC00
  • panel.background#2E143D
  • panel.border#170A1F
  • panelInput.border#401E63
  • panelTitle.activeBorder#20B2AB
  • panelTitle.activeForeground#E5E5EA
  • panelTitle.inactiveForeground#AEAEB2
  • peekView.border#20B2AB
  • peekViewEditor.background#230F2E
  • peekViewEditor.matchHighlightBackground#7137BE88
  • peekViewResult.background#2E143D
  • peekViewResult.fileForeground#C7C7CC
  • peekViewResult.lineForeground#AEAEB2
  • peekViewResult.matchHighlightBackground#7137BE88
  • peekViewResult.selectionBackground#512888AA
  • peekViewResult.selectionForeground#E5E5EA
  • peekViewTitle.background#230F2E
  • peekViewTitleDescription.foreground#C7C7CC
  • peekViewTitleLabel.foreground#E5E5EA
  • pickerGroup.border#20B2AB
  • pickerGroup.foreground#C7C7CC
  • progressBar.background#20B2AB
  • scrollbar.shadow#401E63
  • scrollbarSlider.activeBackground#51288899
  • scrollbarSlider.background#51288888
  • scrollbarSlider.hoverBackground#512888aa
  • selection.background#7137be
  • settings.headerForeground#C7C7CC
  • sideBar.background#230F2E
  • sideBar.border#170A1F
  • sideBar.dropBackground#46206188
  • sideBar.foreground#AEAEB2
  • sideBarSectionHeader.background#2E143D
  • sideBarSectionHeader.border#230F2E
  • sideBarSectionHeader.foreground#E5E5EA
  • sideBarTitle.foreground#C7C7CC
  • statusBar.background#198C86
  • statusBar.border#170A1F
  • statusBar.debuggingBackground#7137BE
  • statusBar.debuggingForeground#E5E5EA
  • statusBar.foreground#E5E5EA
  • statusBar.noFolderBackground#230F2E
  • statusBarItem.activeBackground#20B2AB
  • statusBarItem.hoverBackground#20B2AB88
  • statusBarItem.prominentBackground#20B2AB
  • statusBarItem.prominentHoverBackground#20B2AB88
  • tab.activeBackground#2E143D
  • tab.activeBorder#20B2AB
  • tab.activeForeground#C7C7CC
  • tab.activeModifiedBorder#198C86
  • tab.border#170A1F
  • tab.hoverForeground#E5E5EA
  • tab.inactiveBackground#230F2E
  • tab.inactiveForeground#AEAEB2
  • tab.inactiveModifiedBorder#AEAEB2
  • tab.lastPinnedBorder#170A1F
  • tab.unfocusedActiveBorder#198C86
  • tab.unfocusedActiveForeground#C7C7CC
  • tab.unfocusedHoverForeground#E5E5EA
  • tab.unfocusedInactiveForeground#AEAEB2
  • terminal.ansiBlack#8E8E93
  • terminal.ansiBlue#007AFF
  • terminal.ansiBrightBlack#8E8E93
  • terminal.ansiBrightBlue#007AFF
  • terminal.ansiBrightCyan#5AC8FA
  • terminal.ansiBrightGreen#34C759
  • terminal.ansiBrightMagenta#AF52DE
  • terminal.ansiBrightRed#FF3B30
  • terminal.ansiBrightWhite#E5E5EA
  • terminal.ansiBrightYellow#FFCC00
  • terminal.ansiCyan#5AC8FA
  • terminal.ansiGreen#34C759
  • terminal.ansiMagenta#AF52DE
  • terminal.ansiRed#FF3B30
  • terminal.ansiWhite#C7C7CC
  • terminal.ansiYellow#FFCC00
  • terminal.background#230F2E
  • terminal.foreground#E5E5EA
  • terminal.selectionBackground#512888
  • textBlockQuote.background#2E143D
  • textCodeBlock.background#2E143D
  • textLink.activeForeground#198C86
  • textLink.foreground#20B2AB
  • textPreformat.foreground#FFCC00
  • textSeparator.foreground#7137BE
  • titleBar.activeBackground#401E63
  • titleBar.activeForeground#E5E5EA
  • titleBar.border#2E143D
  • titleBar.inactiveBackground#2E143D
  • titleBar.inactiveForeground#C7C7CC
  • tree.indentGuidesStroke#512888
  • walkThrough.embeddedEditorBackground#230F2E
  • widget.shadow#51288888
  • window.activeBorder#512888
  • window.inactiveBorder#401E63

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5C7884italic
variable, string constant.other.placeholder#FF6169—
variable.css, variable.argument.css#C8FF75—
constant.other.color#FFFFFF—
invalid, invalid.illegal#F2382Estrikethrough
keyword, storage.type, storage.modifier#CC80FF—
keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#8ADEFF—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#FF6169—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#80A8FF—
meta.block variable.other#FF6169—
support.other.variable, string.other.link#FF6169—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#FF8A66—
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#C8FF75—
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#FFBF47—
support.type#8ADEFF—
source.css support.type.property-name, source.scss support.type.property-name, source.sass support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#8ADEFF—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#FF526F—
variable.language#FF526Fitalic
entity.name.method.js#80A8FFitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#80A8FF—
entity.other.attribute-name#CC80FF—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#FFBF47italic
entity.other.attribute-name.class#FFBF47—
source.sass keyword.control#80A8FF—
markup.inserted#C8FF75—
markup.deleted#FF526F—
markup.changed#CC80FF—
string.regexp#8ADEFF—
constant.character.escape#8ADEFF—
*url*, *link*, *uri*—underline
storage.modifier.async#FFBF47—
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#80A8FFitalic
meta.object-literal.key.js, support.variable.property.js#8ADEFF—
source.js constant.other.object.key.js string.unquoted.label.js#FF526Fitalic
source.json meta.structure.dictionary.json support.type.property-name.json#CC80FF—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#FFBF47—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#FF8A66—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#FF526F—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#D4725E—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#80A8FF—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#FF6169—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#CC80FF—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#C8FF75—
text.html.markdown, punctuation.definition.list_item.markdown#F0FFFF—
text.html.markdown markup.inline.raw.markdown#CC80FF—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#47799E—
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#C8FF75—
markup.italic#FF6169italic
markup.bold, markup.bold string#FF6169bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#FF6169bold
markup.underline#FF8A66underline
markup.quote punctuation.definition.blockquote.markdown#47799E—
markup.quote—italic
string.other.link.title.markdown#80A8FF—
string.other.link.description.title.markdown#CC80FF—
constant.other.reference.link.markdown#FFBF47—
markup.raw.block#CC80FF—
markup.raw.block.fenced.markdown#00000050—
punctuation.definition.fenced.markdown#00000050—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#F0FFFF—
variable.language.fenced.markdown#47799E—
meta.separator#47799Ebold
meta.embedded.block#CC80FF—
fenced_code.block.language#FFBF47—
markup.inline.raw.string#CC80FF—
markup.table#F0FFFF—
keyword.other#CC80FF—
text.variable#FFBF47—
keyword.operator#8ADEFF—
punctuation.definition.string, text.bracketed#C8FF75—