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.background#161616
  • activityBar.foreground#a0a0a0
  • activityBarBadge.background#3ecf8e
  • activityBarBadge.foreground#000
  • badge.background#3ecf8e
  • badge.foreground#000
  • button.background#3ecf8e
  • button.foreground#000
  • button.hoverBackground#3ecf8eA8
  • diffEditor.insertedLineBackground#3ecf8e15
  • diffEditor.insertedTextBackground#3ecf8e15
  • diffEditor.removedLineBackground#3ecf8e15
  • diffEditor.removedTextBackground#3ecf8e15
  • editor.background#101010
  • editor.foreground#f5f5f5
  • editor.selectionBackground#232323
  • editor.selectionHighlightBackground#23232325
  • editorBracketHighlight.foreground1#a0a0a0
  • editorBracketHighlight.foreground2#a0a0a0
  • editorBracketHighlight.foreground3#a0a0a0
  • editorBracketHighlight.foreground4#a0a0a0
  • editorBracketHighlight.foreground5#a0a0a0
  • editorBracketHighlight.foreground6#a0a0a0
  • editorBracketHighlight.unexpectedBracket.foreground#3ecf8e80
  • editorError.foreground#ff6060
  • editorGroupHeader.tabsBackground#161616
  • editorGutter.addedBackground#3ecf8e99
  • editorGutter.deletedBackground#3ecf8e80
  • editorGutter.modifiedBackground#3ecf8e99
  • editorHoverWidget.background#161616
  • editorHoverWidget.border#282828
  • editorInlayHint.background#1C1C1C
  • editorInlayHint.foreground#a0a0a0
  • editorLineNumber.foreground#505050
  • editorOverviewRuler.border#161616
  • editorWarning.foreground#ffadad99
  • editorWidget.background#161616
  • focusBorder#3ecf8e
  • icon.foreground#a0a0a0
  • input.background#1C1C1C
  • list.activeSelectionBackground#232323
  • list.activeSelectionForeground#3ecf8e
  • list.errorForeground#3ecf8e80
  • list.highlightForeground#3ecf8e
  • list.hoverBackground#282828
  • list.inactiveSelectionBackground#232323
  • scrollbarSlider.background#34343480
  • scrollbarSlider.hoverBackground#343434
  • selection.background#666
  • settings.modifiedItemIndicator#3ecf8e
  • sideBar.background#131313
  • sideBarSectionHeader.background#161616
  • sideBarSectionHeader.foreground#a0a0a0
  • sideBarTitle.foreground#a0a0a0
  • statusBar.background#161616
  • statusBar.debuggingBackground#3ecf8e
  • statusBar.debuggingForeground#FFF
  • statusBar.foreground#a0a0a0
  • statusBarItem.remoteBackground#3ecf8e
  • statusBarItem.remoteForeground#000
  • tab.activeBackground#1a1a1a
  • tab.border#202020
  • tab.inactiveBackground#161616
  • textLink.activeForeground#3ecf8eA8
  • textLink.foreground#3ecf8e
  • titleBar.activeBackground#161616
  • titleBar.activeForeground#7e7e7e
  • titleBar.inactiveBackground#161616
  • titleBar.inactiveForeground#707070

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8b8b8b94
variable, string constant.other.placeholder, entity.name.tag#3ecf8e
constant.other.color#a4a4a4
invalid, invalid.illegal#ff8b8b
keyword, storage.type, storage.modifier#2596be
keyword.control, constant.other.color, 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#2596be
meta.object.key, variable.other#e9e9e9
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#3ecf8e
entity.name.function, variable.function, support.function, keyword.other.special-method#b6a6f7
meta.object-literal.key, meta.object-literal.key entity.name.function, meta.definition.property entity.name.function, variable.object.property, variable.other.property#e9e9e9
meta.block variable.other#e9e9e9
support.other.variable, string.other.link#c7c7c7
variable.parameter#f0c8a2
constant.numeric, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other, constant.language.boolean#3ecf8e
string, constant.other.symbol, constant.other.key, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#3ecf8e
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#3ecf8e
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, source.postcss support.type.property-name, support.type.vendored.property-name.css, source.css.scss entity.name.tag, variable.parameter.keyframe-list.css, meta.property-name.css, variable.parameter.url.scss, meta.property-value.scss, meta.property-value.css#e9e9e9
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#3ecf8e80
variable.language, token.variable.parameter.function#3ecf8e80
entity.name.method.js, meta.class-method.js entity.name.function.js, variable.function.constructor#3ecf8e
entity.other.attribute-name#a0a0a0
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#3ecf8e
punctuation.definition.tag#d8d8d8
entity.other.inherited-class#3ecf8e80
comment, punctuation.definition.comment#75715E
comment.block.documentation#75715E
string.regexp#3ecf8e
constant.character.escape#3ecf8e
punctuation.section.embedded#3ecf8e80
punctuation.section.embedded, meta.brace, punctuation.section.class.begin, punctuation.section.class.end, meta.method punctuation.definition.parameters.begin, meta.method punctuation.definition.parameters.end, meta.method punctuation.definition.parameters, meta.brace.round#e7e7e7
entity.name.section#a0a0a0
support.type.property-name.json, meta.object-literal.key#eeeeee
text.html.markdown, punctuation.definition.list_item.markdown#a0a0a0
text.html.markdown markup.inline.raw.markdown#a0a0a0
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#a0a0a0
text.html.markdown meta.dummy.line-break#a0a0a0
markup.heading, markup.heading entity.name#a0a0a0
markup.italic#a0a0a0italic
markup.bold, markup.bold string#a0a0a0bold
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#a0a0a0bold italic
markup.underline#a0a0a0underline
markup.quote#3ecf8eitalic
string.other.link#3ecf8eunderline
markup.raw.block#3ecf8e
markup.raw.inline#3ecf8e