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.quoteitalic
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