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.activeBorder#5a4a3a
  • activityBar.background#171717
  • activityBar.foreground#c1c1c1
  • activityBar.inactiveForeground#717171
  • activityBarBadge.background#717171
  • activityBarBadge.foreground#272727
  • button.background#5a4a3a
  • editor.background#171717
  • editor.foreground#c1c1c1
  • editor.lineHighlightBackground#272727
  • editor.selectionBackground#272727
  • editor.symbolHighlightBackground#414141d0
  • editor.wordHighlightBackground#414141d0
  • editorGutter.addedBackground#bfd088
  • editorGutter.deletedBackground#db7857
  • editorGutter.modifiedBackground#ebcb8b
  • editorInlayHint.background#272727
  • editorInlayHint.foreground#717171
  • focusBorder#5a4a3a
  • list.activeSelectionBackground#414141
  • list.activeSelectionForeground#e1e1e1
  • list.inactiveSelectionBackground#272727
  • list.inactiveSelectionForeground#e1e1e1
  • menu.background#171717
  • scrollbarSlider.background#272727
  • selection.background#272727
  • sideBar.background#171717
  • sideBar.foreground#c1c1c1
  • sideBarTitle.foreground#717171
  • statusBar.background#171717
  • statusBar.foreground#717171
  • terminal.ansiBlack#9bc2b2
  • terminal.ansiBlue#c5a789
  • terminal.ansiBrightBlack#acb6ca
  • terminal.ansiBrightBlue#c5a789
  • terminal.ansiBrightCyan#c49ead
  • terminal.ansiBrightGreen#c97b7b
  • terminal.ansiBrightMagenta#db7857
  • terminal.ansiBrightRed#bfd088
  • terminal.ansiBrightWhite#f1f1f1
  • terminal.ansiBrightYellow#ebcb8b
  • terminal.ansiCyan#c49ead
  • terminal.ansiGreen#c97b7b
  • terminal.ansiMagenta#db7857
  • terminal.ansiRed#bfd088
  • terminal.ansiWhite#e1e1e1
  • terminal.ansiYellow#ebcb8b
  • terminal.foreground#e1e1e1
  • titleBar.activeBackground#171717
  • titleBar.activeForeground#717171

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#717171
variable, string constant.other.placeholder, meta.block variable.other, variable.language, support.other.variable, string.other.link, variable.parameter, parameter#e1e1e1
constant.other.color, punctuation, meta.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, source.js constant.other.object.key.js string.unquoted.label.js#e1e1e1
entity.name, support.type, entity.other.inherited-class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types, support.type#e1e1e1
keyword, storage.type, storage.modifier, keyword.control, keyword.other.unit, keyword.other, meta.tag.sgml, markup.deleted.git_gutter#c97b7b
constant.numeric, constant.language, support.constant, constant.character, constant.escape, 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, string.regexp, constant.character.escape#c5a789
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method, entity.name.type.object.qml#c9bd91
punctuation.definition.tag, punctuation.section.embedded#717171
support.class, entity.other.attribute-name, entity.name.tag, entity.other.attribute-name.class, entity.name.method.js, meta.class-method.js entity.name.function.js, variable.function.constructor, source.sass keyword.control, text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#c9bd91
*url*, *link*, *uri*underline
text.html.markdown, punctuation.definition.list_item.markdown#f1f1f1
text.html.markdown markup.inline.raw.markdown#e1e1e1
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#e1e1e1
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#9bc2b2
markup.italic#acb6caitalic
markup.bold, markup.bold string#acb6cabold
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#acb6cabold
markup.underline#acb6caunderline
markup.quote punctuation.definition.blockquote.markdown#9bc2b2
markup.quoteitalic
string.other.link.title.markdown#acb6ca
string.other.link.description.title.markdown#e1e1e1
constant.other.reference.link.markdown#c49ead
variable.language.fenced.markdown#e1e1e1
meta.separator#e1e1e1bold
markup.table#f1f1f1

Shiki preview

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

Loading...

Dim Fire - Coding Theme