Skip to main content
CodingTheme

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.background#4b4b4b
  • activityBar.foreground#999999
  • activityBarBadge.background#80bcbd
  • editor.background#4b4b4b
  • editor.foreground#d9d9d9
  • editor.lineHighlightBackground#3f3f3f
  • editor.selectionBackground#327173
  • editorCursor.foreground#d8d8d8
  • editorGroupHeader.noTabsBackground#4b4b4b
  • editorGroupHeader.tabsBackground#757575
  • editorGutter.addedBackground#98bc99
  • editorGutter.background#565656
  • editorGutter.modifiedBackground#4496b3
  • editorLineNumber.activeForeground#be7572
  • editorLineNumber.foreground#999872
  • gitDecoration.modifiedResourceForeground#dfbc72
  • list.activeSelectionBackground#3f3f3f
  • list.activeSelectionForeground#d9d9d9
  • list.hoverBackground#3f3f3f
  • list.inactiveSelectionBackground#3f3f3f
  • list.inactiveSelectionForeground#d9d9d9
  • sideBar.background#4b4b4b
  • statusBar.background#997371
  • statusBar.foreground#deddbc
  • tab.activeBackground#4b4b4b
  • tab.activeBorder#00000000
  • tab.activeForeground#98bcbd
  • tab.border#00000000
  • tab.inactiveBackground#757575
  • tab.inactiveForeground#bfbfbf
  • terminal.ansiBlack#616161
  • terminal.ansiBlue#719899
  • terminal.ansiBrightBlack#616161
  • terminal.ansiBrightBlue#719899
  • terminal.ansiBrightCyan#009799
  • terminal.ansiBrightGreen#719872
  • terminal.ansiBrightMagenta#cf2172
  • terminal.ansiBrightRed#e12672
  • terminal.ansiBrightYellow#e4c203
  • terminal.ansiCyan#009799
  • terminal.ansiGreen#719872
  • terminal.ansiMagenta#cf2172
  • terminal.ansiRed#e12672
  • terminal.ansiYellow#e4c203
  • terminal.background#4b4b4b
  • terminal.foreground#d9d9d9

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#009799
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#719899
keyword.control.conditional#0099BD
meta.brace.square#AB8500
keyword.operator.new#BE7572
support.type.property-name#719899
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#719899
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#DFBC72
support.type#DFBC72
entity.other.inherited-class#DFBC72
variable.language#FFBFBD
storage.type.ts#FFBFBD
storage.type.class#4496B3
storage.modifier#4496B3
keyword.control.flow#98BC99
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#98BC99
constant.language#999ABD
keyword.control.conditional#98BEDE
storage.type.function.arrow#DEDD99
keyword.operator.comparison#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#DFBC72bold
comment#719872
support.constant.property-value.css#6FBCBD
keyword.other.unit.px.css#FFDE99
constant.numeric#FFDE99
entity.other.attribute-name.class.css#DFBC72bold
punctuation.definition.entity.css#E09B99
entity.name.tag.css#98bc99bold
variable.other.less#FFBFBD
keyword.control.trycatch#FFBD80
storage.modifier.async#98BC99
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#98bc99bold
entity.other.attribute-name.html, entity.other.attribute-name.id.html, entity.other.attribute-name.tsx, entity.other.attribute-name.jsx#DFBC72
keyword.control.switch#E17899
entity.other.attribute-name.localname.xml#DFBC72
entity.other.attribute-name.xml#DFBC72
entity.other.attribute-name.namespace.xml#DFBC72
entity.name.tag.localname.xml#98bc99
entity.name.tag.xml#DFBC72
meta.tag.preprocessor.xml#98BCBD

Shiki preview

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

Loading...

Seoul by Ryan Olson - VS Code Theme