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#222222
  • dropdown.background#222222
  • editor.background#222222
  • editor.lineHighlightBackground#444444
  • editor.selectionBackground#5D5D5D
  • editor.selectionHighlightBackground#404040
  • editorBracketMatch.background#222222
  • editorBracketMatch.border#eee
  • editorCursor.background#5D5D5D
  • editorGroupHeader.tabsBackground#222222
  • editorGutter.background#222222
  • editorLineNumber.foreground#eee
  • input.background#444444
  • list.activeSelectionBackground#444444
  • list.focusBackground#444444
  • list.hoverBackground#444444
  • list.inactiveSelectionBackground#444444
  • panel.background#222222
  • sideBar.background#222222
  • sideBarSectionHeader.background#222222
  • statusBar.background#222222
  • tab.activeBackground#222222
  • tab.hoverBackground#444444
  • tab.inactiveBackground#222222
  • terminal.ansiBlack#616161
  • terminal.ansiBlue#97bcbc
  • terminal.ansiBrightBlack#616161
  • terminal.ansiBrightBlue#97bcbc
  • terminal.ansiBrightCyan#badcfb
  • terminal.ansiBrightGreen#719872
  • terminal.ansiBrightMagenta#cf2172
  • terminal.ansiBrightRed#e12672
  • terminal.ansiBrightYellow#e4c203
  • terminal.ansiCyan#badcfb
  • terminal.ansiGreen#719872
  • terminal.ansiMagenta#cf2172
  • terminal.ansiRed#e12672
  • terminal.ansiYellow#e4c203
  • terminal.background#222222
  • terminal.foreground#d9d9d9
  • titleBar.activeBackground#222222
  • titleBar.inactiveBackground#222222

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
token.info-token#316bcd—
token.warn-token#cd9731—
token.error-token#cd3131—
token.debug-token#800080—
storage.type—
comment#719872—
string#badcfb—
storage.type#E17899—
storage.type.ts#9A7599—
keyword#E12672—
keyword.control.import#E17899—
keyword.control.export#E17899—
keyword.control.as#E17899—
keyword.control.from#E17899—
variable.other#616161—
support.function#616161—
support.class#616161—
keyword.control.flow#97bcbc—
meta.brace.square#AB8500—
keyword.operator.new#BE7572—
support.type.property-name#97bcbc—
punctuation.definition.block#A67200—
punctuation.definition.dictionary.begin, punctuation.definition.dictionary.end#A67200—
keyword.operator.assignment#BE7572—
punctuation.definition.parameters.begin, punctuation.definition.parameters.end#BE7572—
storage.type.function.arrow#BE7572—
meta.brace.round#BE7572—
constant.numeric.decimal#9A7372—
storage.type—
storage.type.class#53A0C0—
storage.modifier#53A0C0—
entity.name.type#A47A33—
support.type#A47A33—
entity.other.inherited-class#A47A33—
variable.language#9A7599—
keyword.operator.type.annotation#616161—
keyword.operator#616161—
keyword.operator.logical#E17899—
keyword.operator.comparison#BE7572—
keyword.control.loop#0099BD—
variable.other.less#9A7599—
entity.name.tag.css#97bcbc—
punctuation.definition.entity.css#E17899—
entity.other.attribute-name.class.css#9A7200—
support.constant.property-value.css#007173—
support.type.property-name.css#616161—
keyword.other.unit.px.css#616161—
comment#5f875f—
constant.numeric#875f5f—
keyword.other.unit.percentage.css#875f5f—
keyword.other.important.css#E19972—
keyword.control.default#9A7599—
variable.other#D9D9D9—
support.function#D9D9D9—
support.class#D9D9D9—
keyword.operator.type.annotation#D9D9D9—
keyword.operator#D9D9D9—
support.type.property-name.css#D9D9D9—
keyword.other.unit.px.css#D9D9D9—
entity.name.type#e0bb71—
support.type#e0bb71—
entity.other.inherited-class#e0bb71—
variable.language#FFBFBD—
storage.type.ts#FFBFBD—
storage.type.class#4496B3—
storage.modifier#4496B3—
keyword.control.flow#97bb98—
string#98BCBD—
punctuation.definition.block#DFDEBD—
punctuation.definition.dictionary.begin, punctuation.definition.dictionary.end#DFDEBD—
keyword.operator.assignment#DEDD99—
meta.brace.round#DEDD99—
constant.numeric.decimal#DACC89—
constant.numeric#DACC89—
support.type.property-name#97bb98—
constant.language#999ABD—
keyword.control.conditional#98BEDE—
storage.type.function.arrow#DEDD99—
keyword.operator.comparison#DEDD99—
variable.other.object.js#DEDD99—
keyword.operator.logical#738EBD—
keyword.control.logical.operator.less#BDBB72—
entity.other.attribute-name.pseudo-class.css#6FBCBD—
keyword.other.important.css#FFBD98—
keyword.other.unit.percentage.css#FFDE99—
support.constant.font-name.css#6FBCBD—
constant.other.rgb-value.css#6FBCBD—
support.type.property-name.css#e0bb71bold
comment#719872—
support.constant.property-value.css#6FBCBD—
keyword.other.unit.px.css#FFDE99—
constant.numeric#FFDE99—
entity.other.attribute-name.class.css#e0bb71bold
punctuation.definition.entity.css#E09B99—
entity.name.tag.css#97bb98bold
keyword.control.loop.js#97bb98bold
keyword.control.flow.js#97bb98bold
variable.other.less#FFBFBD—
keyword.control.trycatch#FFBD80—
storage.modifier.async#97bb98—
entity.name.section.markdown, punctuation.definition.heading.markdown#80bcbd—
comment#719872—
meta.tag.sgml.doctype.html, meta.tag.sgml.html#719872—
entity.name.tag.block.any.html, entity.name.tag.tsx, entity.name.tag.jsx, support.class.component.tsx, support.class.component.jsx, entity.name.tag.structure.any.html, entity.name.tag.inline.any.html, entity.name.tag.html#97bb98bold
entity.other.attribute-name.html, entity.other.attribute-name.id.html, entity.other.attribute-name.tsx, entity.other.attribute-name.jsx#e0bb71—
keyword.control.switch#E17899—
support.class.component.js#E17899—
support.class.console.js#97bb98—
entity.other.attribute-name.localname.xml#e0bb71—
entity.other.attribute-name.xml#e0bb71—
entity.other.attribute-name.namespace.xml#e0bb71—
entity.name.tag.localname.xml#97bb98—
entity.name.tag.xml#e0bb71—
entity.name.function.js#e0bb71—
meta.tag.preprocessor.xml#98BCBD—
entity.name.tag.js#98BCBD—
seoulRemix by Michael Halisky - VS Code Theme