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#011928
  • badge.background#1a7396
  • breadcrumb.background#1a476777
  • breadcrumb.focusForeground#eeeeee
  • checkbox.background#0c1219
  • checkbox.border#121b25
  • debugToolBar.background#011928
  • diffEditor.insertedTextBackground#6b961634
  • diffEditor.removedTextBackground#6210af34
  • dropdown.background#081722
  • dropdown.border#121b25
  • editor.background#011928
  • 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#011928
  • 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#011928
  • sideBarSectionHeader.background#1a476777
  • statusBar.background#011928
  • statusBarItem.remoteBackground#011928
  • tab.activeBackground#1a476777
  • tab.activeBorderTop#008bb2
  • tab.border#1a476777
  • tab.inactiveBackground#011928
  • tab.unfocusedActiveBackground#15222b
  • tab.unfocusedActiveBorder#5c7485
  • tab.unfocusedInactiveBackground#011928
  • terminal.background#0c1219
  • titleBar.activeBackground#011928
  • titleBar.activeForeground#ffffff
  • titleBar.inactiveBackground#011928
  • 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#ff4b5d
entity.name.tag#ff4b5d
keyword#ff4b5d
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#4ba5ff
punctuation.section.embedded#9297dfbold
punctuation#05bdfa
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#00ddff
support.type, support.type.sys-types, meta.object-literal.key, support.orther.namespace.use.php, support.other.namespace.php#91daff
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#ffe777
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#ffb964
markup.underline#ffb964underline
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
HeLmY CoDe Themes by helmy-code - VS Code Theme