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#2c2c2c
  • badge.background#6a6c0b
  • badge.foreground#d5d5d5
  • editor.background#1b1b1b
  • editor.findMatchBackground#00666d91
  • editor.findMatchHighlightBackground#39647e5d
  • editor.foreground#e1e1e1
  • editor.inactiveSelectionBackground#9f9f9f3a
  • editor.lineHighlightBackground#FFFFFF08
  • editor.lineHighlightBorder#FFFFFF00
  • editor.selectionBackground#00666d91
  • editor.selectionHighlightBackground#39647e5d
  • editor.wordHighlightBackground#45718d2d
  • editor.wordHighlightStrongBackground#45718d2d
  • editorBracketMatch.border#4bc5ff
  • editorGroupHeader.tabsBackground#212121
  • editorLineNumber.foreground#5b5b5b
  • editorOverviewRuler.border#00000000
  • editorSuggestWidget.highlightForeground#6dc5ff
  • foreground#ffffff
  • list.activeSelectionBackground#2f3131
  • list.activeSelectionForeground#eaeaea
  • list.focusBackground#3f3f3f
  • list.inactiveSelectionBackground#2f3131
  • list.inactiveSelectionForeground#bfbfbf
  • panelTitle.activeForeground#eaeaea
  • panelTitle.inactiveForeground#808080
  • sideBar.background#212121
  • sideBar.foreground#cccccc
  • sideBarSectionHeader.background#2c2c2c
  • sideBarSectionHeader.foreground#808080
  • statusBar.background#212121
  • statusBar.debuggingBackground#252525
  • statusBar.foreground#707070
  • statusBar.noFolderBackground#252525
  • tab.activeBackground#1b1b1b
  • tab.activeBorderTop#ffffff
  • tab.activeForeground#ffffff
  • tab.inactiveBackground#212121
  • tab.inactiveForeground#707070
  • tab.unfocusedActiveBackground#1b1b1b
  • tab.unfocusedActiveBorderTop#afafaf
  • tab.unfocusedActiveForeground#afafaf
  • tab.unfocusedInactiveForeground#707070
  • terminal.background#1b1b1b
  • terminal.foreground#e1e1e1

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.comment#838689
text.html, variable#e1e1e1
keyword.operator.type, punctuation, delimiter, bracket, brace, paren, delimiter.tag, punctuation.tag, tag.html, tag.xml, meta.property-value punctuation.separator.key-value, punctuation.definition.metadata.md, string.link.md, meta.brace#7b7d80
string, meta.property-value.string, support.constant.property-value.string, meta.structure.dictionary.value.json string.quoted.double.json, meta.structure.dictionary.json string.quoted.double.json, meta.preprocessor string#bea687
constant.other.color.rgb-value, constant.numeric, meta.property-value.numeric, support.constant.property-value.numeric, meta.property-value.color, support.constant.property-value.color#4bc5ff
constant.character, constant.other,entity.name.function, entity.name.class, entity.other.inherited-class, entity.other.attribute-name, entity.other.attribute-name.html, entity.name, support.type.property-name, entity.name.tag.table, meta.structure.dictionary.json string.quoted.double.json#9ac0ae
keyword.operator.increment, keyword.operator.decrement, keyword.control.conditional, keyword.operator.expression.for, keyword.operator.expression.in, storage.type.function.arrow, keyword.control.loop, keyword.operator.optional, keyword.operator.rest, keyword.operator.logical, keyword.operator.assignment, keyword.operator.relational, keyword.operator.comparison, keyword, meta.property-value.keyword, support.constant.property-value.keyword, meta.preprocessor.keyword, keyword.other.use, keyword.other.function.use, keyword.other.namespace, keyword.other.new, keyword.other.special-method, keyword.other.use-as#fff23d
keyword.operator, keyword.control, storage, storage.type, storage.type.ts, storage.type.var.ts, storage.type.js, storage.type.var.js, storage.type.const.ts, storage.type.let.ts, storage.type.let.js, storage.type.const.js, entity.name.tag#f2e200
meta.object-literal.key#dad5bc
meta.ptr, meta.pointer, meta.address, meta.array.cxx#ff4040
meta.preprocessor#40ff40
entity.name.type.ts, keyword.other.unit, variable.language.this, support.type, support.class, support.function, support.constant,constant.language#bcb3da
variable.parameter#aeaaa1italic
invalid#ff5757
entity.name.tag.css#9ac0ae
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.other.attribute-name.pseudo-class.css#9ac0aeitalic
meta.selector.css, punctuation.definition.entity #f2e200italic
meta.property-name.css, support.type.property-name.css#dad5bcitalic