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#1a4767
  • badge.background#1a7396
  • breadcrumb.background#1a4767cc
  • breadcrumb.focusForeground#eeeeee
  • checkbox.background#0c1219
  • checkbox.border#121b25
  • debugToolBar.background#1a4767
  • 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#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#0D181F
  • 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#1a4767ee
  • menu.foreground#ffffff
  • menubar.selectionForeground#dddddd
  • minimapSlider.activeBackground#36556aaa
  • minimapSlider.background#36556a88
  • minimapSlider.hoverBackground#36556a99
  • notificationCenterHeader.background#0D181F
  • notifications.background#1f313d
  • notifications.border#0D181F
  • panel.background#0D181F
  • 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#1a476799
  • 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#1a4767cc
  • statusBar.background#008bb2
  • statusBarItem.remoteBackground#008bb2
  • tab.activeBackground#285e85
  • tab.activeBorderTop#008bb2
  • tab.border#1a4767cc
  • tab.inactiveBackground#051825
  • tab.unfocusedActiveBackground#15222b
  • tab.unfocusedActiveBorder#5c7485
  • tab.unfocusedInactiveBackground#051825
  • terminal.background#0c1219
  • titleBar.activeBackground#1a4767
  • titleBar.activeForeground#ffffff
  • titleBar.inactiveBackground#1a4767
  • 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—
variable.parameter#9BE6FFitalic
HeLmY CoDe Themes by helmy-code - VS Code Theme