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#16304f66
  • activityBar.activeBorder#6cb6ff
  • activityBar.background#0a0d14
  • activityBar.foreground#c9d1d9
  • activityBar.inactiveForeground#7e8896
  • activityBarBadge.background#2b4f78
  • activityBarBadge.foreground#e6edf3
  • badge.background#2b4f78
  • badge.foreground#e6edf3
  • breadcrumb.activeSelectionForeground#8fc7ff
  • breadcrumb.background#0a0d14
  • breadcrumb.focusForeground#c9d1d9
  • breadcrumb.foreground#7e8896
  • button.background#16304f
  • button.foreground#c9d1d9
  • button.hoverBackground#20456f
  • button.secondaryBackground#0a0d14
  • button.secondaryForeground#c9d1d9
  • button.secondaryHoverBackground#16304f66
  • charts.blue#6cb6ff
  • charts.foreground#c9d1d9
  • charts.green#3fb950
  • charts.lines#5a6572
  • charts.orange#caa574
  • charts.purple#8fc7ff
  • charts.red#ff7b72
  • charts.yellow#e3b341
  • chat.avatarBackground#16304f
  • chat.avatarForeground#c9d1d9
  • chat.requestBackground#0f141d
  • chat.requestBorder#00000000
  • chat.requestBubbleBackground#0f141d
  • chat.requestBubbleHoverBackground#0f141d
  • chat.requestCodeBorder#00000000
  • chat.slashCommandBackground#1a2840
  • chat.slashCommandForeground#8fc7ff
  • debugIcon.breakpointForeground#8fc7ff
  • debugIcon.startForeground#3fb950
  • debugIcon.stopForeground#ff7b72
  • debugToolBar.background#0a0d14
  • descriptionForeground#7e8896
  • diffEditor.diagonalFill#0f141d
  • diffEditor.insertedTextBackground#2ea04333
  • diffEditor.removedTextBackground#ff7b7233
  • disabledForeground#5a6572
  • dropdown.background#0a0d14
  • dropdown.border#00000000
  • dropdown.foreground#c9d1d9
  • editor.background#0f141d
  • editor.findMatchBackground#20456fcc
  • editor.findMatchHighlightBackground#20456f66
  • editor.findRangeHighlightBackground#16304f55
  • editor.foreground#c9d1d9
  • editor.hoverHighlightBackground#16304f44
  • editor.inactiveSelectionBackground#16304f80
  • editor.lineHighlightBackground#0f141d
  • editor.rangeHighlightBackground#16304f33
  • editor.selectionBackground#16304f
  • editor.selectionHighlightBackground#16304f66
  • editor.wordHighlightBackground#16304f55
  • editor.wordHighlightStrongBackground#20456f66
  • editorBracketMatch.background#16304f55
  • editorBracketMatch.border#6cb6ff
  • editorCursor.foreground#8fc7ff
  • editorError.foreground#ff7b72
  • editorGroup.border#00000000
  • editorGroupHeader.noTabsBackground#0a0d14
  • editorGroupHeader.tabsBackground#0a0d14
  • editorGroupHeader.tabsBorder#00000000
  • editorGutter.addedBackground#3fb950
  • editorGutter.deletedBackground#ff7b72
  • editorGutter.modifiedBackground#e3b341
  • editorHint.foreground#7fb6c9
  • editorHoverWidget.background#0f141d
  • editorHoverWidget.border#00000000
  • editorIndentGuide.activeBackground1#5a6572
  • editorIndentGuide.background1#5a657266
  • editorInfo.foreground#8fc7ff
  • editorLineNumber.activeForeground#c9d1d9
  • editorLineNumber.foreground#7e8896
  • editorOverviewRuler.addedForeground#3fb95088
  • editorOverviewRuler.bracketMatchForeground#6cb6ffcc
  • editorOverviewRuler.deletedForeground#ff7b7288
  • editorOverviewRuler.errorForeground#ff7b72cc
  • editorOverviewRuler.infoForeground#8fc7ffcc
  • editorOverviewRuler.modifiedForeground#e3b34188
  • editorOverviewRuler.warningForeground#e3b341cc
  • editorOverviewRuler.wordHighlightForeground#16304faa
  • editorRuler.foreground#16304f66
  • editorSuggestWidget.background#0f141d
  • editorSuggestWidget.border#00000000
  • editorSuggestWidget.focusHighlightForeground#8fc7ff
  • editorSuggestWidget.foreground#c9d1d9
  • editorSuggestWidget.highlightForeground#8fc7ff
  • editorSuggestWidget.selectedBackground#16304f
  • editorWarning.foreground#e3b341
  • editorWhitespace.foreground#5a657255
  • editorWidget.background#0f141d
  • editorWidget.border#00000000
  • errorForeground#ff7b72
  • focusBorder#00000000
  • foreground#c9d1d9
  • gitDecoration.addedResourceForeground#3fb950
  • gitDecoration.conflictingResourceForeground#e3b341
  • gitDecoration.deletedResourceForeground#ff7b72
  • gitDecoration.ignoredResourceForeground#5a6572
  • gitDecoration.modifiedResourceForeground#e3b341
  • gitDecoration.submoduleResourceForeground#d2a8ff
  • gitDecoration.untrackedResourceForeground#3fb950
  • icon.foreground#7e8896
  • inlineChat.background#0f141d
  • inlineChat.border#00000000
  • inlineChatInput.background#0f141d
  • inlineChatInput.border#00000000
  • inlineChatInput.focusBorder#00000000
  • inlineChatInput.placeholderForeground#7e8896
  • input.background#0f141d
  • input.border#00000000
  • input.foreground#c9d1d9
  • input.placeholderForeground#7e8896
  • inputOption.activeBackground#16304f66
  • inputOption.activeBorder#00000000
  • inputOption.hoverBackground#16304f44
  • inputValidation.errorBackground#ff7b7222
  • inputValidation.errorBorder#ff7b72
  • inputValidation.infoBackground#16304f33
  • inputValidation.infoBorder#6cb6ff
  • inputValidation.warningBackground#e3b34122
  • inputValidation.warningBorder#e3b341
  • keybindingLabel.background#0a0d14
  • keybindingLabel.border#00000000
  • keybindingLabel.bottomBorder#00000000
  • keybindingLabel.foreground#c9d1d9
  • list.activeSelectionBackground#16304f
  • list.activeSelectionForeground#c9d1d9
  • list.errorForeground#ff7b72
  • list.focusBackground#16304f
  • list.focusForeground#c9d1d9
  • list.highlightForeground#8fc7ff
  • list.hoverBackground#16304f66
  • list.hoverForeground#c9d1d9
  • list.inactiveSelectionBackground#16304f80
  • list.inactiveSelectionForeground#c9d1d9
  • list.warningForeground#e3b341
  • menubar.selectionBackground#16304f80
  • menubar.selectionBorder#00000000
  • menubar.selectionForeground#c9d1d9
  • minimap.background#0a0d14
  • minimap.errorHighlight#ff7b72aa
  • minimap.findMatchHighlight#20456fcc
  • minimap.selectionHighlight#16304f88
  • minimap.warningHighlight#e3b341aa
  • notificationCenterHeader.background#0f141d
  • notificationCenterHeader.foreground#8fc7ff
  • notifications.background#0a0d14
  • notifications.border#00000000
  • notifications.foreground#c9d1d9
  • notificationsErrorIcon.foreground#ff7b72
  • notificationsInfoIcon.foreground#8fc7ff
  • notificationsWarningIcon.foreground#e3b341
  • notificationToast.border#00000000
  • panel.background#0a0d14
  • panel.border#2a313d66
  • panelInput.border#00000000
  • panelSectionHeader.background#0f141d
  • panelSectionHeader.border#00000000
  • panelSectionHeader.foreground#8fc7ff
  • panelTitle.activeBorder#6cb6ff
  • panelTitle.activeForeground#c9d1d9
  • panelTitle.inactiveForeground#7e8896
  • peekView.border#00000000
  • peekViewEditor.background#0a0d14
  • peekViewEditor.matchHighlightBackground#20456f66
  • peekViewResult.background#0f141d
  • peekViewResult.matchHighlightBackground#20456f66
  • peekViewResult.selectionBackground#16304f
  • peekViewTitle.background#0f141d
  • peekViewTitleDescription.foreground#7e8896
  • peekViewTitleLabel.foreground#c9d1d9
  • pickerGroup.border#00000000
  • pickerGroup.foreground#8fc7ff
  • problemsErrorIcon.foreground#ff7b72
  • problemsInfoIcon.foreground#8fc7ff
  • problemsWarningIcon.foreground#e3b341
  • progressBar.background#6cb6ff
  • quickInput.background#0a0d14
  • quickInput.foreground#c9d1d9
  • quickInputList.focusBackground#16304f
  • sash.hoverBorder#6cb6ff
  • scrollbarSlider.activeBackground#6cb6ff66
  • scrollbarSlider.background#5a657255
  • scrollbarSlider.hoverBackground#5a657288
  • settings.headerForeground#8fc7ff
  • settings.modifiedItemIndicator#6cb6ff
  • sideBar.background#0a0d14
  • sideBar.border#2a313d66
  • sideBar.foreground#c9d1d9
  • sideBarSectionHeader.background#0f141d
  • sideBarSectionHeader.border#00000000
  • sideBarSectionHeader.foreground#7e8896
  • sideBarTitle.foreground#c9d1d9
  • statusBar.background#0a0d14
  • statusBar.border#2a313d66
  • statusBar.debuggingBackground#16304f
  • statusBar.debuggingForeground#c9d1d9
  • statusBar.foreground#c9d1d9
  • statusBar.noFolderBackground#0a0d14
  • statusBar.noFolderForeground#7e8896
  • statusBarItem.activeBackground#16304f80
  • statusBarItem.hoverBackground#16304f66
  • statusBarItem.prominentBackground#16304f
  • statusBarItem.prominentHoverBackground#20456f
  • symbolIcon.classForeground#8fc7ff
  • symbolIcon.functionForeground#6cb6ff
  • symbolIcon.interfaceForeground#7fb6c9
  • symbolIcon.keywordForeground#8fc7ff
  • symbolIcon.methodForeground#6cb6ff
  • symbolIcon.namespaceForeground#8fc7ff
  • symbolIcon.numberForeground#caa574
  • symbolIcon.stringForeground#7fb6c9
  • symbolIcon.variableForeground#c9d1d9
  • tab.activeBackground#0f141d
  • tab.activeBorder#00000000
  • tab.activeBorderTop#6cb6ff
  • tab.activeForeground#c9d1d9
  • tab.border#00000000
  • tab.hoverBackground#16304f66
  • tab.hoverForeground#c9d1d9
  • tab.inactiveBackground#0a0d14
  • tab.inactiveForeground#7e8896
  • tab.inactiveModifiedBorder#7fb6c9
  • tab.lastPinnedBorder#00000000
  • tab.modifiedBorder#6cb6ff
  • terminal.ansiBlack#0a0d14
  • terminal.ansiBlue#6cb6ff
  • terminal.ansiBrightBlack#5a6572
  • terminal.ansiBrightBlue#8fc7ff
  • terminal.ansiBrightCyan#a5d6e2
  • terminal.ansiBrightGreen#56d364
  • terminal.ansiBrightMagenta#d2a8ff
  • terminal.ansiBrightRed#ff9b97
  • terminal.ansiBrightWhite#e6edf3
  • terminal.ansiBrightYellow#f2cc60
  • terminal.ansiCyan#7fb6c9
  • terminal.ansiGreen#3fb950
  • terminal.ansiMagenta#bc8cff
  • terminal.ansiRed#ff7b72
  • terminal.ansiWhite#c9d1d9
  • terminal.ansiYellow#e3b341
  • terminal.background#0a0d14
  • terminal.border#2a313d66
  • terminal.foreground#c9d1d9
  • terminal.inactiveSelectionBackground#16304f55
  • terminal.selectionBackground#16304f80
  • terminalCursor.background#0a0d14
  • terminalCursor.foreground#8fc7ff
  • testing.iconErrored#e3b341
  • testing.iconFailed#ff7b72
  • testing.iconPassed#3fb950
  • testing.iconQueued#8fc7ff
  • testing.iconUnset#7e8896
  • testing.runAction#6cb6ff
  • textCodeBlock.background#0f141d
  • textLink.activeForeground#8fc7ff
  • textLink.foreground#6cb6ff
  • textPreformat.foreground#7fb6c9
  • titleBar.activeBackground#0a0d14
  • titleBar.activeForeground#c9d1d9
  • titleBar.border#2a313d66
  • titleBar.inactiveBackground#0a0d14
  • titleBar.inactiveForeground#7e8896
  • tree.indentGuidesStroke#5a657266
  • tree.tableColumnsBorder#00000000
  • tree.tableOddRowsBackground#0f141d
  • welcomePage.background#0a0d14
  • welcomePage.progress.background#16304f66
  • welcomePage.progress.foreground#6cb6ff
  • window.activeBorder#00000000
  • window.inactiveBorder#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5a6572italic
