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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source.json#431a22
source.css#431a22
source.go#431a22
support.constant#5c8875
punctuation.separator.parameter.js#5c8875
punctuation.separator.parameter.jsx#507665
punctuation.separator.parameter.ts#507665
punctuation.separator.parameter.tsx#5c8875
constant.character#5c8875
constant.language#5c8875
constant.other#5c8875
comment#5c8875
markup.italic#588270
meta.object-literal.key.js#588270
meta.object-literal.key.jsx#5c8875
meta.object-literal.key.ts#588270
meta.object-literal.key.tsx#608E7A
comment.block.documentation#5c8875
comment.line.double-slash#5c8875
punctuation.accessor.js#608E7A
punctuation.accessor.jsx#649480
punctuation.accessor.ts#5c8875
punctuation.accessor.tsx#5c8875
variable.language#588270
variable.other.object.js#5c8875
variable.other.object.jsx#5c8875
variable.other.object.ts#5c8875
variable.other.object.tsx#5c8875
variable.other.readwrite#547C6A
variable.other.readwrite.js#5c8875
variable.other.readwrite.jsx#5c8875
variable.other.readwrite.ts#5c8875
variable.other.readwrite.tsx#5c8875
punctuation.separator.key-value.js#973565
punctuation.separator.key-value.jsx#9e386a
punctuation.separator.key-value.ts#A53B6F
punctuation.separator.key-value.tsx#A53B6F
storage.modifier.async.js#89305C
storage.modifier.async.jsx#973565
storage.modifier.async.ts#9e386a
storage.modifier.async.tsx#9e386a
meta.brace.round.js#9e386a
meta.brace.round.jsx#9e386a
meta.brace.round.ts#B34078
meta.brace.round.tsx#903360
entity.other.inherited-class#903360
support.class.builtin.js#A53B6F
support.class.builtin.jsx#9e386a
support.class.builtin.ts#973565
support.class.builtin.tsx#9e386a
meta.tag.attributes.js#973565
meta.tag.attributes.jsx#A53B6F
meta.tag.attributes.ts#973565
meta.tag.attributes.tsx#9e386a
keyword.control.module.js#9e386a
keyword.control.module.jsx#9e386a
keyword.control.module.ts#A53B6F
keyword.control.module.tsx#9e386a
keyword.operator.accessor#9e386a
invalid#9e386aunderline
constant.numeric#9e386a
keyword#9e386a
meta.var.expr.js#9e386a
meta.var.expr.jsx#A53B6F
meta.var.expr.ts#A53B6F
meta.var.expr.tsx#973565
keyword.control.import.js#B34078
keyword.control.import.jsx#973565
keyword.control.import.ts#B34078
keyword.control.import.tsx#9e386a
keyword.control.from.js#9e386a
keyword.control.from.jsx#973565
keyword.control.from.ts#AC3D74
keyword.control.from.tsx#A53B6F
keyword.control.export.js#973565
keyword.control.export.jsx#89305C
keyword.control.export.ts#9e386a
keyword.control.export.tsx#B34078
keyword.control.default.js#9e386a
keyword.control.default.jsx#A53B6F
keyword.control.default.ts#B34078
keyword.control.default.tsx#9e386a
support.type.object.module.js#903360
support.type.object.module.jsx#973565
support.type.object.module.ts#9e386a
support.type.object.module.tsx#973565
punctuation.definition.parameters.begin.js#431a22
punctuation.definition.parameters.begin.jsx#3A161D
punctuation.definition.parameters.begin.ts#431a22
punctuation.definition.parameters.begin.tsx#401920
punctuation.definition.parameters.end.js#431a22
punctuation.definition.parameters.end.jsx#431a22
punctuation.definition.parameters.end.ts#461B24
punctuation.definition.parameters.end.tsx#431a22
punctuation.definition.parameters.end.js#491C25
punctuation.definition.parameters.end.jsx#431a22
punctuation.definition.parameters.end.ts#431a22
punctuation.definition.parameters.end.tsx#401920
markup.quote#3A161D
meta.tag.js#461B24
meta.tag.jsx#491C25
meta.tag.ts#3D181F
meta.tag.tsx#491C25
meta.parameters.js#431a22
meta.parameters.jsx#461B24
meta.parameters.ts#401920
meta.parameters.tsx#431a22
meta.brace.square.js#401920
meta.brace.square.jsx#431a22
meta.brace.square.ts#431a22
meta.brace.square.tsx#431a22
variable.other.class.js#4C1E27
variable.other.class.jsx#401920
variable.other.class.ts#3D181F
variable.other.class.tsx#431a22
constant.other.object.key.js#431a22
constant.other.object.key.jsx#4C1E27
constant.other.object.key.ts#431a22
constant.other.object.key.tsx#431a22
entity.name.function.method#3A161D
string.template#431a22
support.type.property-name.json#3A161D
variable.other.property.js#431a22
variable.other.property.jsx#491C25
variable.other.property.ts#4C1E27
variable.other.property.tsx#431a22
entity.name.tag#0B032Funderline
markup.italic#0b032d
punctuation.accessor.js#0B032B
punctuation.accessor.jsx#0b032d
punctuation.accessor.ts#0B032B
punctuation.accessor.tsx#0A0327
source.js#0b032d
source.jsx#0b032d
source.ts#0b032d
source.tsx#0b032d
storage.modifier.js#0b032d
storage.modifier.jsx#0b032d
storage.modifier.ts#0B032B
storage.modifier.tsx#0b032d
storage.type#0C0333
string.quoted.single.js#0B032B
string.quoted.single.jsx#0A0329
string.quoted.single.ts#0b032d
string.quoted.single.tsx#0b032d
support.function.dom.js#0C0333
support.function.dom.jsx#0b032d
support.function.dom.ts#0C0331
support.function.dom.tsx#0B032B
support.variable.property.js#0B032F
support.variable.property.jsx#0b032d
support.variable.property.ts#0b032d
support.variable.property.tsx#0C0331
variable.language.constructor#0b032dunderline
variable.language.this#0A0327
constant.language.boolean#3E9D9D
constant.language.null.js#399090
constant.language.null.jsx#399090
constant.language.null.ts#317D7D
constant.language.null.tsx#399090
entity.name.class#399090underline
entity.name.function#368A8Aunderline
entity.name.type#368A8Aunderline
markup.heading.markdown#368A8A
punctuation.separator.comma.js#368A8A
punctuation.separator.comma.jsx#399090
punctuation.separator.comma.ts#3E9D9D
punctuation.separator.comma.tsx#317D7D
support.variable.property.js#399090
support.variable.property.jsx#399090
support.variable.property.ts#399090
support.variable.property.tsx#399090
support.type.primitive.js#399090
support.type.primitive.jsx#399090
support.type.primitive.ts#3E9D9D
support.type.primitive.tsx#399090
variable#399090
variable.parameter#733572
support.function#733572
meta.import.js#783777
meta.import.jsx#733572
meta.import.ts#783777
meta.import.tsx#783777
meta.paragraph.markdown#783777
entity.other.attribute-name.js#783777
entity.other.attribute-name.jsx#783777
entity.other.attribute-name.ts#883E87
entity.other.attribute-name.tsx#783777
string.quoted.single.js#6D326C
string.quoted.single.jsx#783777
string.quoted.single.ts#733572
string.quoted.single.tsx#733572
string.quoted.single.json#6D326C
support.class.promise.js#6D326C
support.class.promise.jsx#7D397C
support.class.promise.ts#6D326C
support.class.promise.tsx#883E87
support.type.object.console.js#783777
support.type.object.console.jsx#683067
support.type.object.console.ts#7D397C
support.type.object.console.tsx#783777
support.function.console.js#733572
support.function.console.jsx#733572
support.function.console.ts#7D397C
support.function.console.tsx#683067
punctuation.definition.block.js#783777
punctuation.definition.block.jsx#7D397C
punctuation.definition.block.ts#783777
punctuation.definition.block.tsx#7D397C
CircusAjax by selfrefactor - VS Code Theme