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#212121
  • activityBar.foreground#b1b1b1
  • activityBar.inactiveForeground#616161
  • activityBarBadge.background#616161
  • activityBarBadge.foreground#2b2b2b
  • button.background#5a4a3a
  • editor.background#212121
  • editor.foreground#b1b1b1
  • editor.lineHighlightBackground#2b2b2b
  • editor.selectionBackground#2b2b2b
  • editor.symbolHighlightBackground#4f4f4fd0
  • editor.wordHighlightBackground#4f4f4fd0
  • editorGutter.addedBackground#bfd088
  • editorGutter.deletedBackground#db7857
  • editorGutter.modifiedBackground#ebcb8b
  • editorInlayHint.background#2b2b2b
  • editorInlayHint.foreground#616161
  • focusBorder#5a4a3a
  • list.activeSelectionBackground#4f4f4f
  • list.activeSelectionForeground#d1d1d1
  • list.inactiveSelectionBackground#2b2b2b
  • list.inactiveSelectionForeground#d1d1d1
  • menu.background#212121
  • scrollbarSlider.background#2b2b2b
  • selection.background#2b2b2b
  • sideBar.background#212121
  • sideBar.foreground#b1b1b1
  • sideBarTitle.foreground#616161
  • statusBar.background#212121
  • statusBar.foreground#616161
  • terminal.ansiBlack#9bc2b2
  • terminal.ansiBlue#c0b3a6
  • terminal.ansiBrightBlack#acb6ca
  • terminal.ansiBrightBlue#c0b3a6
  • terminal.ansiBrightCyan#c49ead
  • terminal.ansiBrightGreen#ad7777
  • terminal.ansiBrightMagenta#db7857
  • terminal.ansiBrightRed#bfd088
  • terminal.ansiBrightWhite#efefef
  • terminal.ansiBrightYellow#ebcb8b
  • terminal.ansiCyan#c49ead
  • terminal.ansiGreen#ad7777
  • terminal.ansiMagenta#db7857
  • terminal.ansiRed#bfd088
  • terminal.ansiWhite#d1d1d1
  • terminal.ansiYellow#ebcb8b
  • terminal.foreground#d1d1d1
  • titleBar.activeBackground#212121
  • titleBar.activeForeground#616161

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#616161
variable, string constant.other.placeholder, meta.block variable.other, variable.language, support.other.variable, string.other.link, variable.parameter, parameter#d1d1d1
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#d1d1d1
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#d1d1d1
keyword, storage.type, storage.modifier, keyword.control, keyword.other.unit, keyword.other, meta.tag.sgml, markup.deleted.git_gutter#ad7777
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#c0b3a6
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method, entity.name.type.object.qml#c0baa4
punctuation.definition.tag, punctuation.section.embedded#616161
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#c0baa4
*url*, *link*, *uri*underline
text.html.markdown, punctuation.definition.list_item.markdown#efefef
text.html.markdown markup.inline.raw.markdown#d1d1d1
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#d1d1d1
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#d1d1d1
constant.other.reference.link.markdown#c49ead
variable.language.fenced.markdown#d1d1d1
meta.separator#d1d1d1bold
markup.table#efefef

Shiki preview

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

Loading...

Dim Fire - Coding Theme