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#a56b5c
  • activityBar.background#f9f9f9
  • activityBar.foreground#4e4e4e
  • activityBar.inactiveForeground#afafaf
  • activityBarBadge.background#afafaf
  • activityBarBadge.foreground#e8e8e8
  • button.background#a56b5c
  • editor.background#f9f9f9
  • editor.foreground#4e4e4e
  • editor.lineHighlightBackground#e8e8e8
  • editor.selectionBackground#e8e8e8
  • editor.symbolHighlightBackground#bebebed0
  • editor.wordHighlightBackground#bebebed0
  • editorGutter.addedBackground#cfd088
  • editorGutter.deletedBackground#db7857
  • editorGutter.modifiedBackground#ebcb8b
  • editorInlayHint.background#e8e8e8
  • editorInlayHint.foreground#afafaf
  • focusBorder#a56b5c
  • list.activeSelectionBackground#bebebe
  • list.activeSelectionForeground#1e1e1e
  • list.inactiveSelectionBackground#e8e8e8
  • list.inactiveSelectionForeground#1e1e1e
  • menu.background#f9f9f9
  • scrollbarSlider.background#e8e8e8
  • selection.background#e8e8e8
  • sideBar.background#f9f9f9
  • sideBar.foreground#4e4e4e
  • sideBarTitle.foreground#afafaf
  • statusBar.background#f9f9f9
  • statusBar.foreground#afafaf
  • terminal.ansiBlack#2b6742
  • terminal.ansiBlue#aaa036
  • terminal.ansiBrightBlack#4c567a
  • terminal.ansiBrightBlue#aaa036
  • terminal.ansiBrightCyan#845e6d
  • terminal.ansiBrightGreen#bb4c33
  • terminal.ansiBrightMagenta#db7857
  • terminal.ansiBrightRed#cfd088
  • terminal.ansiBrightWhite#0f0f0f
  • terminal.ansiBrightYellow#ebcb8b
  • terminal.ansiCyan#845e6d
  • terminal.ansiGreen#bb4c33
  • terminal.ansiMagenta#db7857
  • terminal.ansiRed#cfd088
  • terminal.ansiWhite#1e1e1e
  • terminal.ansiYellow#ebcb8b
  • terminal.foreground#1e1e1e
  • titleBar.activeBackground#f9f9f9
  • titleBar.activeForeground#afafaf

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#afafaf
variable, string constant.other.placeholder, meta.block variable.other, variable.language, support.other.variable, string.other.link, variable.parameter, parameter#1e1e1e
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#1e1e1e
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#1e1e1e
keyword, storage.type, storage.modifier, keyword.control, keyword.other.unit, keyword.other, meta.tag.sgml, markup.deleted.git_gutter#bb4c33
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#aaa036
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method, entity.name.type.object.qml#ca791a
punctuation.definition.tag, punctuation.section.embedded#afafaf
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#ca791a
*url*, *link*, *uri*underline
text.html.markdown, punctuation.definition.list_item.markdown#0f0f0f
text.html.markdown markup.inline.raw.markdown#1e1e1e
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#1e1e1e
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#2b6742
markup.italic#4c567aitalic
markup.bold, markup.bold string#4c567abold
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#4c567abold
markup.underline#4c567aunderline
markup.quote punctuation.definition.blockquote.markdown#2b6742
markup.quoteitalic
string.other.link.title.markdown#4c567a
string.other.link.description.title.markdown#1e1e1e
constant.other.reference.link.markdown#845e6d
variable.language.fenced.markdown#1e1e1e
meta.separator#1e1e1ebold
markup.table#0f0f0f

Shiki preview

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

Loading...

Dim Fire - Coding Theme