Skip to main content
Coding Theme

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#C4BE9D
  • diffEditor.insertedTextBackground#9c824a55
  • diffEditor.removedTextBackground#64B5F655
  • editor.background#f3f0e0
  • editor.lineHighlightBackground#bbc0c425
  • editor.selectionBackground#bbc0c455
  • editorBracketMatch.background#B1365Bf3
  • editorBracketMatch.border#9F7E6Bf3
  • editorGroupHeader.tabsBackground#bbc0c4
  • editorLineNumber.foreground#2a3343a9
  • scrollbarSlider.background#bbc0c4
  • scrollbarSlider.hoverBackground#C4BE9D
  • sideBar.background#bbc0c4
  • statusBar.background#bbc0c4
  • tab.activeBackground#f3f0e0
  • tab.activeForeground#35495f
  • tab.inactiveBackground#bbc0c4
  • tab.inactiveForeground#fff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
support.constant#AD8310
punctuation.separator.parameter.js#AD8310
punctuation.separator.parameter.jsx#96710E
punctuation.separator.parameter.ts#96710E
punctuation.separator.parameter.tsx#AD8310
constant.character#AD8310
constant.language#AD8310
constant.other#AD8310
comment#AD8310
markup.italic#A57D0F
meta.object-literal.key.js#A57D0F
meta.object-literal.key.jsx#AD8310
meta.object-literal.key.ts#A57D0F
meta.object-literal.key.tsx#B58911
comment.block.documentation#AD8310
comment.line.double-slash#AD8310
punctuation.accessor.js#B58911
punctuation.accessor.jsx#BD8F11
punctuation.accessor.ts#AD8310
punctuation.accessor.tsx#AD8310
variable.language#A57D0F
variable.other.object.js#AD8310
variable.other.object.jsx#AD8310
variable.other.object.ts#AD8310
variable.other.object.tsx#AD8310
variable.other.readwrite#9D770F
variable.other.readwrite.js#AD8310
variable.other.readwrite.jsx#AD8310
variable.other.readwrite.ts#AD8310
variable.other.readwrite.tsx#AD8310
punctuation.separator.key-value.js#357CA7
punctuation.separator.key-value.jsx#3782AF
punctuation.separator.key-value.ts#3988B7
punctuation.separator.key-value.tsx#3988B7
storage.modifier.async.js#307097
storage.modifier.async.jsx#357CA7
storage.modifier.async.ts#3782AF
storage.modifier.async.tsx#3782AF
meta.brace.round.js#3782AF
meta.brace.round.jsx#3782AF
meta.brace.round.ts#4293C3
meta.brace.round.tsx#32769F
entity.other.inherited-class#32769F
support.class.builtin.js#3988B7
support.class.builtin.jsx#3782AF
support.class.builtin.ts#357CA7
support.class.builtin.tsx#3782AF
meta.tag.attributes.js#357CA7
meta.tag.attributes.jsx#3988B7
meta.tag.attributes.ts#357CA7
meta.tag.attributes.tsx#3782AF
keyword.control.module.js#3782AF
keyword.control.module.jsx#3782AF
keyword.control.module.ts#3988B7
keyword.control.module.tsx#3782AF
keyword.operator.accessor#3782AF
invalid#3782AFunderline
constant.numeric#3782AF
keyword#3782AF
meta.var.expr.js#3782AF
meta.var.expr.jsx#3988B7
meta.var.expr.ts#3988B7
meta.var.expr.tsx#357CA7
keyword.control.import.js#4293C3
keyword.control.import.jsx#357CA7
keyword.control.import.ts#4293C3
keyword.control.import.tsx#3782AF
keyword.control.from.js#3782AF
keyword.control.from.jsx#357CA7
keyword.control.from.ts#3C8EBF
keyword.control.from.tsx#3988B7
keyword.control.export.js#357CA7
keyword.control.export.jsx#307097
keyword.control.export.ts#3782AF
keyword.control.export.tsx#4293C3
keyword.control.default.js#3782AF
keyword.control.default.jsx#3988B7
keyword.control.default.ts#4293C3
keyword.control.default.tsx#3782AF
support.type.object.module.js#32769F
support.type.object.module.jsx#357CA7
support.type.object.module.ts#3782AF
support.type.object.module.tsx#357CA7
punctuation.definition.parameters.begin.js#E0AA15
punctuation.definition.parameters.begin.jsx#C29312
punctuation.definition.parameters.begin.ts#E0AA15
punctuation.definition.parameters.begin.tsx#D6A214
punctuation.definition.parameters.end.js#E0AA15
punctuation.definition.parameters.end.jsx#E0AA15
punctuation.definition.parameters.end.ts#E9B117
punctuation.definition.parameters.end.tsx#E0AA15
punctuation.definition.parameters.end.js#EAB521
punctuation.definition.parameters.end.jsx#E0AA15
punctuation.definition.parameters.end.ts#E0AA15
punctuation.definition.parameters.end.tsx#D6A214
markup.quote#C29312
meta.tag.js#E9B117
meta.tag.jsx#EAB521
meta.tag.ts#CC9B13
meta.tag.tsx#EAB521
meta.parameters.js#E0AA15
meta.parameters.jsx#E9B117
meta.parameters.ts#D6A214
meta.parameters.tsx#E0AA15
meta.brace.square.js#D6A214
meta.brace.square.jsx#E0AA15
meta.brace.square.ts#E0AA15
meta.brace.square.tsx#E0AA15
variable.other.class.js#EBB82B
variable.other.class.jsx#D6A214
variable.other.class.ts#CC9B13
variable.other.class.tsx#E0AA15
constant.other.object.key.js#E0AA15
constant.other.object.key.jsx#EBB82B
constant.other.object.key.ts#E0AA15
constant.other.object.key.tsx#E0AA15
entity.name.function.method#C29312
string.template#E0AA15
support.type.property-name.json#C29312
variable.other.property.js#E0AA15
variable.other.property.jsx#EAB521
variable.other.property.ts#EBB82B
variable.other.property.tsx#E0AA15
entity.name.tag#8E4E54underline
markup.italic#884b50
punctuation.accessor.js#82484C
punctuation.accessor.jsx#884b50
punctuation.accessor.ts#82484C
punctuation.accessor.tsx#764145
source.js#884b50
source.jsx#884b50
source.ts#884b50
source.tsx#884b50
storage.modifier.js#884b50
storage.modifier.jsx#884b50
storage.modifier.ts#82484C
storage.modifier.tsx#884b50
storage.type#9A555B
string.quoted.single.js#82484C
string.quoted.single.jsx#7C4449
string.quoted.single.ts#884b50
string.quoted.single.tsx#884b50
support.function.dom.js#9A555B
support.function.dom.jsx#884b50
support.function.dom.ts#945257
support.function.dom.tsx#82484C
support.variable.property.js#8E4E54
support.variable.property.jsx#884b50
support.variable.property.ts#884b50
support.variable.property.tsx#945257
variable.language.constructor#884b50underline
variable.language.this#764145
constant.language.boolean#C0505E
constant.language.null.js#B84251
constant.language.null.jsx#B84251
constant.language.null.ts#9F3946
constant.language.null.tsx#B84251
entity.name.class#B84251underline
entity.name.function#B03F4Dunderline
entity.name.type#B03F4Dunderline
markup.heading.markdown#B03F4D
punctuation.separator.comma.js#B03F4D
punctuation.separator.comma.jsx#B84251
punctuation.separator.comma.ts#C0505E
punctuation.separator.comma.tsx#9F3946
support.variable.property.js#B84251
support.variable.property.jsx#B84251
support.variable.property.ts#B84251
support.variable.property.tsx#B84251
support.type.primitive.js#B84251
support.type.primitive.jsx#B84251
support.type.primitive.ts#C0505E
support.type.primitive.tsx#B84251
variable#B84251
variable.parameter#3D6A60
support.function#3D6A60
meta.import.js#406F64
meta.import.jsx#3D6A60
meta.import.ts#406F64
meta.import.tsx#406F64
meta.paragraph.markdown#406F64
entity.other.attribute-name.js#406F64
entity.other.attribute-name.jsx#406F64
entity.other.attribute-name.ts#497E72
entity.other.attribute-name.tsx#406F64
string.quoted.single.js#3A655B
string.quoted.single.jsx#406F64
string.quoted.single.ts#3D6A60
string.quoted.single.tsx#3D6A60
string.quoted.single.json#3A655B
support.class.promise.js#3A655B
support.class.promise.jsx#437469
support.class.promise.ts#3A655B
support.class.promise.tsx#497E72
support.type.object.console.js#406F64
support.type.object.console.jsx#376057
support.type.object.console.ts#437469
support.type.object.console.tsx#406F64
support.function.console.js#3D6A60
support.function.console.jsx#3D6A60
support.function.console.ts#437469
support.function.console.tsx#376057
punctuation.definition.block.js#406F64
punctuation.definition.block.jsx#437469
punctuation.definition.block.ts#406F64
punctuation.definition.block.tsx#437469