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#023047
  • activityBar.border#02304760
  • activityBar.foreground#EDF6F9
  • activityBarBadge.background#BDE0FE
  • activityBarBadge.foreground#023047
  • badge.background#02304730
  • badge.foreground#A0C4FF
  • breadcrumb.activeSelectionForeground#A0C4FF
  • breadcrumb.background#023047
  • breadcrumb.focusForeground#EDF6F9
  • breadcrumb.foreground#9BF6FF
  • breadcrumbPicker.background#023047
  • button.background#A0C4FF50
  • contrastBorder#A0C4FF40
  • debugToolBar.background#023047
  • diffEditor.insertedTextBackground#1D355715
  • diffEditor.removedTextBackground#FFC6FF20
  • dropdown.background#023047
  • dropdown.border#FFFFFC10
  • editor.background#023047
  • editor.findMatchBackground#023047
  • editor.findMatchBorder#A0C4FF
  • editor.findMatchHighlightBackground#A0C4FF93
  • editor.findMatchHighlightBorder#FFFFFC30
  • editor.foreground#EDF6F9
  • editor.lineHighlightBackground#02304750
  • editor.selectionBackground#BDE0FE30
  • editor.selectionHighlightBackground#A0C4FF6b
  • editor.selectionHighlightBorder#BDE0FEf0
  • editorBracketMatch.background#023047
  • editorBracketMatch.border#BDB2FF7f
  • editorCursor.foreground#BDB2FF
  • editorError.foreground#FFC6FF70
  • editorGroup.border#02304730
  • editorGroupHeader.tabsBackground#023047
  • editorGutter.addedBackground#1D355760
  • editorGutter.deletedBackground#FFC6FF60
  • editorGutter.modifiedBackground#BDE0FE60
  • editorHoverWidget.background#023047
  • editorHoverWidget.border#FFFFFC10
  • editorIndentGuide.activeBackground#8ECAE6
  • editorIndentGuide.background#8ECAE670
  • editorInfo.foreground#BDE0FE70
  • editorLineNumber.activeForeground#BDE0FE
  • editorLineNumber.foreground#A0C4FFc0
  • editorLink.activeForeground#EDF6F9
  • editorMarkerNavigation.background#EDF6F905
  • editorOverviewRuler.border#023047
  • editorOverviewRuler.errorForeground#FFC6FF40
  • editorOverviewRuler.findMatchForeground#A0C4FF
  • editorOverviewRuler.infoForeground#BDE0FE40
  • editorOverviewRuler.warningForeground#BDB2FF70
  • editorRuler.foreground#8ECAE6
  • editorSuggestWidget.background#023047
  • editorSuggestWidget.border#FFFFFC10
  • editorSuggestWidget.foreground#EDF6F9
  • editorSuggestWidget.highlightForeground#BDB2FF
  • editorSuggestWidget.selectedBackground#A0C4FF20
  • editorWarning.foreground#1D3557
  • editorWhitespace.foreground#EDF6F940
  • editorWidget.background#023047
  • editorWidget.border#BDB2FF
  • editorWidget.resizeBorder#A0C4FF
  • extensionButton.prominentBackground#1D355790
  • extensionButton.prominentHoverBackground#FFC6FF
  • focusBorder#FFFFFC00
  • gitDecoration.conflictingResourceForeground#BDB2FF
  • gitDecoration.deletedResourceForeground#FFC6FF
  • gitDecoration.ignoredResourceForeground#A0C4FF
  • gitDecoration.modifiedResourceForeground#9BF6FF
  • gitDecoration.untrackedResourceForeground#BDE0FE
  • input.background#219EBC
  • input.border#FFFFFC10
  • input.foreground#EDF6F9
  • input.placeholderForeground#EDF6F960
  • inputOption.activeBackground#EDF6F930
  • inputOption.activeBorder#EDF6F930
  • inputValidation.errorBorder#FFC6FF50
  • inputValidation.infoBorder#BDE0FE50
  • inputValidation.warningBorder#BDB2FF50
  • list.activeSelectionBackground#023047
  • list.activeSelectionForeground#A0C4FF
  • list.focusBackground#219EBC
  • list.focusForeground#BDE0FE
  • list.highlightForeground#A0C4FF
  • list.hoverBackground#8ECAE6
  • list.hoverForeground#FFFFFC
  • list.inactiveSelectionBackground#02304730
  • list.inactiveSelectionForeground#A0C4FF
  • list.warningForeground#BDB2FF
  • listFilterWidget.background#02304730
  • listFilterWidget.noMatchesOutline#02304730
  • listFilterWidget.outline#02304730
  • menu.background#023047f8
  • menu.border#A0C4FF50
  • menu.foreground#EDF6F9
  • menu.selectionBackground#219EBC
  • menu.selectionBorder#02304730
  • menu.selectionForeground#EDF6F9
  • menu.separatorBackground#EDF6F9
  • menubar.selectionBackground#219EBC
  • menubar.selectionBorder#A0C4FF50
  • menubar.selectionForeground#EDF6F9
  • minimap.background#023047
  • minimapGutter.addedBackground#FFC6FF
  • minimapGutter.deletedBackground#BDB2FF
  • minimapGutter.modifiedBackground#1D3557
  • minimapSlider.activeBackground#1D3557b0
  • minimapSlider.background#1D355780
  • minimapSlider.hoverBackground#1D3557a0
  • notificationLink.foreground#A0C4FF
  • notifications.background#023047
  • notifications.foreground#EDF6F9
  • panel.background#023047
  • panel.border#02304760
  • panelTitle.activeBorder#A0C4FF
  • panelTitle.activeForeground#FFFFFC
  • panelTitle.inactiveForeground#EDF6F9
  • peekView.border#02304730
  • peekViewEditor.background#EDF6F905
  • peekViewEditor.matchHighlightBackground#A0C4FF50
  • peekViewEditorGutter.background#EDF6F905
  • peekViewResult.background#EDF6F905
  • peekViewResult.matchHighlightBackground#A0C4FF50
  • peekViewResult.selectionBackground#A0C4FF70
  • peekViewTitle.background#EDF6F905
  • peekViewTitleDescription.foreground#EDF6F960
  • pickerGroup.foreground#A0C4FF
  • progressBar.background#A0C4FF
  • scrollbar.shadow#02304700
  • scrollbarSlider.activeBackground#A0C4FFcc
  • scrollbarSlider.background#A0C4FFbb
  • scrollbarSlider.hoverBackground#A0C4FFee
  • selection.background#A0C4FF
  • settings.checkboxBackground#023047
  • settings.checkboxForeground#EDF6F9
  • settings.dropdownBackground#023047
  • settings.dropdownForeground#EDF6F9
  • settings.headerForeground#A0C4FF
  • settings.modifiedItemIndicator#A0C4FF
  • settings.numberInputBackground#023047
  • settings.numberInputForeground#EDF6F9
  • settings.textInputBackground#023047
  • settings.textInputForeground#EDF6F9
  • sideBar.background#023047
  • sideBar.border#A0C4FF50
  • sideBar.foreground#BDE0FE
  • sideBarSectionHeader.background#023047
  • sideBarSectionHeader.border#02304760
  • sideBarSectionHeader.foreground#BDE0FE
  • sideBarTitle.foreground#EDF6F9
  • statusBar.background#83C5BE
  • statusBar.border#02304760
  • statusBar.debuggingBackground#BDB2FF
  • statusBar.debuggingForeground#FFFFFC
  • statusBar.foreground#EDF6F9
  • statusBar.noFolderBackground#023047
  • statusBarItem.hoverBackground#A0C4FF20
  • statusBarItem.remoteBackground#A0C4FF
  • statusBarItem.remoteForeground#023047
  • tab.activeBackground#A0C4FF50
  • tab.activeBorder#A0C4FF
  • tab.activeForeground#FFFFFC
  • tab.activeModifiedBorder#A0C4FF
  • tab.border#023047
  • tab.inactiveBackground#A0C4FF20
  • tab.inactiveForeground#EDF6F9af
  • tab.unfocusedActiveBackground#A0C4FF40
  • tab.unfocusedActiveBorder#A0C4FF
  • tab.unfocusedActiveForeground#EDF6F9
  • tab.unfocusedInactiveBackground#A0C4FF10
  • tab.unfocusedInactiveForeground#EDF6F97f
  • terminal.ansiBlack#023047
  • terminal.ansiBlue#BDE0FE
  • terminal.ansiBrightBlack#A0C4FF
  • terminal.ansiBrightBlue#BDE0FE
  • terminal.ansiBrightCyan#E8E8E4
  • terminal.ansiBrightGreen#1D3557
  • terminal.ansiBrightMagenta#BDB2FF
  • terminal.ansiBrightRed#FFC6FF
  • terminal.ansiBrightWhite#FFFFFC
  • terminal.ansiBrightYellow#BDB2FF
  • terminal.ansiCyan#E8E8E4
  • terminal.ansiGreen#1D3557
  • terminal.ansiMagenta#BDB2FF
  • terminal.ansiRed#FFC6FF
  • terminal.ansiWhite#FFFFFC
  • terminal.ansiYellow#BDB2FF
  • terminalCursor.background#023047
  • terminalCursor.foreground#BDB2FF
  • textLink.activeForeground#EDF6F9
  • textLink.foreground#A0C4FF
  • titleBar.activeBackground#023047
  • titleBar.activeForeground#EDF6F9
  • titleBar.border#02304760
  • titleBar.inactiveBackground#023047
  • titleBar.inactiveForeground#A0C4FF
  • tree.indentGuidesStroke#8ECAE6
  • widget.shadow#02304730

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
variable, string constant.other.placeholder, invalid.deprecated, keyword, storage.type, storage.modifier#BDB2FF
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#1D3557
constant.other.php#BDB2FF
constant.other.color#FFFFFC
invalid, invalid.illegal#FFC6FF
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#9BF6FF
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#EDF6F9
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#EDF6F9
entity.name.tag.htmlbold
variable.parameter.js, variable.parameter.keyframe-list.css#BDB2FF
variable.other.object.js, storage.type.js, string.other.link.title.markdown, variable.other.readwrite.js, variable.other.property.js#9BF6FF
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#BDE0FE
punctuation.definition.string.begin.html, punctuation.definition.string.end.html#E8E8E4
support.other.variable, string.other.link, markup.table#EDF6F9
constant.numeric, constant.language, constant.character, constant.escape, keyword.other.unit, keyword.other, punctuation.separator.key-value.html#BDB2FF
variable.parameter.function.language.special, variable.parameter#FFC6FF
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#1D3557
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#BDB2FF
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#9BF6FF
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#FFC6FF
entity.name.method.js, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#BDE0FEitalic
entity.other.attribute-name, support.function#BDB2FF
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#EDF6F9
source.scss keyword.control#BDB2FF
markup.inserted#1D3557
markup.deleted#FFC6FF
markup.changed#BDB2FF
string.regexp#E8E8E4
constant.character.escape#E8E8E4
*url*, *link*, *uri*underline
source.js constant.other.object.key.js string.unquoted.label.js#EDF6F9italic
support.type.property-name.json#EDF6F9
text.html.markdown, punctuation.definition.list_item.markdown#EDF6F9
text.html.markdown markup.inline.raw.markdown#BDB2FF
text.html.markdown markup.inline.raw.markdown, punctuation.definition.raw.markdown#A0C4FF50
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#9BF6FFbold
markup.underline#BDE0FEunderline
markup.strike
markup.quote punctuation.definition.blockquote.markdown#A0C4FF50
markup.quoteitalic
string.other.link.description.title.markdown#BDB2FF
constant.other.reference.link.markdown#BDB2FF
markup.raw.block#BDB2FF
punctuation.definition.raw.markdown, punctuation.definition.markdown#E8E8E4
variable.language.fenced.markdown#A0C4FF
meta.separator#A7A8AFbold
token.info-token#A0C4FF
token.warn-token#BDB2FF
token.error-token#FF293B
token.debug-token#E8E8E4