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#28385C
  • activityBar.border#28385C60
  • activityBar.foreground#BDB9AE
  • activityBarBadge.background#EC5F67
  • activityBarBadge.foreground#28385C
  • badge.background#28385C30
  • badge.foreground#BF83C0
  • breadcrumb.activeSelectionForeground#BF83C0
  • breadcrumb.background#28385C
  • breadcrumb.focusForeground#BDB9AE
  • breadcrumb.foreground#FF55FF
  • breadcrumbPicker.background#28385C
  • button.background#BF83C050
  • contrastBorder#BF83C040
  • debugToolBar.background#28385C
  • diffEditor.insertedTextBackground#83E8E415
  • diffEditor.removedTextBackground#FDC25320
  • dropdown.background#28385C
  • dropdown.border#DCD7CB10
  • editor.background#28385C
  • editor.findMatchBackground#28385C
  • editor.findMatchBorder#BF83C0
  • editor.findMatchHighlightBackground#BF83C093
  • editor.findMatchHighlightBorder#DCD7CB30
  • editor.foreground#BDB9AE
  • editor.lineHighlightBackground#28385C50
  • editor.selectionBackground#EC5F6730
  • editor.selectionHighlightBackground#BF83C06b
  • editor.selectionHighlightBorder#EC5F67f0
  • editorBracketMatch.background#28385C
  • editorBracketMatch.border#57C2C07f
  • editorCursor.foreground#57C2C0
  • editorError.foreground#FDC25370
  • editorGroup.border#28385C30
  • editorGroupHeader.tabsBackground#28385C
  • editorGutter.addedBackground#83E8E460
  • editorGutter.deletedBackground#FDC25360
  • editorGutter.modifiedBackground#EC5F6760
  • editorHoverWidget.background#28385C
  • editorHoverWidget.border#DCD7CB10
  • editorIndentGuide.activeBackground#374C7E
  • editorIndentGuide.background#374C7E70
  • editorInfo.foreground#EC5F6770
  • editorLineNumber.activeForeground#EC5F67
  • editorLineNumber.foreground#BF83C0c0
  • editorLink.activeForeground#BDB9AE
  • editorMarkerNavigation.background#BDB9AE05
  • editorOverviewRuler.border#28385C
  • editorOverviewRuler.errorForeground#FDC25340
  • editorOverviewRuler.findMatchForeground#BF83C0
  • editorOverviewRuler.infoForeground#EC5F6740
  • editorOverviewRuler.warningForeground#57C2C070
  • editorRuler.foreground#374C7E
  • editorSuggestWidget.background#28385C
  • editorSuggestWidget.border#DCD7CB10
  • editorSuggestWidget.foreground#BDB9AE
  • editorSuggestWidget.highlightForeground#57C2C0
  • editorSuggestWidget.selectedBackground#BF83C020
  • editorWarning.foreground#83E8E4
  • editorWhitespace.foreground#BDB9AE40
  • editorWidget.background#28385C
  • editorWidget.border#57C2C0
  • editorWidget.resizeBorder#BF83C0
  • extensionButton.prominentBackground#83E8E490
  • extensionButton.prominentHoverBackground#FDC253
  • focusBorder#DCD7CB00
  • gitDecoration.conflictingResourceForeground#57C2C0
  • gitDecoration.deletedResourceForeground#FDC253
  • gitDecoration.ignoredResourceForeground#BF83C0
  • gitDecoration.modifiedResourceForeground#FF55FF
  • gitDecoration.untrackedResourceForeground#EC5F67
  • input.background#1D2943
  • input.border#DCD7CB10
  • input.foreground#BDB9AE
  • input.placeholderForeground#BDB9AE60
  • inputOption.activeBackground#BDB9AE30
  • inputOption.activeBorder#BDB9AE30
  • inputValidation.errorBorder#FDC25350
  • inputValidation.infoBorder#EC5F6750
  • inputValidation.warningBorder#57C2C050
  • list.activeSelectionBackground#28385C
  • list.activeSelectionForeground#BF83C0
  • list.focusBackground#1D2943
  • list.focusForeground#EC5F67
  • list.highlightForeground#BF83C0
  • list.hoverBackground#374C7E
  • list.hoverForeground#DCD7CB
  • list.inactiveSelectionBackground#28385C30
  • list.inactiveSelectionForeground#BF83C0
  • list.warningForeground#57C2C0
  • listFilterWidget.background#28385C30
  • listFilterWidget.noMatchesOutline#28385C30
  • listFilterWidget.outline#28385C30
  • menu.background#28385Cf8
  • menu.border#BF83C050
  • menu.foreground#BDB9AE
  • menu.selectionBackground#1D2943
  • menu.selectionBorder#28385C30
  • menu.selectionForeground#BDB9AE
  • menu.separatorBackground#BDB9AE
  • menubar.selectionBackground#1D2943
  • menubar.selectionBorder#BF83C050
  • menubar.selectionForeground#BDB9AE
  • minimap.background#28385C
  • minimapGutter.addedBackground#FDC253
  • minimapGutter.deletedBackground#57C2C0
  • minimapGutter.modifiedBackground#83E8E4
  • minimapSlider.activeBackground#83E8E4b0
  • minimapSlider.background#83E8E480
  • minimapSlider.hoverBackground#83E8E4a0
  • notificationLink.foreground#BF83C0
  • notifications.background#28385C
  • notifications.foreground#BDB9AE
  • panel.background#28385C
  • panel.border#28385C60
  • panelTitle.activeBorder#BF83C0
  • panelTitle.activeForeground#DCD7CB
  • panelTitle.inactiveForeground#BDB9AE
  • peekView.border#28385C30
  • peekViewEditor.background#BDB9AE05
  • peekViewEditor.matchHighlightBackground#BF83C050
  • peekViewEditorGutter.background#BDB9AE05
  • peekViewResult.background#BDB9AE05
  • peekViewResult.matchHighlightBackground#BF83C050
  • peekViewResult.selectionBackground#BF83C070
  • peekViewTitle.background#BDB9AE05
  • peekViewTitleDescription.foreground#BDB9AE60
  • pickerGroup.foreground#BF83C0
  • progressBar.background#BF83C0
  • scrollbar.shadow#28385C00
  • scrollbarSlider.activeBackground#BF83C0cc
  • scrollbarSlider.background#BF83C0bb
  • scrollbarSlider.hoverBackground#BF83C0ee
  • selection.background#BF83C0
  • settings.checkboxBackground#28385C
  • settings.checkboxForeground#BDB9AE
  • settings.dropdownBackground#28385C
  • settings.dropdownForeground#BDB9AE
  • settings.headerForeground#BF83C0
  • settings.modifiedItemIndicator#BF83C0
  • settings.numberInputBackground#28385C
  • settings.numberInputForeground#BDB9AE
  • settings.textInputBackground#28385C
  • settings.textInputForeground#BDB9AE
  • sideBar.background#28385C
  • sideBar.border#BF83C050
  • sideBar.foreground#EC5F67
  • sideBarSectionHeader.background#28385C
  • sideBarSectionHeader.border#28385C60
  • sideBarSectionHeader.foreground#EC5F67
  • sideBarTitle.foreground#BDB9AE
  • statusBar.background#28385C
  • statusBar.border#28385C60
  • statusBar.debuggingBackground#57C2C0
  • statusBar.debuggingForeground#DCD7CB
  • statusBar.foreground#BDB9AE
  • statusBar.noFolderBackground#28385C
  • statusBarItem.hoverBackground#BF83C020
  • statusBarItem.remoteBackground#BF83C0
  • statusBarItem.remoteForeground#28385C
  • tab.activeBackground#BF83C050
  • tab.activeBorder#BF83C0
  • tab.activeForeground#DCD7CB
  • tab.activeModifiedBorder#BF83C0
  • tab.border#28385C
  • tab.inactiveBackground#BF83C020
  • tab.inactiveForeground#BDB9AEaf
  • tab.unfocusedActiveBackground#BF83C040
  • tab.unfocusedActiveBorder#BF83C0
  • tab.unfocusedActiveForeground#BDB9AE
  • tab.unfocusedInactiveBackground#BF83C010
  • tab.unfocusedInactiveForeground#BDB9AE7f
  • terminal.ansiBlack#28385C
  • terminal.ansiBlue#EC5F67
  • terminal.ansiBrightBlack#BF83C0
  • terminal.ansiBrightBlue#EC5F67
  • terminal.ansiBrightCyan#FF7777
  • terminal.ansiBrightGreen#83E8E4
  • terminal.ansiBrightMagenta#57C2C0
  • terminal.ansiBrightRed#FDC253
  • terminal.ansiBrightWhite#DCD7CB
  • terminal.ansiBrightYellow#57C2C0
  • terminal.ansiCyan#FF7777
  • terminal.ansiGreen#83E8E4
  • terminal.ansiMagenta#57C2C0
  • terminal.ansiRed#FDC253
  • terminal.ansiWhite#DCD7CB
  • terminal.ansiYellow#57C2C0
  • terminalCursor.background#28385C
  • terminalCursor.foreground#57C2C0
  • textLink.activeForeground#BDB9AE
  • textLink.foreground#BF83C0
  • titleBar.activeBackground#28385C
  • titleBar.activeForeground#BDB9AE
  • titleBar.border#28385C60
  • titleBar.inactiveBackground#28385C
  • titleBar.inactiveForeground#BF83C0
  • tree.indentGuidesStroke#374C7E
  • widget.shadow#28385C30

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
variable, string constant.other.placeholder, invalid.deprecated, keyword, storage.type, storage.modifier#57C2C0
variable, string constant.other.placeholder, entity.name.function, punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scssitalic
punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scss#83E8E4
constant.other.php#57C2C0
constant.other.color#DCD7CB
invalid, invalid.illegal#FDC253
Keyword, Storageitalic
keyword.control, constant.other.color, punctuation.definition.tag, punctuation, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, entity.name.tag.reference.scss#A7A8AF
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, entity.name.type.module.js#FF55FF
keyword.control.at-rule, punctuation.terminator.rule.css, keyword.control.operator, punctuation.definition.entity.css, keyword.operator.assignment.js, punctuation.separator.comma.js, punctuation.definition.string.begin.js, punctuation.definition.string.end.js, punctuation.definition.binding-pattern.object.js#BDB9AE
punctuation.definition, string.quoted.single.scss#A7A8AF
keyword.controlbold
comment.line.scss, comment.line.double-slash.js, punctuation.definition.comment.scss, punctuation.definition.comment.js, punctuation.definition.comment.html, comment.block.html#6D6F7C
text.html.derivative#A7A8AF
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#BDB9AE
entity.name.tag.htmlbold
variable.parameter.js, variable.parameter.keyframe-list.css#57C2C0
variable.other.object.js, storage.type.js, string.other.link.title.markdown, variable.other.readwrite.js, variable.other.property.js#FF55FF
string, string.quoted.double.html, variable.other.constant.js, variable.other.object.property.js, string.quoted.double.json, markup.fenced_code.block.markdown, markup.inline.raw.string.markdown, variable.function, keyword.other.special-method, entity.name.function, markup.bold, markup.bold.markdown, markup.italic.markdown, meta.class-method.js entity.name.function.js, variable.function.constructor, entity.name.tag.other.html, entity.name.tag.block.any.html, source.sass keyword.control#EC5F67
punctuation.definition.string.begin.html, punctuation.definition.string.end.html#FF7777
support.other.variable, string.other.link, markup.table#BDB9AE
constant.numeric, constant.language, constant.character, constant.escape, keyword.other.unit, keyword.other, punctuation.separator.key-value.html#57C2C0
variable.parameter.function.language.special, variable.parameter#FDC253
constant.other.symbol, constant.other.key, entity.other.inherited-class, keyword.other.unit, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly, constant.other.object.key.js, string.unquoted.label.js#83E8E4
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, entity.other.attribute-name.html#57C2C0
support.type#B2CCD6
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#FF55FF
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#FDC253
entity.name.method.js, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#EC5F67italic
entity.other.attribute-name, support.function#57C2C0
entity.other.attribute-name.id, entity.other.attribute-name.class, entity.other.attribute-name.pseudo-class, entity.name.tag.css, keyword.control.conditional.js, support.constant, entity.other.attribute-name.html, string.quoted.single.js, storage.type.function.js, meta.object-literal.key#BDB9AE
source.scss keyword.control#57C2C0
markup.inserted#83E8E4
markup.deleted#FDC253
markup.changed#57C2C0
string.regexp#FF7777
constant.character.escape#FF7777
*url*, *link*, *uri*underline
source.js constant.other.object.key.js string.unquoted.label.js#BDB9AEitalic
support.type.property-name.json#BDB9AE
text.html.markdown, punctuation.definition.list_item.markdown#BDB9AE
text.html.markdown markup.inline.raw.markdown#57C2C0
text.html.markdown markup.inline.raw.markdown, punctuation.definition.raw.markdown#BF83C050
text.html.markdown meta.dummy.line-break
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, entity.name.section.markdown#FF55FFbold
markup.underline#EC5F67underline
markup.strike
markup.quote punctuation.definition.blockquote.markdown#BF83C050
markup.quoteitalic
string.other.link.description.title.markdown#57C2C0
constant.other.reference.link.markdown#57C2C0
markup.raw.block#57C2C0
punctuation.definition.raw.markdown, punctuation.definition.markdown#FF7777
variable.language.fenced.markdown#BF83C0
meta.separator#A7A8AFbold
token.info-token#BF83C0
token.warn-token#57C2C0
token.error-token#FF293B
token.debug-token#FF7777