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#00000000
  • activityBar.activeBorder#00d7ff
  • activityBar.background#0a0a0a
  • activityBar.border#1a1a1a
  • activityBar.foreground#b0b0b0
  • activityBar.inactiveForeground#4a4a4a
  • activityBarBadge.background#9be564
  • activityBarBadge.foreground#0a0a0a
  • badge.background#9be564
  • badge.foreground#0a0a0a
  • breadcrumb.activeSelectionForeground#f1f2e6
  • breadcrumb.background#0a0a0a
  • breadcrumb.focusForeground#f1f2e6
  • breadcrumb.foreground#7a8a99
  • breadcrumbPicker.background#0a0a0a
  • button.background#00d7ff
  • button.border#00000000
  • button.foreground#0a0a0a
  • button.hoverBackground#66f6ff
  • descriptionForeground#b0b0b0
  • diffEditor.insertedTextBackground#9be56420
  • diffEditor.removedTextBackground#ffb86b20
  • dropdown.background#0a0a0a
  • dropdown.border#2a2a2a
  • dropdown.foreground#f1f2e6
  • editor.background#0a0a0a
  • editor.foreground#f1f2e6
  • editor.inactiveSelectionBackground#12262d
  • editor.lineHighlightBackground#0e1715
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#163f4a
  • editorCursor.foreground#00d7ff
  • editorError.foreground#ffb86b
  • editorGroup.border#1a1a1a
  • editorGroupHeader.tabsBackground#0a0a0a
  • editorGroupHeader.tabsBorder#1a1a1a
  • editorGutter.addedBackground#9be564
  • editorGutter.background#0a0a0a
  • editorGutter.deletedBackground#ffb86b
  • editorGutter.modifiedBackground#8aadff
  • editorHint.foreground#7a8a99
  • editorHoverWidget.background#0a0a0a
  • editorHoverWidget.border#2a2a2a
  • editorIndentGuide.activeBackground#34394c
  • editorIndentGuide.background#1a1a1a
  • editorInfo.foreground#8aadff
  • editorLineNumber.activeForeground#00d7ff
  • editorLineNumber.foreground#3a3f4b
  • editorOverviewRuler.border#1a1a1a
  • editorOverviewRuler.errorForeground#ffb86b
  • editorOverviewRuler.infoForeground#8aadff
  • editorOverviewRuler.warningForeground#ffd166
  • editorRuler.foreground#252938
  • editorSuggestWidget.background#0a0a0a
  • editorSuggestWidget.border#2a2a2a
  • editorSuggestWidget.selectedBackground#12262d
  • editorWarning.foreground#ffd166
  • editorWhitespace.foreground#1a1a1a
  • editorWidget.background#0a0a0a
  • editorWidget.border#2a2a2a
  • errorForeground#ffb86b
  • focusBorder#2a2a2a
  • foreground#f1f2e6
  • gitDecoration.addedResourceForeground#9be564
  • gitDecoration.conflictingResourceForeground#ffd166
  • gitDecoration.deletedResourceForeground#ffb86b
  • gitDecoration.ignoredResourceForeground#4a4a4a
  • gitDecoration.modifiedResourceForeground#8aadff
  • gitDecoration.untrackedResourceForeground#b7f774
  • icon.foreground#b0b0b0
  • input.background#0a0a0a
  • input.border#2a2a2a
  • input.foreground#f1f2e6
  • input.placeholderForeground#4a4a4a
  • inputOption.activeBorder#00d7ff
  • inputValidation.errorBackground#0a0a0a
  • inputValidation.errorBorder#ffb86b
  • inputValidation.infoBackground#0a0a0a
  • inputValidation.infoBorder#8aadff
  • inputValidation.warningBackground#0a0a0a
  • inputValidation.warningBorder#ffd166
  • list.activeSelectionBackground#163f4a
  • list.activeSelectionForeground#f1f2e6
  • list.activeSelectionIconForeground#00d7ff
  • list.focusBackground#163f4a
  • list.focusForeground#f1f2e6
  • list.focusOutline#00000000
  • list.highlightForeground#00d7ff
  • list.hoverBackground#10131f
  • list.hoverForeground#f1f2e6
  • list.inactiveSelectionBackground#163f4a
  • list.inactiveSelectionForeground#f1f2e6
  • notificationCenter.border#2a2a2a
  • notificationCenterHeader.background#0a0a0a
  • notificationCenterHeader.foreground#f1f2e6
  • notifications.background#0a0a0a
  • notifications.border#2a2a2a
  • notifications.foreground#f1f2e6
  • notificationToast.border#2a2a2a
  • panel.background#0a0a0a
  • panel.border#1a1a1a
  • panelTitle.activeBorder#00d7ff
  • panelTitle.activeForeground#f1f2e6
  • panelTitle.inactiveForeground#7a8a99
  • problemsErrorIcon.foreground#ffb86b
  • problemsInfoIcon.foreground#8aadff
  • problemsWarningIcon.foreground#ffd166
  • progressBar.background#00d7ff
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#4a4a4a80
  • scrollbarSlider.background#2a2a2a80
  • scrollbarSlider.hoverBackground#3a3a3a80
  • selection.background#163f4a
  • sideBar.background#0a0a0a
  • sideBar.border#1a1a1a
  • sideBar.foreground#b0b0b0
  • sideBarSectionHeader.background#0a0a0a
  • sideBarSectionHeader.border#1a1a1a
  • sideBarSectionHeader.foreground#f1f2e6
  • sideBarTitle.foreground#f1f2e6
  • statusBar.background#0a0a0a
  • statusBar.border#1a1a1a
  • statusBar.debuggingBackground#ffd166
  • statusBar.debuggingForeground#0a0a0a
  • statusBar.foreground#b0b0b0
  • statusBar.noFolderBackground#0a0a0a
  • statusBarItem.prominentBackground#141414
  • statusBarItem.prominentHoverBackground#1a1a1a
  • tab.activeBackground#1a1a1a
  • tab.activeBorder#00000000
  • tab.activeBorderTop#00d7ff50
  • tab.activeForeground#f1f2e6
  • tab.border#1a1a1a
  • tab.inactiveBackground#0a0a0a
  • tab.inactiveForeground#7a8a99
  • tab.unfocusedActiveBorder#00000000
  • tab.unfocusedActiveBorderTop#00000000
  • terminal.ansiBlack#1a1a1a
  • terminal.ansiBlue#8aadff
  • terminal.ansiBrightBlack#4a4a4a
  • terminal.ansiBrightBlue#a7c7ff
  • terminal.ansiBrightCyan#66f6ff
  • terminal.ansiBrightGreen#b7f774
  • terminal.ansiBrightMagenta#ffe599
  • terminal.ansiBrightRed#ffc078
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffe066
  • terminal.ansiCyan#00d7ff
  • terminal.ansiGreen#9be564
  • terminal.ansiMagenta#d8c071
  • terminal.ansiRed#ffb86b
  • terminal.ansiWhite#f1f2e6
  • terminal.ansiYellow#ffd166
  • terminal.background#0a0a0a
  • terminal.foreground#f1f2e6
  • titleBar.activeBackground#0a0a0a
  • titleBar.activeForeground#b0b0b0
  • titleBar.border#1a1a1a
  • titleBar.inactiveBackground#0a0a0a
  • titleBar.inactiveForeground#4a4a4a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7f8f86ccitalic
