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
  • badge.background#aaa
  • badge.foreground#fafafa
  • diffEditor.insertedTextBackground#9c824a55
  • diffEditor.removedTextBackground#64B5F655
  • editor.background#f3f0e0
  • editor.findMatchBackground#95a5a677
  • editor.findMatchHighlightBackground#71aac355
  • editor.findRangeHighlightBackground#3f706366
  • editor.lineHighlightBackground#bbc0c425
  • editor.lineHighlightBorderx#9a9b9411
  • editor.selectionBackground#bbc0c455
  • editor.selectionHighlightBackground#bbc0c488
  • editor.wordHighlightBackground#bbc0c4aa
  • editor.wordHighlightStrongBackground#bbc0c4dd
  • editorBracketMatch.background#B1365Bf3
  • editorBracketMatch.border#9F7E6Bf3
  • editorCursor.foreground#544
  • editorGroupHeader.tabsBackground#bbc0c4
  • editorLineNumber.foreground#2a3343a9
  • editorLink.activeForeground#034694
  • errorForeground#B1365Bf3
  • focusBorder#525e54
  • git.color.modified#a50044
  • gitDecoration.modifiedResourceForeground#eae3cd
  • gitDecoration.untrackedResourceForeground#a50044
  • list.activeSelectionBackground#eae3cd
  • list.activeSelectionForeground#677d7f
  • list.dropBackground#999a9d
  • list.errorForeground#a50044
  • list.focusBackground#885f66aa
  • list.highlightForeground#89345d
  • list.hoverBackground#999a9d
  • list.hoverForeground#f5f4e8
  • list.inactiveSelectionBackground#eae3cd55
  • list.inactiveSelectionForeground#30322e
  • scrollbarSlider.background#bbc0c4
  • scrollbarSlider.hoverBackground#C4BE9D
  • selection.background#ebe6d9
  • sideBar.background#bbc0c4
  • sideBar.border#445250c1
  • sideBar.foreground#f9f4f4
  • sideBarSectionHeader.background#aebabee9
  • sideBarSectionHeader.foreground#2a3343e9
  • sideBarTitle.foreground#30322ed1
  • statusBar.background#bbc0c4
  • statusBar.foreground#35495f
  • tab.activeBackground#f3f0e0
  • tab.activeBorder#35495f
  • tab.activeForeground#35495f
  • tab.border#bbc0c4
  • tab.inactiveBackground#bbc0c4
  • tab.inactiveForeground#fff
  • tab.unfocusedActiveBackground#bbc0c4
  • tab.unfocusedActiveBorder#bbc0c4
  • tab.unfocusedActiveForeground#fff
  • widget.shadow#8382aebb

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source.json#6a3951
source.css#6a3951
source.go#6a3951
comment#D27837
constant.language#D27837
constant.other#CF722E
keyword.control.flow.js#BB672A
keyword.control.flow.jsx#D27837
keyword.control.flow.ts#D47F41
keyword.control.flow.tsx#D27837
keyword.control.module.js#D27837
keyword.control.module.jsx#CF722E
keyword.control.module.ts#D6854A
keyword.control.module.tsx#D98C54
keyword.operator.accessor#D27837
markup.italic#D98C54
meta.import.js#D27837
meta.import.jsx#D47F41
meta.import.ts#D27837
meta.import.tsx#D27837
meta.object-literal.key.js#D6854A
meta.object-literal.key.jsx#CF722E
meta.object-literal.key.ts#D27837
meta.object-literal.key.tsx#D27837
meta.paragraph.markdown#CF722E
punctuation.definition.block.js#D47F41
punctuation.definition.block.jsx#D6854A
punctuation.definition.block.ts#D98C54
punctuation.definition.block.tsx#D27837
punctuation.separator.parameter.js#D27837
punctuation.separator.parameter.jsx#D27837
punctuation.separator.parameter.ts#CF722E
punctuation.separator.parameter.tsx#C56C2C
string.quoted.single.js#CF722E
string.quoted.single.jsx#D27837
string.quoted.single.ts#CF722E
string.quoted.single.tsx#D27837
string.quoted.single.json#C56C2C
support.class.promise.js#D47F41
support.class.promise.jsx#D27837
support.class.promise.ts#D27837
support.class.promise.tsx#D27837
support.function#D27837
support.function.console.js#D6854A
support.function.console.jsx#D27837
support.function.console.ts#D27837
support.function.console.tsx#D27837
support.type.object.console.js#D27837
support.type.object.console.jsx#CF722E
support.type.object.console.ts#D27837
support.type.object.console.tsx#D27837
variable.parameter#BB672A
meta.tag.js#D76376
meta.tag.jsx#cf455c
meta.tag.ts#BE3148
meta.tag.tsx#CC3B53
variable.language#CC3B53
invalid#cf455cunderline
constant.numeric#cf455c
meta.brace.square.js#CC3B53
meta.brace.square.jsx#BE3148
meta.brace.square.ts#cf455c
meta.brace.square.tsx#D24F65
meta.var.expr.js#cf455c
meta.var.expr.jsx#cf455c
meta.var.expr.ts#C8344C
meta.var.expr.tsx#cf455c
keyword.control.import.js#CC3B53
keyword.control.import.jsx#D76376
keyword.control.import.ts#CC3B53
keyword.control.import.tsx#cf455c
keyword.control.from.js#D76376
keyword.control.from.jsx#C8344C
keyword.control.from.ts#D24F65
keyword.control.from.tsx#cf455c
keyword.control.export.js#C8344C
keyword.control.export.jsx#D4596D
keyword.control.export.ts#CC3B53
keyword.control.export.tsx#cf455c
keyword.control.default.js#CC3B53
keyword.control.default.jsx#cf455c
keyword.control.default.ts#cf455c
keyword.control.default.tsx#D76376
support.type.object.module.js#D24F65
support.type.object.module.jsx#D24F65
support.type.object.module.ts#C8344C
support.type.object.module.tsx#cf455c
punctuation.definition.parameters.begin.js#cf455c
punctuation.definition.parameters.begin.jsx#BE3148
punctuation.definition.parameters.begin.ts#cf455c
punctuation.definition.parameters.begin.tsx#cf455c
punctuation.definition.parameters.end.js#cf455c
punctuation.definition.parameters.end.jsx#D4596D
punctuation.definition.parameters.end.ts#D76376
punctuation.definition.parameters.end.tsx#D4596D
punctuation.definition.parameters.end.js#CC3B53
punctuation.definition.parameters.end.jsx#cf455c
punctuation.definition.parameters.end.ts#D76376
punctuation.definition.parameters.end.tsx#cf455c
markup.quote#cf455c
entity.other.attribute-name.js#D4596D
entity.other.attribute-name.jsx#cf455c
entity.other.attribute-name.ts#CC3B53
entity.other.attribute-name.tsx#cf455c
meta.parameters.js#CC3B53
meta.parameters.jsx#cf455c
meta.parameters.ts#D4596D
meta.parameters.tsx#cf455c
variable.other.class.js#cf455c
variable.other.class.jsx#cf455c
variable.other.class.ts#cf455c
variable.other.class.tsx#cf455c
constant.other.object.key.js#C8344C
constant.other.object.key.jsx#C8344C
constant.other.object.key.ts#D4596D
constant.other.object.key.tsx#CC3B53
entity.name.function.method#cf455c
string.quoted.single.js#cf455c
string.quoted.single.jsx#D24F65
string.quoted.single.ts#cf455c
string.quoted.single.tsx#cf455c
support.type.property-name.json#BE3148
variable.other.property.js#cf455c
variable.other.property.jsx#D76376
variable.other.property.ts#CC3B53
variable.other.property.tsx#CC3B53
entity.name.class#cf455cunderline
comment.block.documentation#743E58
comment.line.double-slash#6a3951
constant.language.null.js#6a3951
constant.language.null.jsx#78415C
constant.language.null.ts#6a3951
constant.language.null.tsx#65364D
entity.name.type#743E58
entity.other.inherited-class#65364D
markup.heading.markdown#6F3C55
meta.brace.round.js#65364D
meta.brace.round.jsx#65364D
meta.brace.round.ts#6a3951
meta.brace.round.tsx#65364D
entity.name.function#6a3951underline
meta.tag.attributes.js#6F3C55
meta.tag.attributes.jsx#6a3951
meta.tag.attributes.ts#65364D
meta.tag.attributes.tsx#6a3951
punctuation.accessor.js#6a3951
punctuation.accessor.jsx#743E58
punctuation.accessor.ts#6a3951
punctuation.accessor.tsx#6a3951
punctuation.separator.comma.js#6a3951
punctuation.separator.comma.jsx#60344A
punctuation.separator.comma.ts#6a3951
punctuation.separator.comma.tsx#6a3951
source.js#65364D
source.jsx#6a3951
source.ts#65364D
source.tsx#65364D
storage.modifier.async.js#65364D
storage.modifier.async.jsx#6a3951
storage.modifier.async.ts#6a3951
storage.modifier.async.tsx#65364D
support.class.builtin.js#60344A
support.class.builtin.jsx#6a3951
support.class.builtin.ts#6a3951
support.class.builtin.tsx#6a3951
support.type.primitive.js#6F3C55
support.type.primitive.jsx#6F3C55
support.type.primitive.ts#65364D
support.type.primitive.tsx#743E58
support.variable.property.js#65364D
support.variable.property.jsx#65364D
support.variable.property.ts#6a3951
support.variable.property.tsx#6F3C55
variable#6a3951
variable.other.object.js#6a3951
variable.other.object.jsx#65364D
variable.other.object.ts#6a3951
variable.other.object.tsx#6a3951
variable.other.readwrite#65364D
variable.other.readwrite.js#6F3C55
variable.other.readwrite.jsx#6a3951
variable.other.readwrite.ts#60344A
variable.other.readwrite.tsx#6a3951
constant.character#3b6160
constant.language.boolean#3b6160
entity.name.tag#385D5Cunderline
keyword#385D5C
markup.italic#3b6160
punctuation.accessor.js#385D5C
punctuation.accessor.jsx#3b6160
punctuation.accessor.ts#3b6160
punctuation.accessor.tsx#3E6564
punctuation.separator.key-value.js#3b6160
punctuation.separator.key-value.jsx#406A69
punctuation.separator.key-value.ts#3E6564
punctuation.separator.key-value.tsx#3b6160
storage.modifier.js#406A69
storage.modifier.jsx#3b6160
storage.modifier.ts#406A69
storage.modifier.tsx#3E6564
storage.type#3b6160
string.template#3E6564
support.constant#3b6160
support.function.dom.js#365857
support.function.dom.jsx#3b6160
support.function.dom.ts#3E6564
support.function.dom.tsx#3b6160
support.variable.property.js#3b6160
support.variable.property.jsx#3b6160
support.variable.property.ts#3b6160
support.variable.property.tsx#385D5C
variable.language.constructor#3b6160underline
variable.language.this#385D5C
AmericanDad by selfrefactor - VS Code Theme