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