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#828d83e9
  • editor.background#2A3343
  • editor.lineHighlightBackground#0e2236
  • editor.selectionBackground#F8E2E2D2
  • editorBracketMatch.background#E1DDD9f3
  • editorBracketMatch.border#9AD6E3
  • editorGroupHeader.tabsBackground#445A63f3
  • editorGutter.background#445A63F4
  • editorLineNumber.foreground#828d83e9
  • scrollbarSlider.background#828d83e9
  • scrollbarSlider.hoverBackground#828d83e9
  • sideBar.background#828d83e9
  • statusBar.background#828d83e9
  • tab.activeBackground#445A63F4
  • tab.activeForeground#E48D78
  • tab.border#445A63F4
  • tab.inactiveBackground#828d83e9
  • tab.inactiveForeground#F0C0B4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
constant.language.boolean#FDFDD8
constant.language.null.js#F6F658
constant.language.null.jsx#FBFBBF
constant.language.null.ts#FBFBBF
constant.language.null.tsx#fafaa5
entity.name.class#fafaa5underline
entity.name.function#FBFBBFunderline
entity.name.type#FEFEF2underline
markup.heading.markdown#F9F98B
punctuation.separator.comma.js#fafaa5
punctuation.separator.comma.jsx#fafaa5
punctuation.separator.comma.ts#F9F98B
punctuation.separator.comma.tsx#FDFDD8
support.variable.property.js#fafaa5
support.variable.property.jsx#fafaa5
support.variable.property.ts#fafaa5
support.variable.property.tsx#fafaa5
support.type.primitive.js#fafaa5
support.type.primitive.jsx#F9F98B
support.type.primitive.ts#F9F98B
support.type.primitive.tsx#F9F98B
variable#fafaa5
punctuation.separator.key-value.js#E48D78
punctuation.separator.key-value.jsx#E07C64
punctuation.separator.key-value.ts#E07C64
punctuation.separator.key-value.tsx#e89e8c
storage.modifier.async.js#e89e8c
storage.modifier.async.jsx#ECAFA0
storage.modifier.async.ts#e89e8c
storage.modifier.async.tsx#E48D78
meta.brace.round.js#DC6B50
meta.brace.round.jsx#F0C0B4
meta.brace.round.ts#E48D78
meta.brace.round.tsx#e89e8c
entity.other.inherited-class#e89e8c
support.class.builtin.js#e89e8c
support.class.builtin.jsx#E07C64
support.class.builtin.ts#e89e8c
support.class.builtin.tsx#F0C0B4
meta.tag.attributes.js#e89e8c
meta.tag.attributes.jsx#e89e8c
meta.tag.attributes.ts#F0C0B4
meta.tag.attributes.tsx#F4D1C8
keyword.control.module.js#e89e8c
keyword.control.module.jsx#e89e8c
keyword.control.module.ts#E48D78
keyword.control.module.tsx#ECAFA0
keyword.operator.accessor#E48D78
invalid#e89e8cunderline
constant.numeric#e89e8c
keyword#e89e8c
meta.var.expr.js#e89e8c
meta.var.expr.jsx#F0C0B4
meta.var.expr.ts#DC6B50
meta.var.expr.tsx#e89e8c
keyword.control.import.js#e89e8c
keyword.control.import.jsx#E48D78
keyword.control.import.ts#e89e8c
keyword.control.import.tsx#e89e8c
keyword.control.from.js#e89e8c
keyword.control.from.jsx#e89e8c
keyword.control.from.ts#E07C64
keyword.control.from.tsx#e89e8c
keyword.control.export.js#e89e8c
keyword.control.export.jsx#ECAFA0
keyword.control.export.ts#e89e8c
keyword.control.export.tsx#e89e8c
keyword.control.default.js#E07C64
keyword.control.default.jsx#e89e8c
keyword.control.default.ts#ECAFA0
keyword.control.default.tsx#ECAFA0
support.type.object.module.js#E07C64
support.type.object.module.jsx#E07C64
support.type.object.module.ts#e89e8c
support.type.object.module.tsx#F4D1C8
punctuation.definition.parameters.begin.js#FB9700
punctuation.definition.parameters.begin.jsx#BE7200
punctuation.definition.parameters.begin.ts#DD8500
punctuation.definition.parameters.begin.tsx#BE7200
punctuation.definition.parameters.end.js#FB9700
punctuation.definition.parameters.end.jsx#BE7200
punctuation.definition.parameters.end.ts#ec8e00
punctuation.definition.parameters.end.tsx#ec8e00
punctuation.definition.parameters.end.js#FFA41B
punctuation.definition.parameters.end.jsx#ec8e00
punctuation.definition.parameters.end.ts#ec8e00
punctuation.definition.parameters.end.tsx#DD8500
markup.quote#ec8e00
meta.tag.js#DD8500
meta.tag.jsx#ec8e00
meta.tag.ts#FB9700
meta.tag.tsx#CD7C00
meta.parameters.js#ec8e00
meta.parameters.jsx#ec8e00
meta.parameters.ts#ec8e00
meta.parameters.tsx#ec8e00
meta.brace.square.js#ec8e00
meta.brace.square.jsx#DD8500
meta.brace.square.ts#DD8500
meta.brace.square.tsx#FF9E0C
variable.other.class.js#CD7C00
variable.other.class.jsx#ec8e00
variable.other.class.ts#FFA41B
variable.other.class.tsx#FF9E0C
constant.other.object.key.js#FF9E0C
constant.other.object.key.jsx#FF9E0C
constant.other.object.key.ts#ec8e00
constant.other.object.key.tsx#FFA41B
entity.name.function.method#CD7C00
string.template#FF9E0C
support.type.property-name.json#ec8e00
variable.other.property.js#DD8500
variable.other.property.jsx#ec8e00
variable.other.property.ts#ec8e00
variable.other.property.tsx#FB9700
variable.parameter#7FC4D0
support.function#B5DDE4
meta.import.js#7FC4D0
meta.import.jsx#a3d5dd
meta.import.ts#B5DDE4
meta.import.tsx#a3d5dd
meta.paragraph.markdown#B5DDE4
entity.other.attribute-name.js#a3d5dd
entity.other.attribute-name.jsx#a3d5dd
entity.other.attribute-name.ts#DAEEF1
entity.other.attribute-name.tsx#91CDD6
string.quoted.single.js#C7E6EA
string.quoted.single.jsx#6CBCC9
string.quoted.single.ts#a3d5dd
string.quoted.single.tsx#a3d5dd
string.quoted.single.json#a3d5dd
support.class.promise.js#a3d5dd
support.class.promise.jsx#91CDD6
support.class.promise.ts#a3d5dd
support.class.promise.tsx#a3d5dd
support.type.object.console.js#a3d5dd
support.type.object.console.jsx#a3d5dd
support.type.object.console.ts#a3d5dd
support.type.object.console.tsx#91CDD6
support.function.console.js#B5DDE4
support.function.console.jsx#6CBCC9
support.function.console.ts#a3d5dd
support.function.console.tsx#a3d5dd
punctuation.definition.block.js#91CDD6
punctuation.definition.block.jsx#7FC4D0
punctuation.definition.block.ts#B5DDE4
punctuation.definition.block.tsx#a3d5dd
support.constant#B0DFE9
punctuation.separator.parameter.js#c6e8ef
punctuation.separator.parameter.jsx#c6e8ef
punctuation.separator.parameter.ts#B0DFE9
punctuation.separator.parameter.tsx#DCF1F5
constant.character#FFFFFF
constant.language#FFFFFF
constant.other#c6e8ef
comment#DCF1F5
markup.italic#c6e8ef
meta.object-literal.key.js#83CDDC
meta.object-literal.key.jsx#c6e8ef
meta.object-literal.key.ts#DCF1F5
meta.object-literal.key.tsx#c6e8ef
comment.block.documentation#c6e8ef
comment.line.double-slash#c6e8ef
punctuation.accessor.js#c6e8ef
punctuation.accessor.jsx#B0DFE9
punctuation.accessor.ts#9AD6E3
punctuation.accessor.tsx#c6e8ef
variable.language#FFFFFF
variable.other.object.js#B0DFE9
variable.other.object.jsx#B0DFE9
variable.other.object.ts#c6e8ef
variable.other.object.tsx#c6e8ef
variable.other.readwrite#B0DFE9
variable.other.readwrite.js#DCF1F5
variable.other.readwrite.jsx#c6e8ef
variable.other.readwrite.ts#83CDDC
variable.other.readwrite.tsx#B0DFE9
entity.name.tag#E1DDD9C0underline
markup.italic#E1DDD9f3
punctuation.accessor.js#E1DDD9E8
punctuation.accessor.jsx#E1DDD9C0
punctuation.accessor.ts#E1DDD9C0
punctuation.accessor.tsx#E1DDD97A
source.js#E1DDD9E8
source.jsx#E1DDD9C0
source.ts#E1DDD9E8
source.tsx#E1DDD9A2
storage.modifier.js#E1DDD9A2
storage.modifier.jsx#E1DDD9C0
storage.modifier.ts#E1DDD9C0
storage.modifier.tsx#E1DDD9C0
storage.type#E1DDD9E8
string.quoted.single.js#E1DDD9C0
string.quoted.single.jsx#E1DDD9C0
string.quoted.single.ts#E1DDD9A2
string.quoted.single.tsx#E1DDD9C0
support.function.dom.js#E1DDD9E8
support.function.dom.jsx#E1DDD9C0
support.function.dom.ts#E1DDD98E
support.function.dom.tsx#E1DDD9C0
support.variable.property.js#E1DDD9C0
support.variable.property.jsx#E1DDD9E8
support.variable.property.ts#E1DDD9C0
support.variable.property.tsx#E1DDD9C0
variable.language.constructor#E1DDD9C0underline
variable.language.this#E1DDD9E8
BecauseAsk by selfrefactor - VS Code Theme