Skip to main content
Coding Theme

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#825d3f
  • activityBar.foreground#ffe542
  • activityBar.inactiveForeground#cc9735
  • activityBarBadge.background#ef6b74
  • activityBarBadge.foreground#ffffff
  • editor.background#544e4a
  • editor.findMatchBackground#F3690038
  • editor.findMatchBorder#F36900bb
  • editor.findMatchHighlightBackground#F3690038
  • editor.findMatchHighlightBorder#F3690060
  • editor.foreground#bfb9b3
  • editor.selectionBackground#345fbb
  • editor.wordHighlightBackground#bfb9b320
  • editor.wordHighlightBorder#bfb9b3bb
  • editor.wordHighlightStrongBackground#bfb9b320
  • editor.wordHighlightStrongBorder#bfb9b3bb
  • editorGroupHeader.tabsBackground#4c3f34
  • editorInlayHint.foreground#8e8a8699
  • gitDecoration.modifiedResourceForeground#e8ba3c
  • gitDecoration.untrackedResourceForeground#b7e288
  • menu.background#4c3f34
  • menu.foreground#bfb9b3
  • menu.selectionBackground#544e4a
  • menu.selectionForeground#d8d2cb
  • menu.separatorBackground#8e8a86
  • sideBar.background#4c3f34
  • sideBar.foreground#bfb9b3
  • sideBarTitle.foreground#bbbbbb
  • statusBar.background#bfb9b3
  • statusBar.debuggingBackground#ef924f
  • statusBar.foreground#38332c
  • tab.inactiveBackground#4c3f34
  • tab.inactiveForeground#bfb9b3
  • terminal.foreground#bfb9b3

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
variable#bfb9b3
meta.object-literal.key#8e8a86italic
punctuation, meta.brace#ddd7ce
keyword.operator, storage.type.function.arrow, punctuation.terminator.statement, punctuation.terminator.rule, punctuation.separator, punctuation.comma, punctuation.other.comma, punctuation.semi, punctuation.definition.typeparameters, punctuation.definition.entity.css, punctuation.brackets.angle, punctuation.accessor, punctuation.other.period, punctuation.section.angle-brackets, punctuation.vararg-ellipses#7d9599bold
storage, keyword.operator.new, keyword.operator.expression, keyword.control, keyword.local, keyword.other, keyword.function, keyword.package, keyword.struct, keyword.var, storage.type.interface, storage.type.class, storage.type.function, storage.type.rust, storage.type.type, storage.type.template, storage.type.namespace.definition, meta.var.expr storage.type, punctuation.definition.directive#db9c69
storage.type, keyword.type, entity.name.type, entity.name.module, entity.other.inherited-class#9aeacc
support.type.primitive, entity.name.type.primitive, entity.name.type.lifetime, entity.name.type.numeric, storage.type.boolean, keyword.type#ef924f
constant.language, variable.other.enummember#bce0d2
variable.language, keyword.other.this#ef924fitalic
comment#7a8a8citalic
punctuation.definition.comment#7a8a8c
entity.name.function, support.function#e0c398
string.quoted, string.template, string.other.link.title#e8ba3c
punctuation.definition.string, string.quoted.byte.raw, punctuation.definition.char#ffe542
punctuation.definition.keyword.scss#db9c69bold
constant.numeric#c6e288
meta.delimiter.decimal.period#88cc2a
keyword.other.unit#88cc2aitalic
support.constant.color.w3c-standard-color-name#bce0d2italic
constant.other.color.rgb-value.hex#bfb9b3
punctuation.definition.constant#ddd7cebold
entity.name.tag#57a7af
entity.other.attribute-name#8e8a86
support.class.component#8fd8e0
heading, markup.heading#e8ba3cbold
punctuation.definition.heading#ffe542bold
meta.link.inline#ddd7ce
markup.underline.link#ef924funderline
markup.fenced_code, markup.inline.raw.string#8fd8e0
markup.fenced_code punctuation.definition, markup.inline.raw.string punctuation.definition#57a7afbold
markup.boldbold
markup.italicitalic
markup.quote#8e8a86
Brynrun by Johnny Jingle - VS Code Theme