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
entity.name.tag#5482abunderline
source.go#A0595E—
source.json#A0595E—
source.css#A0595E—
markup.italic#507CA3—
punctuation.accessor.js#5482ab—
punctuation.accessor.jsx#5482ab—
punctuation.accessor.ts#4C769C—
punctuation.accessor.tsx#5482ab—
source.js#497094—
source.jsx#5482ab—
source.ts#4C769C—
source.tsx#507CA3—
storage.modifier.js#5C88AF—
storage.modifier.jsx#6B93B6—
storage.modifier.ts#5482ab—
storage.modifier.tsx#5482ab—
storage.type#638DB3—
string.quoted.single.js#507CA3—
string.quoted.single.jsx#5482ab—
string.quoted.single.ts#5482ab—
string.quoted.single.tsx#638DB3—
support.function.dom.js#497094—
support.function.dom.jsx#5482ab—
support.function.dom.ts#5482ab—
support.function.dom.tsx#5482ab—
support.variable.property.js#4C769C—
support.variable.property.jsx#5482ab—
support.variable.property.ts#5482ab—
support.variable.property.tsx#5482ab—
variable.language.constructor#497094underline
variable.language.this#497094—
meta.var.expr.js#6B93B6—
meta.var.expr.jsx#5C88AF—
meta.var.expr.ts#5482ab—
meta.var.expr.tsx#5482ab—
variable#42966D—
keyword.control.import.js#42966D—
keyword.control.import.jsx#459d72—
keyword.control.import.ts#3C8863—
keyword.control.import.tsx#48A477—
keyword.control.from.js#4FB281—
keyword.control.from.jsx#459d72—
keyword.control.from.ts#4FB281—
keyword.control.from.tsx#459d72—
keyword.control.export.js#459d72—
keyword.control.export.jsx#459d72—
keyword.control.export.ts#459d72—
keyword.control.export.tsx#42966D—
variable.parameter#459d72—
support.function#459d72—
meta.import.js#48A477—
meta.import.jsx#459d72—
meta.import.ts#459d72—
meta.import.tsx#459d72—
meta.paragraph.markdown#459d72—
entity.other.attribute-name.js#459d72—
entity.other.attribute-name.jsx#42966D—
entity.other.attribute-name.ts#48A477—
entity.other.attribute-name.tsx#42966D—
string.quoted.single.js#4FB281—
string.quoted.single.jsx#459d72—
string.quoted.single.ts#42966D—
string.quoted.single.tsx#4BAB7C—
string.quoted.single.json#459d72—
support.class.promise.js#42966D—
support.class.promise.jsx#3C8863—
support.class.promise.ts#459d72—
support.class.promise.tsx#42966D—
support.type.object.console.js#4BAB7C—
support.type.object.console.jsx#459d72—
support.type.object.console.ts#42966D—
support.type.object.console.tsx#3C8863—
support.function.console.js#459d72—
support.function.console.jsx#48A477—
support.function.console.ts#459d72—
support.function.console.tsx#4FB281—
punctuation.definition.block.js#48A477—
punctuation.definition.block.jsx#4BAB7C—
punctuation.definition.block.ts#4BAB7C—
punctuation.definition.block.tsx#3C8863—
keyword#A0595E—
keyword.control.default.js#A0595E—
keyword.control.default.jsx#A0595E—
keyword.control.default.ts#AE6D71—
keyword.control.default.tsx#A0595E—
support.type.object.module.js#A0595E—
support.type.object.module.jsx#A65E64—
support.type.object.module.ts#A0595E—
support.type.object.module.tsx#A0595E—
keyword.control.module.js#925156—
keyword.control.module.jsx#A0595E—
keyword.control.module.ts#99555A—
keyword.control.module.tsx#A65E64—
keyword.operator.accessor#A0595E—
invalid#A0595Eunderline
constant.numeric#A0595E—
constant.language.boolean#A65E64—
constant.language.null.js#A0595E—
constant.language.null.jsx#8A4D51—
constant.language.null.ts#A0595E—
constant.language.null.tsx#99555A—
entity.name.class#A0595Eunderline
entity.name.function#A0595Eunderline
entity.name.type#AA666Aunderline
markup.heading.markdown#AE6D71—
punctuation.separator.comma.js#A0595E—
punctuation.separator.comma.jsx#A0595E—
punctuation.separator.comma.ts#99555A—
punctuation.separator.comma.tsx#8A4D51—
support.variable.property.js#99555A—
support.variable.property.jsx#A0595E—
support.variable.property.ts#8A4D51—
support.variable.property.tsx#A0595E—
support.type.primitive.js#A0595E—
support.type.primitive.jsx#8A4D51—
support.type.primitive.ts#A65E64—
support.type.primitive.tsx#AA666A—
punctuation.definition.parameters.begin.js#385D5C—
punctuation.definition.parameters.begin.jsx#436E6D—
punctuation.definition.parameters.begin.ts#406A69—
punctuation.definition.parameters.begin.tsx#3b6160—
punctuation.definition.parameters.end.js#335453—
punctuation.definition.parameters.end.jsx#335453—
punctuation.definition.parameters.end.ts#3b6160—
punctuation.definition.parameters.end.tsx#3E6564—
punctuation.definition.parameters.end.js#3E6564—
punctuation.definition.parameters.end.jsx#385D5C—
punctuation.definition.parameters.end.ts#3b6160—
punctuation.definition.parameters.end.tsx#385D5C—
markup.quote#3b6160—
meta.tag.js#3b6160—
meta.tag.jsx#3b6160—
meta.tag.ts#3b6160—
meta.tag.tsx#365857—
meta.parameters.js#406A69—
meta.parameters.jsx#3b6160—
meta.parameters.ts#406A69—
meta.parameters.tsx#3E6564—
meta.brace.square.js#3b6160—
meta.brace.square.jsx#3b6160—
meta.brace.square.ts#385D5C—
meta.brace.square.tsx#385D5C—
variable.other.class.js#385D5C—
variable.other.class.jsx#3b6160—
variable.other.class.ts#385D5C—
variable.other.class.tsx#385D5C—
punctuation.separator.key-value.js#385D5C—
punctuation.separator.key-value.jsx#3b6160—
punctuation.separator.key-value.ts#3b6160—
punctuation.separator.key-value.tsx#385D5C—
storage.modifier.async.js#3E6564—
storage.modifier.async.jsx#365857—
storage.modifier.async.ts#385D5C—
storage.modifier.async.tsx#385D5C—
meta.brace.round.js#3b6160—
meta.brace.round.jsx#406A69—
meta.brace.round.ts#365857—
meta.brace.round.tsx#385D5C—
constant.other.object.key.js#3E6564—
constant.other.object.key.jsx#3E6564—
constant.other.object.key.ts#3b6160—
constant.other.object.key.tsx#385D5C—
entity.name.function.method#3b6160—
string.template#3b6160—
support.type.property-name.json#385D5C—
variable.other.property.js#335453—
variable.other.property.jsx#365857—
variable.other.property.ts#3E6564—
variable.other.property.tsx#3b6160—
support.constant#0068a8—
punctuation.separator.parameter.js#0068a8—
punctuation.separator.parameter.jsx#0071B7—
punctuation.separator.parameter.ts#0068a8—
punctuation.separator.parameter.tsx#0068a8—
constant.character#0063A0—
constant.language#0068a8—
constant.other#0068a8—
comment#005A91—
markup.italic#0063A0—
meta.object-literal.key.js#0068a8—
meta.object-literal.key.jsx#0068a8—
meta.object-literal.key.ts#0063A0—
meta.object-literal.key.tsx#0063A0—
comment.block.documentation#0063A0—
comment.line.double-slash#0071B7—
punctuation.accessor.js#0063A0—
punctuation.accessor.jsx#0068a8—
punctuation.accessor.ts#0068a8—
punctuation.accessor.tsx#0068a8—
variable.language#0068a8—
variable.other.object.js#005A91—
variable.other.object.jsx#0068a8—
variable.other.object.ts#0068a8—
variable.other.object.tsx#0071B7—
variable.other.readwrite#005F99—
variable.other.readwrite.js#0068a8—
variable.other.readwrite.jsx#0063A0—
variable.other.readwrite.ts#0068a8—
variable.other.readwrite.tsx#0068a8—
entity.other.inherited-class#0076BF—
support.class.builtin.js#0068a8—
support.class.builtin.jsx#0076BF—
support.class.builtin.ts#0068a8—
support.class.builtin.tsx#0063A0—
meta.tag.attributes.js#0071B7—
meta.tag.attributes.jsx#0068a8—
meta.tag.attributes.ts#0068a8—
meta.tag.attributes.tsx#0068a8—
ComeTogether by selfrefactor - VS Code Theme