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#0D1116
  • activityBar.border#0D111660
  • activityBar.foreground#EBFAFA
  • activityBarBadge.background#37F499
  • activityBarBadge.foreground#0D1116
  • badge.background#0D111630
  • badge.foreground#987AFB
  • breadcrumb.activeSelectionForeground#987AFB
  • breadcrumb.background#0D1116
  • breadcrumb.focusForeground#EBFAFA
  • breadcrumb.foreground#949AE5
  • breadcrumbPicker.background#0D1116
  • button.background#987AFB50
  • contrastBorder#987AFB40
  • debugToolBar.background#0D1116
  • diffEditor.insertedTextBackground#5FA9F415
  • diffEditor.removedTextBackground#04D1F920
  • dropdown.background#0D1116
  • dropdown.border#EBFAFA10
  • editor.background#0D1116
  • editor.findMatchBackground#0D1116
  • editor.findMatchBorder#987AFB
  • editor.findMatchHighlightBackground#987AFB93
  • editor.findMatchHighlightBorder#EBFAFA30
  • editor.foreground#EBFAFA
  • editor.lineHighlightBackground#0D111650
  • editor.selectionBackground#37F49930
  • editor.selectionHighlightBackground#987AFB6b
  • editor.selectionHighlightBorder#37F499f0
  • editorBracketMatch.background#0D1116
  • editorBracketMatch.border#1682EF7f
  • editorCursor.background#0D1116
  • editorCursor.foreground#EBFAFA
  • editorError.foreground#04D1F970
  • editorGroup.border#0D111630
  • editorGroupHeader.tabsBackground#0D1116
  • editorGutter.addedBackground#5FA9F460
  • editorGutter.deletedBackground#04D1F960
  • editorGutter.modifiedBackground#37F49960
  • editorHoverWidget.background#0D1116
  • editorHoverWidget.border#EBFAFA10
  • editorIndentGuide.activeBackground1#314154
  • editorIndentGuide.background1#31415470
  • editorInfo.foreground#37F49970
  • editorLightBulb.foreground#37F499
  • editorLightBulbAi.foreground#37F499
  • editorLightBulbAutoFix.foreground#37F499
  • editorLineNumber.activeForeground#37F499
  • editorLineNumber.foreground#987AFBc0
  • editorLink.activeForeground#EBFAFA
  • editorMarkerNavigation.background#EBFAFA05
  • editorOverviewRuler.border#0D1116
  • editorOverviewRuler.errorForeground#04D1F940
  • editorOverviewRuler.findMatchForeground#987AFBCC
  • editorOverviewRuler.infoForeground#37F49940
  • editorOverviewRuler.warningForeground#1682EF70
  • editorRuler.foreground#314154
  • editorSuggestWidget.background#0D1116
  • editorSuggestWidget.border#EBFAFA10
  • editorSuggestWidget.foreground#EBFAFA
  • editorSuggestWidget.highlightForeground#1682EF
  • editorSuggestWidget.selectedBackground#987AFB20
  • editorWarning.foreground#f16c75
  • editorWhitespace.foreground#EBFAFA40
  • editorWidget.background#0D1116
  • editorWidget.border#1682EF
  • editorWidget.resizeBorder#987AFB
  • extensionButton.prominentBackground#5FA9F490
  • extensionButton.prominentHoverBackground#04D1F9
  • focusBorder#EBFAFA00
  • gitDecoration.conflictingResourceForeground#1682EF
  • gitDecoration.deletedResourceForeground#f16c75
  • gitDecoration.ignoredResourceForeground#949AE5
  • gitDecoration.modifiedResourceForeground#987AFB
  • gitDecoration.untrackedResourceForeground#21925b
  • input.background#141B22
  • input.border#EBFAFA10
  • input.foreground#EBFAFA
  • input.placeholderForeground#EBFAFA60
  • inputOption.activeBackground#EBFAFA30
  • inputOption.activeBorder#EBFAFA30
  • inputValidation.errorBorder#04D1F950
  • inputValidation.infoBorder#37F49950
  • inputValidation.warningBorder#1682EF50
  • list.activeSelectionBackground#0D1116
  • list.activeSelectionForeground#987AFB
  • list.focusBackground#141B22
  • list.focusForeground#37F499
  • list.highlightForeground#987AFB
  • list.hoverBackground#314154
  • list.hoverForeground#EBFAFA
  • list.inactiveSelectionBackground#0D111630
  • list.inactiveSelectionForeground#987AFB
  • list.warningForeground#1682EF
  • listFilterWidget.background#0D111630
  • listFilterWidget.noMatchesOutline#0D111630
  • listFilterWidget.outline#0D111630
  • menu.background#0D1116f8
  • menu.border#987AFB50
  • menu.foreground#EBFAFA
  • menu.selectionBackground#141B22
  • menu.selectionBorder#0D111630
  • menu.selectionForeground#EBFAFA
  • menu.separatorBackground#EBFAFA
  • menubar.selectionBackground#141B22
  • menubar.selectionBorder#987AFB50
  • menubar.selectionForeground#EBFAFA
  • minimap.background#0D1116
  • minimapGutter.addedBackground#04D1F9
  • minimapGutter.deletedBackground#1682EF
  • minimapGutter.modifiedBackground#5FA9F4
  • minimapSlider.activeBackground#5FA9F4b0
  • minimapSlider.background#5FA9F480
  • minimapSlider.hoverBackground#5FA9F4a0
  • notificationLink.foreground#987AFB
  • notifications.background#0D1116
  • notifications.foreground#EBFAFA
  • panel.background#0D1116
  • panel.border#0D111660
  • panelTitle.activeBorder#987AFB
  • panelTitle.activeForeground#EBFAFA
  • panelTitle.inactiveForeground#EBFAFA
  • peekView.border#0D111630
  • peekViewEditor.background#EBFAFA05
  • peekViewEditor.matchHighlightBackground#987AFB50
  • peekViewEditorGutter.background#EBFAFA05
  • peekViewResult.background#EBFAFA05
  • peekViewResult.matchHighlightBackground#987AFB50
  • peekViewResult.selectionBackground#987AFB70
  • peekViewTitle.background#EBFAFA05
  • peekViewTitleDescription.foreground#EBFAFA60
  • pickerGroup.foreground#987AFB
  • progressBar.background#987AFB
  • scrollbar.shadow#0D111600
  • scrollbarSlider.activeBackground#04d1f9cc
  • scrollbarSlider.background#04d1f9bb
  • scrollbarSlider.hoverBackground#04d1f9ee
  • selection.background#987AFB
  • settings.checkboxBackground#0D1116
  • settings.checkboxForeground#EBFAFA
  • settings.dropdownBackground#0D1116
  • settings.dropdownForeground#EBFAFA
  • settings.headerForeground#987AFB
  • settings.modifiedItemIndicator#987AFB
  • settings.numberInputBackground#0D1116
  • settings.numberInputForeground#EBFAFA
  • settings.textInputBackground#0D1116
  • settings.textInputForeground#EBFAFA
  • sideBar.background#0D1116
  • sideBar.border#987AFB50
  • sideBar.foreground#949AE5
  • sideBarSectionHeader.background#0D1116
  • sideBarSectionHeader.border#0D111660
  • sideBarSectionHeader.foreground#04D1F9
  • sideBarTitle.foreground#EBFAFA
  • statusBar.background#141B22
  • statusBar.border#0D111660
  • statusBar.debuggingBackground#1682EF
  • statusBar.debuggingForeground#EBFAFA
  • statusBar.foreground#04D1F9
  • statusBar.noFolderBackground#0D1116
  • statusBarItem.hoverBackground#987AFB20
  • statusBarItem.remoteBackground#987AFB
  • statusBarItem.remoteForeground#0D1116
  • tab.activeBackground#37F499FF
  • tab.activeBorder#37F499
  • tab.activeForeground#0D1116
  • tab.activeModifiedBorder#37F499
  • tab.border#0D1116
  • tab.inactiveBackground#37F49920
  • tab.inactiveForeground#EBFAFAaf
  • tab.unfocusedActiveBackground#37F49940
  • tab.unfocusedActiveBorder#37F499
  • tab.unfocusedActiveForeground#EBFAFA
  • tab.unfocusedInactiveBackground#37F49910
  • tab.unfocusedInactiveForeground#EBFAFA7f
  • terminal.ansiBlack#0D1116
  • terminal.ansiBlue#37F499
  • terminal.ansiBrightBlack#987AFB
  • terminal.ansiBrightBlue#37F499
  • terminal.ansiBrightCyan#19DFCF
  • terminal.ansiBrightGreen#5FA9F4
  • terminal.ansiBrightMagenta#1682EF
  • terminal.ansiBrightRed#04D1F9
  • terminal.ansiBrightWhite#EBFAFA
  • terminal.ansiBrightYellow#1682EF
  • terminal.ansiCyan#19DFCF
  • terminal.ansiGreen#5FA9F4
  • terminal.ansiMagenta#1682EF
  • terminal.ansiRed#04D1F9
  • terminal.ansiWhite#EBFAFA
  • terminal.ansiYellow#1682EF
  • terminalCursor.background#0D1116
  • terminalCursor.foreground#1682EF
  • textLink.activeForeground#EBFAFA
  • textLink.foreground#987AFB
  • titleBar.activeBackground#0D1116
  • titleBar.activeForeground#EBFAFA
  • titleBar.border#0D111660
  • titleBar.inactiveBackground#0D1116
  • titleBar.inactiveForeground#987AFB
  • tree.indentGuidesStroke#314154
  • widget.shadow#0D111630

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#a5afc2italic
variable, string constant.other.placeholder#04d1f9
constant.other.color#ffffff
invalid, invalid.illegal#f16c75
keyword, storage.type, storage.modifier#37f499
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#89DDFF
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#f07178
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#04d1f9
meta.block variable.other#f07178
support.other.variable, string.other.link#f07178
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#19dfcf
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#19dfcf
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#949ae5
support.type#a5afc2
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#a5afc2
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#f16c75
variable.language#f16c75italic
entity.name.method.js#04d1f9italic
meta.class-method.js entity.name.function.js, variable.function.constructor#04d1f9
entity.other.attribute-name#37f499
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#949ae5italic
entity.other.attribute-name.class#949ae5
source.sass keyword.control#04d1f9
markup.inserted#19dfcf
markup.deleted#f16c75
markup.changed#37f499
string.regexp#89DDFF
constant.character.escape#89DDFF
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#04d1f9italic
source.js constant.other.object.key.js string.unquoted.label.js#f16c75italic
source.json meta.structure.dictionary.json support.type.property-name.json#37f499
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#949ae5
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#19dfcf
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#f16c75
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#f1fc79
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#04d1f9
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#f07178
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#37f499
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#19dfcf
text.html.markdown, punctuation.definition.list_item.markdown#EBFAFA
markup.inline.raw.string.markdown#37f499
text.html.markdown markup.inline.raw.markdown markup.inline.raw.string.markdown#37f499
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#65737E
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#19dfcf
markup.italic#f07178italic
markup.bold, markup.bold string#987afbbold
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#f07178bold
markup.underline#19dfcfunderline
markup.quote punctuation.definition.blockquote.markdown#65737E
markup.quoteitalic
string.other.link.title.markdown#04d1f9
string.other.link.description.title.markdown#37f499
constant.other.reference.link.markdown#949ae5
markup.raw.block#37f499
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#04d1f9
variable.language.fenced.markdown#65737E
meta.separator#65737Ebold
markup.table#04d1f9