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#f8f8f8
  • activityBar.foreground#ff9e18
  • activityBar.inactiveForeground#8c8c8c
  • activityBarBadge.background#ff9e18
  • activityBarBadge.foreground#ffffff
  • badge.background#ff9e18
  • badge.foreground#ffffff
  • button.background#ff9e18
  • button.foreground#ffffff
  • button.hoverBackground#e68d15
  • editor.background#ffffff
  • editor.findMatchBackground#ff9e1855
  • editor.findMatchHighlightBackground#ff9e1833
  • editor.foreground#2e3440
  • editor.lineHighlightBackground#f5f5f5
  • editor.selectionBackground#ff9e1844
  • editor.selectionHighlightBackground#ff9e1822
  • editorBracketMatch.background#ff9e1833
  • editorBracketMatch.border#ff9e18
  • editorCursor.foreground#ff9e18
  • editorIndentGuide.activeBackground1#ff9e18
  • editorIndentGuide.background1#e5e5e5
  • editorLineNumber.activeForeground#ff9e18
  • editorLineNumber.foreground#b0b0b0
  • editorWhitespace.foreground#d0d0d0
  • editorWidget.background#ffffff
  • editorWidget.border#ff9e18
  • focusBorder#ff9e18
  • input.background#ffffff
  • input.border#d0d0d0
  • input.foreground#2e3440
  • inputOption.activeBorder#ff9e18
  • list.activeSelectionBackground#ff9e1833
  • list.activeSelectionForeground#ff9e18
  • list.focusOutline#ff9e18
  • list.hoverBackground#f5f5f5
  • list.inactiveSelectionBackground#eeeeee
  • notificationLink.foreground#ff9e18
  • panel.background#fafafa
  • panel.border#e0e0e0
  • panelTitle.activeForeground#ff9e18
  • panelTitle.inactiveForeground#6a6a6a
  • peekView.border#ff9e18
  • peekViewEditor.background#ffffff
  • peekViewResult.background#fafafa
  • peekViewTitle.background#f8f8f8
  • progressBar.background#ff9e18
  • sideBar.background#fafafa
  • sideBar.foreground#4a4a4a
  • sideBarSectionHeader.background#f0f0f0
  • sideBarSectionHeader.foreground#ff9e18
  • sideBarTitle.foreground#ff9e18
  • statusBar.background#f0f0f0
  • statusBar.border#e0e0e0
  • statusBar.debuggingBackground#ff9e18
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#4a4a4a
  • statusBar.noFolderBackground#f0f0f0
  • tab.activeBackground#ffffff
  • tab.activeBorder#ff9e18
  • tab.activeBorderTop#ff9e18
  • tab.activeForeground#ff9e18
  • tab.border#e5e5e5
  • tab.inactiveBackground#f0f0f0
  • tab.inactiveForeground#6a6a6a
  • terminal.ansiBrightYellow#ffb347
  • terminal.ansiYellow#ff9e18
  • terminal.foreground#2e3440
  • titleBar.activeBackground#f0f0f0
  • titleBar.activeForeground#4a4a4a
  • titleBar.border#e0e0e0
  • titleBar.inactiveBackground#f0f0f0
  • titleBar.inactiveForeground#8c8c8c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9e9e9eitalic
variable, string constant.other.placeholder#2e3440
constant.other.color#333333
invalid, invalid.illegal#d32f2f
keyword, storage.type, storage.modifier#ff9e18bold
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#0277bd
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#c62828
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#c77700
meta.block variable.other#c62828
support.other.variable, string.other.link#c62828
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#d68500
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#558b2f
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#ff9e18
support.type#00838f
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#00838f
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#d32f2f
variable.language#d32f2fitalic
entity.name.method.js#c77700italic
meta.class-method.js entity.name.function.js, variable.function.constructor#c77700
entity.other.attribute-name#ff9e18
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#ff9e18italic
entity.other.attribute-name.class#ff9e18
source.sass keyword.control#c77700
markup.inserted#558b2f
markup.deleted#d32f2f
markup.changed#ff9e18
string.regexp#0277bd
constant.character.escape#0277bd
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#c77700italic
source.js constant.other.object.key.js string.unquoted.label.js#d32f2fitalic
source.json meta.structure.dictionary.json support.type.property-name.json#ff9e18
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#c77700
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#d68500
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#d32f2f
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#8e6340
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#c77700
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#c62828
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#ff9e18
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#558b2f
text.html.markdown, punctuation.definition.list_item.markdown#2e3440
text.html.markdown markup.inline.raw.markdown#ff9e18
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#9e9e9e
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#558b2fbold
markup.italic#c62828italic
markup.bold, markup.bold string#c62828bold
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#c62828bold
markup.underline#d68500underline
markup.quote punctuation.definition.blockquote.markdown#9e9e9e
markup.quote#4a4a4aitalic
string.other.link.title.markdown#0277bd
string.other.link.description.title.markdown#ff9e18
constant.other.reference.link.markdown#ff9e18
markup.raw.block#ff9e18
markup.raw.block.fenced.markdown#f5f5f5
punctuation.definition.fenced.markdown#d0d0d0
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#2e3440
variable.language.fenced.markdown#9e9e9e
meta.separator#9e9e9ebold
markup.table#2e3440