variable, string constant.other.placeholder#c9d1d9
constant.other.color#a5d6e2
invalid, invalid.illegal#ff7b72
keyword, storage.type, storage.modifier#bc8cff
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#6cb6ff
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#7fb6c9
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#6cb6ff
meta.block variable.other#c9d1d9
support.other.variable, string.other.link#a5d6e2
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#caa574
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#56d364
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#d2a8ff
support.type#6cb6ff
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#a5d6e2
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#8fc7ff
variable.language#bc8cffitalic
entity.name.method.js#6cb6ffitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#6cb6ff
entity.other.attribute-name#caa574
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#caa574italic
entity.other.attribute-name.class#caa574
source.sass keyword.control#d2a8ff
markup.inserted#3fb950
markup.deleted#ff7b72
markup.changed#e3b341
string.regexp#d2a8ff
constant.character.escape#a5d6e2
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#bc8cffitalic
source.js constant.other.object.key.js string.unquoted.label.js#bc8cffitalic
source.json meta.structure.dictionary.json support.type.property-name.json#8fc7ff
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#7fb6c9
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#caa574
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#bc8cff
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#6cb6ff
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#a5d6e2
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#e3b341
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#ff9b97
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#56d364
text.html.markdown, punctuation.definition.list_item.markdown#c9d1d9
text.html.markdown markup.inline.raw.markdown#caa574
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#5a6572
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#d2a8ff
markup.italic#8fc7ffitalic
markup.bold, markup.bold string#6cb6ffbold
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#bc8cffbold
markup.underline#caa574underline
markup.quote punctuation.definition.blockquote.markdown#5a6572
markup.quoteitalic
string.other.link.title.markdown#6cb6ff
string.other.link.description.title.markdown#7fb6c9
constant.other.reference.link.markdown#caa574
markup.raw.block#a5d6e2
markup.raw.block.fenced.markdown#5a657280
punctuation.definition.fenced.markdown#5a657280
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#c9d1d9
variable.language.fenced.markdown#5a6572
meta.separator#5a6572bold
markup.table#c9d1d9
Sentra Theme by Febriadji - VS Code Theme