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#d0d0d0
  • activityBar.foreground#999999
  • activityBarBadge.background#719899
  • editor.background#e0e0e0
  • editor.foreground#616161
  • editor.lineHighlightBackground#d9d9d9
  • editor.selectionBackground#bbddde
  • editorGroupHeader.tabsBackground#d1d0d1
  • editorGutter.background#d0d0d0
  • editorLineNumber.activeForeground#be7572
  • editorLineNumber.foreground#a5a486
  • list.activeSelectionBackground#d9d9d9
  • list.activeSelectionForeground#616161
  • list.hoverBackground#d9d9d9
  • list.inactiveSelectionBackground#d9d9d9
  • list.inactiveSelectionForeground#616161
  • sideBar.background#e1e1e1
  • statusBar.background#997371
  • statusBar.foreground#deddbc
  • tab.activeBackground#e0e0e0
  • tab.activeBorder#00000000
  • tab.activeForeground#dfdebd
  • tab.border#00000000
  • tab.inactiveBackground#bfbfbf
  • tab.inactiveForeground#75758f
  • 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#e0e0e0
  • terminal.foreground#616161

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#616161ff
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
entity.other.attribute-name.pseudo-class.css#727100
keyword.control.logical.operator.less#727100
keyword.other.unit.px.css#9a7372
constant.numeric#9a7372
comment#719872
support.type.property-name.css#9a7200
punctuation.separator.list.comma.css#E17899
entity.other.attribute-name.class.css#9a7200bold
entity.name.tag.cssbold
constant.other.rgb-value.css#007173
meta.tag.sgml.doctype.html, meta.tag.sgml.html#719872
entity.name.tag.block.any.html, entity.name.tag.tsx,entity.name.tag.jsx, entity.name.tag.html, entity.name.tag.structure.any.html, entity.name.tag.inline.any.html#719899bold
support.class.component.tsx,support.class.component.jsx#719899bold
entity.other.attribute-name.id.html, entity.other.attribute-name.tsx,entity.other.attribute-name.jsx, entity.other.attribute-name.html#9a7200
entity.other.attribute-name.localname.xml#9a7200
entity.other.attribute-name.xml#9a7200
entity.other.attribute-name.namespace.xml#9a7200
entity.name.tag.localname.xml#719899
entity.name.tag.xml#9a7200
meta.tag.preprocessor.xml#719872

Shiki preview

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

Loading...

Seoul by Ryan Olson - VS Code Theme