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#FAF8F3
  • editor.findMatchBackground#95a5a677
  • editor.findMatchHighlightBackground#71aac355
  • editor.findRangeHighlightBackground#3f706366
  • editor.lineHighlightBackground#bdc3c725
  • editor.lineHighlightBorderx#9a9b9411
  • editor.selectionBackground#bdc3c755
  • editor.selectionHighlightBackground#bdc3c788
  • editor.wordHighlightBackground#bdc3c7aa
  • editor.wordHighlightStrongBackground#bdc3c7dd
  • editorBracketMatch.background#B1365Bf3
  • editorBracketMatch.border#9F7E6Bf3
  • editorCursor.foreground#544
  • editorGroupHeader.tabsBackground#bdc3c7
  • 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#bdc3c7
  • scrollbarSlider.hoverBackground#C4BE9D
  • selection.background#ebe6d9
  • sideBar.background#bdc3c7
  • sideBar.border#445250c1
  • sideBar.foreground#f9f4f4
  • sideBarSectionHeader.background#aebabee9
  • sideBarSectionHeader.foreground#2a3343e9
  • sideBarTitle.foreground#30322ed1
  • statusBar.background#bdc3c7
  • statusBar.foreground#35495f
  • tab.activeBackground#FAF8F3
  • tab.activeBorder#35495f
  • tab.activeForeground#35495f
  • tab.border#bdc3c7
  • tab.inactiveBackground#bdc3c7
  • tab.inactiveForeground#fff
  • tab.unfocusedActiveBackground#bdc3c7
  • tab.unfocusedActiveBorder#bdc3c7
  • tab.unfocusedActiveForeground#fff
  • widget.shadow#8382aebb

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source.json#bb4741
source.css#bb4741
source.go#bb4741
support.constant#c03546
punctuation.separator.parameter.js#c03546
punctuation.separator.parameter.jsx#A62E3D
punctuation.separator.parameter.ts#A62E3D
punctuation.separator.parameter.tsx#c03546
constant.character#c03546
constant.language#c03546
constant.other#c03546
comment#c03546
markup.italic#B73343
meta.object-literal.key.js#B73343
meta.object-literal.key.jsx#c03546
meta.object-literal.key.ts#B73343
meta.object-literal.key.tsx#C8384A
comment.block.documentation#c03546
comment.line.double-slash#c03546
punctuation.accessor.js#C8384A
punctuation.accessor.jsx#CA4151
punctuation.accessor.ts#c03546
punctuation.accessor.tsx#c03546
variable.language#B73343
variable.other.object.js#c03546
variable.other.object.jsx#c03546
variable.other.object.ts#c03546
variable.other.object.tsx#c03546
variable.other.readwrite#AF3040
variable.other.readwrite.js#c03546
variable.other.readwrite.jsx#c03546
variable.other.readwrite.ts#c03546
variable.other.readwrite.tsx#c03546
punctuation.separator.key-value.js#7D4C8E
punctuation.separator.key-value.jsx#835095
punctuation.separator.key-value.ts#89549C
punctuation.separator.key-value.tsx#89549C
storage.modifier.async.js#714581
storage.modifier.async.jsx#7D4C8E
storage.modifier.async.ts#835095
storage.modifier.async.tsx#835095
meta.brace.round.js#835095
meta.brace.round.jsx#835095
meta.brace.round.ts#945CA8
meta.brace.round.tsx#774988
entity.other.inherited-class#774988
support.class.builtin.js#89549C
support.class.builtin.jsx#835095
support.class.builtin.ts#7D4C8E
support.class.builtin.tsx#835095
meta.tag.attributes.js#7D4C8E
meta.tag.attributes.jsx#89549C
meta.tag.attributes.ts#7D4C8E
meta.tag.attributes.tsx#835095
keyword.control.module.js#835095
keyword.control.module.jsx#835095
keyword.control.module.ts#89549C
keyword.control.module.tsx#835095
keyword.operator.accessor#835095
invalid#835095underline
constant.numeric#835095
keyword#835095
meta.var.expr.js#835095
meta.var.expr.jsx#89549C
meta.var.expr.ts#89549C
meta.var.expr.tsx#7D4C8E
keyword.control.import.js#945CA8
keyword.control.import.jsx#7D4C8E
keyword.control.import.ts#945CA8
keyword.control.import.tsx#835095
keyword.control.from.js#835095
keyword.control.from.jsx#7D4C8E
keyword.control.from.ts#8F57A2
keyword.control.from.tsx#89549C
keyword.control.export.js#7D4C8E
keyword.control.export.jsx#714581
keyword.control.export.ts#835095
keyword.control.export.tsx#945CA8
keyword.control.default.js#835095
keyword.control.default.jsx#89549C
keyword.control.default.ts#945CA8
keyword.control.default.tsx#835095
support.type.object.module.js#774988
support.type.object.module.jsx#7D4C8E
support.type.object.module.ts#835095
support.type.object.module.tsx#7D4C8E
punctuation.definition.parameters.begin.js#bb4741
punctuation.definition.parameters.begin.jsx#A23D38
punctuation.definition.parameters.begin.ts#bb4741
punctuation.definition.parameters.begin.tsx#B3443E
punctuation.definition.parameters.end.js#bb4741
punctuation.definition.parameters.end.jsx#bb4741
punctuation.definition.parameters.end.ts#BF4E48
punctuation.definition.parameters.end.tsx#bb4741
punctuation.definition.parameters.end.js#C25650
punctuation.definition.parameters.end.jsx#bb4741
punctuation.definition.parameters.end.ts#bb4741
punctuation.definition.parameters.end.tsx#B3443E
markup.quote#A23D38
meta.tag.js#BF4E48
meta.tag.jsx#C25650
meta.tag.ts#AA413B
meta.tag.tsx#C25650
meta.parameters.js#bb4741
meta.parameters.jsx#BF4E48
meta.parameters.ts#B3443E
meta.parameters.tsx#bb4741
meta.brace.square.js#B3443E
meta.brace.square.jsx#bb4741
meta.brace.square.ts#bb4741
meta.brace.square.tsx#bb4741
variable.other.class.js#C55E59
variable.other.class.jsx#B3443E
variable.other.class.ts#AA413B
variable.other.class.tsx#bb4741
constant.other.object.key.js#bb4741
constant.other.object.key.jsx#C55E59
constant.other.object.key.ts#bb4741
constant.other.object.key.tsx#bb4741
entity.name.function.method#A23D38
string.template#bb4741
support.type.property-name.json#A23D38
variable.other.property.js#bb4741
variable.other.property.jsx#C25650
variable.other.property.ts#C55E59
variable.other.property.tsx#bb4741
entity.name.tag#A45E74underline
markup.italic#9e596f
punctuation.accessor.js#97556A
punctuation.accessor.jsx#9e596f
punctuation.accessor.ts#97556A
punctuation.accessor.tsx#894D60
source.js#9e596f
source.jsx#9e596f
source.ts#9e596f
source.tsx#9e596f
storage.modifier.js#9e596f
storage.modifier.jsx#9e596f
storage.modifier.ts#97556A
storage.modifier.tsx#9e596f
storage.type#AC6C81
string.quoted.single.js#97556A
string.quoted.single.jsx#905165
string.quoted.single.ts#9e596f
string.quoted.single.tsx#9e596f
support.function.dom.js#AC6C81
support.function.dom.jsx#9e596f
support.function.dom.ts#A8657A
support.function.dom.tsx#97556A
support.variable.property.js#A45E74
support.variable.property.jsx#9e596f
support.variable.property.ts#9e596f
support.variable.property.tsx#A8657A
variable.language.constructor#9e596funderline
variable.language.this#894D60
constant.language.boolean#9B6E92
constant.language.null.js#906387
constant.language.null.jsx#906387
constant.language.null.ts#7D5675
constant.language.null.tsx#906387
entity.name.class#906387underline
entity.name.function#8A5F81underline
entity.name.type#8A5F81underline
markup.heading.markdown#8A5F81
punctuation.separator.comma.js#8A5F81
punctuation.separator.comma.jsx#906387
punctuation.separator.comma.ts#9B6E92
punctuation.separator.comma.tsx#7D5675
support.variable.property.js#906387
support.variable.property.jsx#906387
support.variable.property.ts#906387
support.variable.property.tsx#906387
support.type.primitive.js#906387
support.type.primitive.jsx#906387
support.type.primitive.ts#9B6E92
support.type.primitive.tsx#906387
variable#906387
variable.parameter#5840D0
support.function#5840D0
meta.import.js#614ad3
meta.import.jsx#5840D0
meta.import.ts#614ad3
meta.import.tsx#614ad3
meta.paragraph.markdown#614ad3
entity.other.attribute-name.js#614ad3
entity.other.attribute-name.jsx#614ad3
entity.other.attribute-name.ts#7C69DB
entity.other.attribute-name.tsx#614ad3
string.quoted.single.js#4F35CE
string.quoted.single.jsx#614ad3
string.quoted.single.ts#5840D0
string.quoted.single.tsx#5840D0
string.quoted.single.json#4F35CE
support.class.promise.js#4F35CE
support.class.promise.jsx#6A54D6
support.class.promise.ts#4F35CE
support.class.promise.tsx#7C69DB
support.type.object.console.js#614ad3
support.type.object.console.jsx#4930C6
support.type.object.console.ts#6A54D6
support.type.object.console.tsx#614ad3
support.function.console.js#5840D0
support.function.console.jsx#5840D0
support.function.console.ts#6A54D6
support.function.console.tsx#4930C6
punctuation.definition.block.js#614ad3
punctuation.definition.block.jsx#6A54D6
punctuation.definition.block.ts#614ad3
punctuation.definition.block.tsx#6A54D6
AdvancedHook by selfrefactor - VS Code Theme