variable, string constant.other.placeholder#d8ddd3
constant.other.color#d6bd72
invalid, invalid.illegal#d7a06f
keyword, storage.type, storage.modifier#5f9fc6
keyword.control#5f9fc6
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#879eaa
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#45b8d2
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#22d3d3
meta.block variable.other#cbdadb
support.other.variable, string.other.link#9fbd95
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#d7a06f
variable.parameter, variable.parameter.function, meta.function.parameters variable, meta.parameters variable#a7c7b4
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#a2c876
constant.other.key, constant.other.object.key, meta.object-literal.key, meta.object-literal.key string, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js, source.js constant.other.object.key.js string.unquoted.label.js, source.ts constant.other.object.key.ts string.unquoted.label.ts, support.type.property-name.json#9ab7d8
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#789dd0
support.type#6f98bd
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#b4c47e
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#d3dbd1
variable.language#58c6b4italic
entity.name.method.js#36cfe3italic
meta.class-method.js entity.name.function.js, variable.function.constructor#5ddbd8
entity.other.attribute-name#9bc77f
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#9bc77fitalic
entity.other.attribute-name.class#74c8aa
source.sass keyword.control#c0b071
markup.inserted#91c76b
markup.deleted#d7a06f
markup.changed#7db3ad
string.regexp#58c6b4
constant.character.escape#d6bd72
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#c0b071italic
source.js constant.other.object.key.js string.unquoted.label.js#9ab7d8italic
source.json meta.structure.dictionary.json support.type.property-name.json#9ab7d8
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#9ab7d8
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#9ab7d8
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#9ab7d8
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#9ab7d8
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#9ab7d8
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#9ab7d8
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#9ab7d8
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#9ab7d8
text.html.markdown, punctuation.definition.list_item.markdown#d8ddd3
text.html.markdown markup.inline.raw.markdown#ffd166
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#7f8f86cc
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#45b8d2
markup.italic#7f8f86ccitalic
markup.bold, markup.bold string#d6bd72bold
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#c0b071bold
markup.underline#45b8d2underline
markup.quote punctuation.definition.blockquote.markdown#7f8f86cc
markup.quoteitalic
string.other.link.title.markdown#83c5be
string.other.link.description.title.markdown#45b8d2
constant.other.reference.link.markdown#c0b071
markup.raw.block#d6bd72
markup.raw.block.fenced.markdown#c7c9d1
punctuation.definition.fenced.markdown#7a8a99
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#c7c9d1
variable.language.fenced.markdown#c0b071
meta.separator#7a8a99bold
markup.table#d8ddd3