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#0A181F
  • activityBar.border#0A181F60
  • activityBar.foreground#ABC7D9
  • activityBarBadge.background#AFB9D4
  • activityBarBadge.foreground#0A181F
  • badge.background#0A181F30
  • badge.foreground#936281
  • breadcrumb.activeSelectionForeground#936281
  • breadcrumb.background#0A181F
  • breadcrumb.focusForeground#ABC7D9
  • breadcrumb.foreground#BE9DB1
  • breadcrumbPicker.background#0A181F
  • button.background#93628150
  • contrastBorder#93628140
  • debugToolBar.background#0A181F
  • diffEditor.insertedTextBackground#F9817715
  • diffEditor.removedTextBackground#A5FFD620
  • dropdown.background#0A181F
  • dropdown.border#D5E3EC10
  • editor.background#0A181F
  • editor.findMatchBackground#0A181F
  • editor.findMatchBorder#936281
  • editor.findMatchHighlightBackground#93628193
  • editor.findMatchHighlightBorder#D5E3EC30
  • editor.foreground#ABC7D9
  • editor.lineHighlightBackground#0A181F50
  • editor.selectionBackground#AFB9D430
  • editor.selectionHighlightBackground#9362816b
  • editor.selectionHighlightBorder#AFB9D4f0
  • editorBracketMatch.background#0A181F
  • editorBracketMatch.border#F5928F7f
  • editorCursor.foreground#F5928F
  • editorError.foreground#A5FFD670
  • editorGroup.border#0A181F30
  • editorGroupHeader.tabsBackground#0A181F
  • editorGutter.addedBackground#F9817760
  • editorGutter.deletedBackground#A5FFD660
  • editorGutter.modifiedBackground#AFB9D460
  • editorHoverWidget.background#0A181F
  • editorHoverWidget.border#D5E3EC10
  • editorIndentGuide.activeBackground#23546C
  • editorIndentGuide.background#23546C70
  • editorInfo.foreground#AFB9D470
  • editorLineNumber.activeForeground#AFB9D4
  • editorLineNumber.foreground#936281c0
  • editorLink.activeForeground#ABC7D9
  • editorMarkerNavigation.background#ABC7D905
  • editorOverviewRuler.border#0A181F
  • editorOverviewRuler.errorForeground#A5FFD640
  • editorOverviewRuler.findMatchForeground#936281
  • editorOverviewRuler.infoForeground#AFB9D440
  • editorOverviewRuler.warningForeground#F5928F70
  • editorRuler.foreground#23546C
  • editorSuggestWidget.background#0A181F
  • editorSuggestWidget.border#D5E3EC10
  • editorSuggestWidget.foreground#ABC7D9
  • editorSuggestWidget.highlightForeground#F5928F
  • editorSuggestWidget.selectedBackground#93628120
  • editorWarning.foreground#F98177
  • editorWhitespace.foreground#ABC7D940
  • editorWidget.background#0A181F
  • editorWidget.border#F5928F
  • editorWidget.resizeBorder#936281
  • extensionButton.prominentBackground#F9817790
  • extensionButton.prominentHoverBackground#A5FFD6
  • focusBorder#D5E3EC00
  • gitDecoration.conflictingResourceForeground#F5928F
  • gitDecoration.deletedResourceForeground#A5FFD6
  • gitDecoration.ignoredResourceForeground#936281
  • gitDecoration.modifiedResourceForeground#BE9DB1
  • gitDecoration.untrackedResourceForeground#AFB9D4
  • input.background#23546C
  • input.border#D5E3EC10
  • input.foreground#ABC7D9
  • input.placeholderForeground#ABC7D960
  • inputOption.activeBackground#ABC7D930
  • inputOption.activeBorder#ABC7D930
  • inputValidation.errorBorder#A5FFD650
  • inputValidation.infoBorder#AFB9D450
  • inputValidation.warningBorder#F5928F50
  • list.activeSelectionBackground#0A181F
  • list.activeSelectionForeground#936281
  • list.focusBackground#23546C
  • list.focusForeground#AFB9D4
  • list.highlightForeground#936281
  • list.hoverBackground#23546C
  • list.hoverForeground#D5E3EC
  • list.inactiveSelectionBackground#0A181F30
  • list.inactiveSelectionForeground#936281
  • list.warningForeground#F5928F
  • listFilterWidget.background#0A181F30
  • listFilterWidget.noMatchesOutline#0A181F30
  • listFilterWidget.outline#0A181F30
  • menu.background#0A181Ff8
  • menu.border#93628150
  • menu.foreground#ABC7D9
  • menu.selectionBackground#23546C
  • menu.selectionBorder#0A181F30
  • menu.selectionForeground#ABC7D9
  • menu.separatorBackground#ABC7D9
  • menubar.selectionBackground#23546C
  • menubar.selectionBorder#93628150
  • menubar.selectionForeground#ABC7D9
  • minimap.background#0A181F
  • minimapGutter.addedBackground#A5FFD6
  • minimapGutter.deletedBackground#F5928F
  • minimapGutter.modifiedBackground#F98177
  • minimapSlider.activeBackground#F98177b0
  • minimapSlider.background#F9817780
  • minimapSlider.hoverBackground#F98177a0
  • notificationLink.foreground#936281
  • notifications.background#0A181F
  • notifications.foreground#ABC7D9
  • panel.background#0A181F
  • panel.border#0A181F60
  • panelTitle.activeBorder#936281
  • panelTitle.activeForeground#D5E3EC
  • panelTitle.inactiveForeground#ABC7D9
  • peekView.border#0A181F30
  • peekViewEditor.background#ABC7D905
  • peekViewEditor.matchHighlightBackground#93628150
  • peekViewEditorGutter.background#ABC7D905
  • peekViewResult.background#ABC7D905
  • peekViewResult.matchHighlightBackground#93628150
  • peekViewResult.selectionBackground#93628170
  • peekViewTitle.background#ABC7D905
  • peekViewTitleDescription.foreground#ABC7D960
  • pickerGroup.foreground#936281
  • progressBar.background#936281
  • scrollbar.shadow#0A181F00
  • scrollbarSlider.activeBackground#936281cc
  • scrollbarSlider.background#936281bb
  • scrollbarSlider.hoverBackground#936281ee
  • selection.background#936281
  • settings.checkboxBackground#0A181F
  • settings.checkboxForeground#ABC7D9
  • settings.dropdownBackground#0A181F
  • settings.dropdownForeground#ABC7D9
  • settings.headerForeground#936281
  • settings.modifiedItemIndicator#936281
  • settings.numberInputBackground#0A181F
  • settings.numberInputForeground#ABC7D9
  • settings.textInputBackground#0A181F
  • settings.textInputForeground#ABC7D9
  • sideBar.background#0A181F
  • sideBar.border#93628150
  • sideBar.foreground#AFB9D4
  • sideBarSectionHeader.background#0A181F
  • sideBarSectionHeader.border#0A181F60
  • sideBarSectionHeader.foreground#AFB9D4
  • sideBarTitle.foreground#ABC7D9
  • statusBar.background#23546C
  • statusBar.border#0A181F60
  • statusBar.debuggingBackground#F5928F
  • statusBar.debuggingForeground#D5E3EC
  • statusBar.foreground#23546C
  • statusBar.noFolderBackground#0A181F
  • statusBarItem.hoverBackground#93628120
  • statusBarItem.remoteBackground#936281
  • statusBarItem.remoteForeground#0A181F
  • tab.activeBackground#93628150
  • tab.activeBorder#936281
  • tab.activeForeground#D5E3EC
  • tab.activeModifiedBorder#936281
  • tab.border#0A181F
  • tab.inactiveBackground#93628120
  • tab.inactiveForeground#ABC7D9af
  • tab.unfocusedActiveBackground#93628140
  • tab.unfocusedActiveBorder#936281
  • tab.unfocusedActiveForeground#ABC7D9
  • tab.unfocusedInactiveBackground#93628110
  • tab.unfocusedInactiveForeground#ABC7D97f
  • terminal.ansiBlack#0A181F
  • terminal.ansiBlue#AFB9D4
  • terminal.ansiBrightBlack#936281
  • terminal.ansiBrightBlue#AFB9D4
  • terminal.ansiBrightCyan#CAD0E2
  • terminal.ansiBrightGreen#F98177
  • terminal.ansiBrightMagenta#F5928F
  • terminal.ansiBrightRed#A5FFD6
  • terminal.ansiBrightWhite#D5E3EC
  • terminal.ansiBrightYellow#F5928F
  • terminal.ansiCyan#CAD0E2
  • terminal.ansiGreen#F98177
  • terminal.ansiMagenta#F5928F
  • terminal.ansiRed#A5FFD6
  • terminal.ansiWhite#D5E3EC
  • terminal.ansiYellow#F5928F
  • terminalCursor.background#0A181F
  • terminalCursor.foreground#F5928F
  • textLink.activeForeground#ABC7D9
  • textLink.foreground#936281
  • titleBar.activeBackground#0A181F
  • titleBar.activeForeground#ABC7D9
  • titleBar.border#0A181F60
  • titleBar.inactiveBackground#0A181F
  • titleBar.inactiveForeground#936281
  • tree.indentGuidesStroke#23546C
  • widget.shadow#0A181F30

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
variable, string constant.other.placeholder, invalid.deprecated, keyword, storage.type, storage.modifier#F5928F
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#F98177
constant.other.php#F5928F
constant.other.color#D5E3EC
invalid, invalid.illegal#A5FFD6
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#BE9DB1
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#ABC7D9
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#ABC7D9
entity.name.tag.htmlbold
variable.parameter.js, variable.parameter.keyframe-list.css#F5928F
variable.other.object.js, storage.type.js, string.other.link.title.markdown, variable.other.readwrite.js, variable.other.property.js#BE9DB1
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#AFB9D4
punctuation.definition.string.begin.html, punctuation.definition.string.end.html#CAD0E2
support.other.variable, string.other.link, markup.table#ABC7D9
constant.numeric, constant.language, constant.character, constant.escape, keyword.other.unit, keyword.other, punctuation.separator.key-value.html#F5928F
variable.parameter.function.language.special, variable.parameter#A5FFD6
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#F98177
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#F5928F
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#BE9DB1
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#A5FFD6
entity.name.method.js, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#AFB9D4italic
entity.other.attribute-name, support.function#F5928F
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#ABC7D9
source.scss keyword.control#F5928F
markup.inserted#F98177
markup.deleted#A5FFD6
markup.changed#F5928F
string.regexp#CAD0E2
constant.character.escape#CAD0E2
*url*, *link*, *uri*underline
source.js constant.other.object.key.js string.unquoted.label.js#ABC7D9italic
support.type.property-name.json#ABC7D9
text.html.markdown, punctuation.definition.list_item.markdown#ABC7D9
text.html.markdown markup.inline.raw.markdown#F5928F
text.html.markdown markup.inline.raw.markdown, punctuation.definition.raw.markdown#93628150
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#BE9DB1bold
markup.underline#AFB9D4underline
markup.strike
markup.quote punctuation.definition.blockquote.markdown#93628150
markup.quoteitalic
string.other.link.description.title.markdown#F5928F
constant.other.reference.link.markdown#F5928F
markup.raw.block#F5928F
punctuation.definition.raw.markdown, punctuation.definition.markdown#CAD0E2
variable.language.fenced.markdown#936281
meta.separator#A7A8AFbold
token.info-token#936281
token.warn-token#F5928F
token.error-token#FF293B
token.debug-token#CAD0E2