Skip to main content
CodingTheme

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#1c232b
  • activityBarBadge.background#267fb5
  • debugToolBar.background#1c232b
  • dropdown.background#202831
  • editor.background#14191f
  • editor.foreground#aec2e0
  • editor.lineHighlightBorder#FFFFFF1a
  • editor.rangeHighlightBackground#FFFFFF0d
  • editorGroup.dropBackground#267fb580
  • editorGroup.focusedEmptyBorder#267fb5
  • editorGroupHeader.tabsBackground#181e25
  • editorHoverWidget.background#181e25
  • editorLineNumber.activeForeground#267fb5
  • editorLineNumber.foreground#FFFFFF4d
  • editorMarkerNavigation.background#181e25
  • editorSuggestWidget.background#000000
  • editorWidget.background#181e25
  • focusBorder#267fb5
  • foreground#aec2e0
  • input.background#202831
  • inputOption.activeBorder#267fb5
  • list.activeSelectionBackground#267fb580
  • list.dropBackground#267fb580
  • list.focusBackground#267fb580
  • list.hoverBackground#FFFFFF1a
  • list.inactiveSelectionBackground#FFFFFF33
  • notifications.background#000000
  • panel.background#181e25
  • panel.border#FFFFFF1a
  • panelTitle.activeBorder#aec2e080
  • panelTitle.inactiveForeground#aec2e080
  • peekView.border#267fb5
  • peekViewEditor.background#101418
  • peekViewResult.background#181e25
  • peekViewTitle.background#14191f
  • pickerGroup.border#FFFFFF1a
  • quickInput.background#000000
  • selection.background#267fb5
  • sideBar.background#181e25
  • sideBar.border#2B2B2B
  • sideBarSectionHeader.background#1c232b
  • statusBar.background#101418
  • statusBar.debuggingBackground#267fb5
  • statusBar.noFolderBackground#101418
  • statusBarItem.activeBackground#267fb580
  • statusBarItem.hoverBackground#FFFFFF1a
  • tab.activeBackground#000000
  • tab.activeBorder#267fb5
  • tab.border#00000033
  • tab.inactiveBackground#1c232b
  • tab.lastPinnedBorder#000000
  • terminal.background#000000
  • titleBar.activeBackground#101418
  • titleBar.inactiveBackground#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#586676italic
variable, string constant.other.placeholder#d0dfe6
constant.other.color#FFB20D
invalid, invalid.illegal#FF5370
keyword#748aa6
storage.type, storage.modifier#267fb5
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#748aa6
meta.jsx.children.js#aec2e0
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#267fb5
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#FFB20D
meta.block variable.other#d0dfe6
support.other.variable, string.other.link#FF410D
constant.numeric#C7F026
variable.parameter#95CC5E
entity.name.import.go#95CC5E
constant.language, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other#267fb5
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#FF410D
support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#d0dfe6
entity.name#FFB20D
support.type#267fb5
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#F79D1E
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#FFB20D
variable.language#267fb5italic
entity.name.method.js#FFB20Ditalic
meta.class-method.js entity.name.function.js, variable.function.constructor#FFB20D
entity.other.attribute-name#FFB20D
punctuation.separator.key-value.js#FFB20D
constant.language.null.js#FFB20D
meta.object-literal.key.js#FF410D
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#FFB20Ditalic
entity.other.attribute-name.class#FFB20D
source.sass keyword.control#FFB20D
markup.inserted#A6E22E
markup.deleted#FF5370
markup.changed#E6DB74
string.regexp#89DDFF
constant.character.escape#FFB20D
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#267fb5italic
source.js constant.other.object.key.js string.unquoted.label.js#FF5370italic
source.json meta.structure.dictionary.json support.type.property-name.json#267fb5
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#FFCB6B
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#F78C6C
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#FF5370
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#C17E70
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#82AAFF
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#f07178
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#C792EA
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#C3E88D
text.html.markdown, punctuation.definition.list_item.markdown#aec2e0
text.html.markdown markup.inline.raw.markdown#267fb5
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#65737E
text.html.markdown meta.dummy.line-break#748aa6
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#95CC5E
markup.italic#f07178italic
markup.bold, markup.bold string#f07178bold
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#f07178bold
markup.underline#95CC5Eunderline
markup.quote punctuation.definition.blockquote.markdown#65737E
string.other.link.title.markdown#267fb5
string.other.link.description.title.markdown#00A8C6
constant.other.reference.link.markdown#FFB20D
markup.raw.block#E6DB74
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#EEFFFF
variable.language.fenced.markdown#65737E
markup.table#EEFFFF
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

Black Hole by Dave Deriso - VS Code Theme