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#1e1e1e
  • activityBar.foreground#e8e8e8
  • activityBar.inactiveForeground#888888
  • activityBarBadge.background#58a6ff
  • activityBarBadge.foreground#1e1e1e
  • breadcrumb.background#1e1e1e
  • breadcrumb.foreground#bbbbbb
  • dropdown.background#252525
  • dropdown.border#333333
  • dropdown.foreground#e8e8e8
  • editor.background#1e1e1e
  • editor.foreground#e8e8e8
  • editor.inactiveSelectionBackground#007acc30
  • editor.lineHighlightBackground#252525
  • editor.selectionBackground#007acc60
  • editorBracketMatch.background#333333
  • editorBracketMatch.border#58a6ff
  • editorCursor.foreground#58a6ff
  • editorGroupHeader.tabsBackground#1e1e1e
  • editorGroupHeader.tabsBorder#1e1e1e
  • editorLineNumber.activeForeground#bbbbbb
  • editorLineNumber.foreground#666666
  • editorWidget.background#1e1e1e
  • editorWidget.border#333333
  • focusBorder#333333
  • input.background#252525
  • input.border#333333
  • input.foreground#e8e8e8
  • list.activeSelectionBackground#333333
  • list.focusBackground#007acc40
  • list.hoverBackground#2a2a2a
  • list.inactiveSelectionBackground#333333
  • notificationCenterHeader.background#252525
  • notifications.background#1e1e1e
  • notifications.foreground#e8e8e8
  • notificationToast.border#333333
  • panel.background#1e1e1e
  • panel.border#333333
  • panelTitle.activeForeground#e8e8e8
  • panelTitle.inactiveForeground#aaaaaa
  • scrollbarSlider.activeBackground#666666b3
  • scrollbarSlider.background#44444480
  • scrollbarSlider.hoverBackground#55555580
  • sideBar.background#1e1e1e
  • sideBar.foreground#e8e8e8
  • sideBarSectionHeader.background#252525
  • sideBarSectionHeader.foreground#e8e8e8
  • sideBarTitle.foreground#aaaaaa
  • statusBar.background#1e1e1e
  • statusBar.debuggingBackground#7d2eff
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#bbbbbb
  • statusBar.noFolderBackground#1e1e1e
  • statusBar.noFolderForeground#bbbbbb
  • tab.activeBackground#1e1e1e
  • tab.activeForeground#e8e8e8
  • tab.inactiveBackground#252525
  • tab.inactiveForeground#aaaaaa
  • terminal.ansiBlack#333333
  • terminal.ansiBlue#79c0ff
  • terminal.ansiCyan#a5d6ff
  • terminal.ansiGreen#7ee787
  • terminal.ansiMagenta#ff7b72
  • terminal.ansiRed#ffa198
  • terminal.ansiWhite#e8e8e8
  • terminal.ansiYellow#ffa657
  • terminal.background#1e1e1e
  • terminal.foreground#e8e8e8
  • titleBar.activeBackground#1e1e1e
  • titleBar.activeForeground#e8e8e8
  • titleBar.inactiveBackground#1e1e1e
  • titleBar.inactiveForeground#888888

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#888888italic
variable, string constant.other.placeholder#ffa657
constant.other.color#79c0ff
invalid, invalid.illegal#ffa198
keyword, storage.type, storage.modifier#ff7b72
keyword.control, 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#79c0ff
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#ffa198
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#7ee787
meta.block variable.other#ffa198
support.other.variable, string.other.link#ffa198
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#79c0ff
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#a5d6ff
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#ffa657
support.type#7ee787
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#79c0ff
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#ffa198
variable.language#ff7b72italic
entity.name.method.js#7ee787italic
meta.class-method.js entity.name.function.js, variable.function.constructor#7ee787
entity.other.attribute-name#ff7b72
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#ffa657italic
entity.other.attribute-name.class#ffa657
source.sass keyword.control#7ee787
markup.inserted#7ee787
markup.deleted#ffa198
markup.changed#ff7b72
string.regexp#79c0ff
constant.character.escape#79c0ff
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#7ee787italic
source.js constant.other.object.key.js string.unquoted.label.js#ffa198italic
source.json meta.structure.dictionary.json support.type.property-name.json#ff7b72
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ffa657
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#79c0ff
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#ffa198
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#7ee787
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#a5d6ff
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#ffa657
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#ff7b72
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#7ee787
text.html.markdown, punctuation.definition.list_item.markdown#e8e8e8
text.html.markdown markup.inline.raw.markdown#ffa657
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#888888
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#7ee787
markup.italic#ffa198italic
markup.bold, markup.bold string#ffa198bold
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#ffa198bold italic
markup.underline#ffa657underline
markup.quote punctuation.definition.blockquote.markdown#888888
markup.quote#aaaaaaitalic
string.other.link.title.markdown#79c0ff
string.other.link.description.title.markdown#ff7b72
constant.other.reference.link.markdown#ffa657
markup.raw.block#ffa657
markup.raw.block.fenced.markdown#2a2a2a
punctuation.definition.fenced.markdown#888888
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#e8e8e8
variable.language.fenced.markdown#888888
meta.separator#888888bold
markup.table#e8e8e8
SenerDark Theme by seneryty - VS Code Theme