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#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
BraveHomer by selfrefactor - VS Code Theme