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