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#459d72
source.css#459d72
source.go#459d72
constant.character#4F0B0B
constant.language.boolean#4F0B0B
entity.name.tag#4F0B0Bunderline
keyword#570D0D
markup.italic#530c0c
entity.name.function.method#570D0D
string.quoted.single.js#570D0D
string.quoted.single.jsx#530c0c
string.quoted.single.ts#4F0B0B
string.quoted.single.tsx#4F0B0B
support.type.property-name.json#530c0c
punctuation.accessor.js#530c0c
punctuation.accessor.jsx#5A0D0D
punctuation.accessor.ts#530c0c
punctuation.accessor.tsx#480A0A
punctuation.separator.key-value.js#4F0B0B
punctuation.separator.key-value.jsx#480A0A
punctuation.separator.key-value.ts#530c0c
punctuation.separator.key-value.tsx#530c0c
constant.numeric#530c0c
meta.brace.square.js#480A0A
meta.brace.square.jsx#530c0c
meta.brace.square.ts#5A0D0D
meta.brace.square.tsx#530c0c
meta.var.expr.js#480A0A
meta.var.expr.jsx#530c0c
meta.var.expr.ts#530c0c
meta.var.expr.tsx#480A0A
storage.modifier.js#4C0B0B
storage.modifier.jsx#570D0D
storage.modifier.ts#570D0D
storage.modifier.tsx#5E0E0E
storage.type#480A0A
string.template#570D0D
support.constant#4F0B0B
support.function.dom.js#530c0c
support.function.dom.jsx#530c0c
support.function.dom.ts#530c0c
support.function.dom.tsx#530c0c
support.variable.property.js#530c0c
support.variable.property.jsx#570D0D
support.variable.property.ts#530c0c
support.variable.property.tsx#530c0c
variable.language.constructor#530c0cunderline
variable.language.this#530c0c
meta.tag.js#570D0D
meta.tag.jsx#4F0B0B
meta.tag.ts#530c0c
meta.tag.tsx#530c0c
support.type.object.module.js#530c0c
support.type.object.module.jsx#530c0c
support.type.object.module.ts#530c0c
support.type.object.module.tsx#480A0A
punctuation.definition.parameters.begin.js#570D0D
punctuation.definition.parameters.begin.jsx#4C0B0B
punctuation.definition.parameters.begin.ts#570D0D
punctuation.definition.parameters.begin.tsx#530c0c
punctuation.definition.parameters.end.js#5A0D0D
punctuation.definition.parameters.end.jsx#530c0c
punctuation.definition.parameters.end.ts#4F0B0B
punctuation.definition.parameters.end.tsx#530c0c
punctuation.definition.parameters.end.js#4F0B0B
punctuation.definition.parameters.end.jsx#4F0B0B
punctuation.definition.parameters.end.ts#4C0B0B
punctuation.definition.parameters.end.tsx#530c0c
markup.quote#5A0D0D
entity.other.attribute-name.js#530c0c
entity.other.attribute-name.jsx#530c0c
entity.other.attribute-name.ts#4C0B0B
entity.other.attribute-name.tsx#530c0c
comment#883c82
constant.language#883c82
constant.other#883c82
keyword.control.flow.js#883c82
keyword.control.flow.jsx#883c82
keyword.control.flow.ts#763470
keyword.control.flow.tsx#883c82
keyword.control.module.js#763470
keyword.control.module.jsx#883c82
keyword.control.module.ts#883c82
keyword.control.module.tsx#883c82
keyword.operator.accessor#7C3776
markup.italic#883c82
meta.import.js#883c82
meta.import.jsx#82397C
meta.import.ts#883c82
meta.import.tsx#883c82
meta.object-literal.key.js#883c82
meta.object-literal.key.jsx#9A4494
meta.object-literal.key.ts#883c82
meta.object-literal.key.tsx#883c82
meta.paragraph.markdown#8E3F88
punctuation.definition.block.js#883c82
punctuation.definition.block.jsx#8E3F88
punctuation.definition.block.ts#8E3F88
punctuation.definition.block.tsx#883c82
punctuation.separator.parameter.js#883c82
punctuation.separator.parameter.jsx#883c82
punctuation.separator.parameter.ts#883c82
punctuation.separator.parameter.tsx#8E3F88
string.quoted.single.js#7C3776
string.quoted.single.jsx#8E3F88
string.quoted.single.ts#94418E
string.quoted.single.tsx#82397C
string.quoted.single.json#82397C
support.class.promise.js#883c82
support.class.component.tsx#530c0c
support.class.promise.jsx#883c82
support.class.promise.ts#883c82
support.class.promise.tsx#8E3F88
support.function#883c82
keyword.control.import.js#94418E
keyword.control.import.jsx#883c82
keyword.control.import.ts#7C3776
keyword.control.import.tsx#883c82
keyword.control.from.js#82397C
keyword.control.from.jsx#82397C
keyword.control.from.ts#883c82
keyword.control.from.tsx#8E3F88
keyword.control.export.js#883c82
keyword.control.export.jsx#883c82
keyword.control.export.ts#883c82
keyword.control.export.tsx#883c82
keyword.control.default.js#883c82
keyword.control.default.jsx#763470
keyword.control.default.ts#883c82
keyword.control.default.tsx#883c82
entity.name.class#82397Cunderline
support.function.console.js#763470
support.function.console.jsx#883c82
support.function.console.ts#94418E
support.function.console.tsx#8E3F88
variable.language#883c82
invalid#7C3776underline
support.type.object.console.js#883c82
support.type.object.console.jsx#883c82
support.type.object.console.ts#8E3F88
support.type.object.console.tsx#883c82
variable.parameter#883c82
comment.block.documentation#9A4494
comment.line.double-slash#82397C
constant.language.null.js#48A477
constant.language.null.jsx#459d72
constant.language.null.ts#459d72
constant.language.null.tsx#42966D
entity.name.type#42966D
meta.parameters.js#42966D
meta.parameters.jsx#459d72
meta.parameters.ts#459d72
meta.parameters.tsx#459d72
variable.other.class.js#459d72
variable.other.class.jsx#459d72
variable.other.class.ts#42966D
variable.other.class.tsx#42966D
constant.other.object.key.js#459d72
constant.other.object.key.jsx#459d72
constant.other.object.key.ts#42966D
constant.other.object.key.tsx#48A477
entity.other.inherited-class#48A477
markup.heading.markdown#4FB281
meta.brace.round.js#459d72
meta.brace.round.jsx#48A477
meta.brace.round.ts#459d72
meta.brace.round.tsx#3F8F68
entity.name.function#48A477underline
meta.tag.attributes.js#3F8F68
meta.tag.attributes.jsx#459d72
meta.tag.attributes.ts#42966D
meta.tag.attributes.tsx#459d72
punctuation.accessor.js#459d72
punctuation.accessor.jsx#3F8F68
punctuation.accessor.ts#3F8F68
punctuation.accessor.tsx#3C8863
punctuation.separator.comma.js#42966D
punctuation.separator.comma.jsx#459d72
punctuation.separator.comma.ts#459d72
punctuation.separator.comma.tsx#459d72
source.js#42966D
source.jsx#459d72
source.ts#3C8863
source.tsx#3C8863
variable.other.property.js#459d72
variable.other.property.jsx#4FB281
variable.other.property.ts#459d72
variable.other.property.tsx#459d72
storage.modifier.async.js#459d72
storage.modifier.async.jsx#459d72
storage.modifier.async.ts#42966D
storage.modifier.async.tsx#42966D
support.class.builtin.js#459d72
support.class.builtin.jsx#459d72
support.class.builtin.ts#42966D
support.class.builtin.tsx#459d72
support.type.primitive.js#48A477
support.type.primitive.jsx#3C8863
support.type.primitive.ts#459d72
support.type.primitive.tsx#3F8F68
support.variable.property.js#459d72
support.variable.property.jsx#42966D
support.variable.property.ts#48A477
support.variable.property.tsx#459d72
variable#3F8F68
variable.other.object.js#3F8F68
variable.other.object.jsx#459d72
variable.other.object.ts#42966D
variable.other.object.tsx#459d72
variable.other.readwrite#42966D
variable.other.readwrite.js#3F8F68
variable.other.readwrite.jsx#459d72
variable.other.readwrite.ts#459d72
variable.other.readwrite.tsx#459d72
TeaForOne by selfrefactor - VS Code Theme