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#005f85bb
  • activityBar.activeBorder#008bb2
  • activityBar.background#051825
  • badge.background#1a7396
  • breadcrumb.background#1a476777
  • breadcrumb.focusForeground#eeeeee
  • checkbox.background#0c1219
  • checkbox.border#121b25
  • debugToolBar.background#051825
  • diffEditor.insertedTextBackground#6b961634
  • diffEditor.removedTextBackground#6210af34
  • dropdown.background#081722
  • dropdown.border#121b25
  • editor.background#051825
  • editor.findMatchBackground#214158bb
  • editor.findMatchBorder#ffee02AA
  • editor.findMatchHighlightBackground#ffee0222
  • editor.findMatchHighlightBorder#ffee0255
  • editor.foreground#ffffff
  • editor.lineHighlightBackground#28406152
  • editor.rangeHighlightBackground#0c1219
  • editor.selectionBackground#28406188
  • editor.selectionHighlightBackground#0099ff34
  • editor.wordHighlightBackground#f6ff0011
  • editor.wordHighlightBorder#f6ff0022
  • editorCursor.foreground#ffcc00
  • editorGroupHeader.tabsBackground#051825
  • editorHoverWidget.background#041c2c
  • editorHoverWidget.foreground#f2f2f2
  • editorIndentGuide.activeBackground#80cbc470
  • editorIndentGuide.background#244d6aaa
  • editorLineNumber.activeForeground#ffffff
  • editorLineNumber.foreground#81a3bb
  • editorMarkerNavigation.background#121b25
  • editorPane.background#1f313d
  • editorSuggestWidget.background#111b22
  • editorWhitespace.foreground#a9bcc6
  • editorWidget.background#162530
  • editorWidget.border#0f89c2
  • input.background#0c1219
  • list.activeSelectionBackground#024b6a
  • list.focusBackground#024861
  • list.highlightForeground#2db6e8
  • list.hoverBackground#223c4d88
  • list.inactiveSelectionBackground#024361bd
  • menu.background#0f2c3fee
  • menu.foreground#ffffff
  • menubar.selectionForeground#dddddd
  • minimapSlider.activeBackground#36556aaa
  • minimapSlider.background#36556a88
  • minimapSlider.hoverBackground#36556a99
  • notificationCenterHeader.background#111b22
  • notifications.background#1f313d
  • notifications.border#111b22
  • panel.background#111b22
  • panel.border#2d4758
  • peekViewEditor.background#051119
  • peekViewEditor.matchHighlightBackground#1d3d5377
  • peekViewResult.background#091219
  • peekViewResult.fileForeground#ffffff
  • peekViewTitle.background#1f313d
  • quickInput.background#101e29
  • scrollbarSlider.activeBackground#2e4c6199
  • scrollbarSlider.background#1a476777
  • scrollbarSlider.hoverBackground#28404f
  • settings.checkboxBackground#0c1219
  • settings.checkboxBorder#121b25
  • settings.dropdownBackground#0c1219
  • settings.dropdownBorder#121b25
  • settings.numberInputBackground#0c1219
  • settings.textInputBackground#0c1219
  • sideBar.background#051825
  • sideBarSectionHeader.background#1a476777
  • statusBar.background#051825
  • statusBarItem.remoteBackground#051825
  • tab.activeBackground#1a476777
  • tab.activeBorderTop#008bb2
  • tab.border#1a476777
  • tab.inactiveBackground#051825
  • tab.unfocusedActiveBackground#15222b
  • tab.unfocusedActiveBorder#5c7485
  • tab.unfocusedInactiveBackground#051825
  • terminal.background#0c1219
  • titleBar.activeBackground#051825
  • titleBar.activeForeground#ffffff
  • titleBar.inactiveBackground#051825
  • titleBar.inactiveForeground#81a3bb
  • tree.inactiveIndentGuidesStroke#2f7eb777
  • tree.indentGuidesStroke#2f7eb7
  • widget.shadow#050a0fbb
  • window.activeBorder#1b3a52
  • window.inactiveBorder#051825

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#82a5beitalic
invalid, invalid.illegal, invalid.broken, invalid.unimplemented, invalid.deprecated, text.html.markdown, punctuation.definition.list_item.markdown, markup.raw.block.fenced.markdown, punctuation.section.class.end, variable, support.other.variable#ffffff
storage, storage.modifier, brackethighlighter.unmatched, markup.deleted, entity.name.module.js, variable.import.parameter.js, variable.other.class.js, variable.language, meta.tag.sgml, markup.deleted.git_gutter, support.other.variable, string.other.link#ff5470italic
entity.name.tag#ff5470
keyword#ff5470
storage.type#d1c2ffitalic
keyword.control, markup.changed, string.other.link.description.title.markdown, markup.raw.block#d1c2ffitalic
meta#ddeeff
keyword.operator, constant.other.color, meta.tag, punctuation.separator.inheritance.php, punctuation.section.embedded#6bd8ff
punctuation.section.embedded#9297dfbold
punctuation#6bd8ff
punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, keyword.other.template, keyword.other.substitution, variable.name, meta.definition.variable.name, support.variable, string constant.other.placeholder, entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method, meta.block-level, variable.other.property.js#00ccff
support.type, support.type.sys-types, meta.object-literal.key, support.orther.namespace.use.php, support.other.namespace.php#B1DFFF
entity.name.class, entity.name.type.class, meta.use.php, support.class#00ffd0
entity.other.attribute-name.class#00ffd0
entity.other.attribute-name#00ffd0italic
entity.other.inherited-class#00ffd0italic
string, constant.other.symbol, constant.other.key, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly, constant.other.object.key.js, string.unquoted.label.js, markup.inserted, entity.name.filename.find-in-files, brackethighlighter.quote#ffdf7e
entity.name.method.js, meta.class-method.js, variable.function.constructor, string.other.link.title.markdown#5b97ff
string.regexp, constant.character.escape#78d9ff
*url*, *link*, *uri*underline
constant.numeric, constant.language, support.constant, constant, constant.character, constant.other, variable.parameter#ffbf75
markup.underline#ffbf75underline
constant.other.reference.link.markdown, markup.changed.git_gutter#00e0f0
variable.language.fenced.markdown, markup.ignored.git_gutter, markup.untracked.git_gutter#7b8f9d
brackethighlighter.default#b9e9ff
token.info-token#6598f1
token.warn-token#ffba39
token.error-token#ff4949
token.debug-token#d198fa
keyword.other.DML.sql#98c3ff
keyword.other.unit#ff647e