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#25164C
source.css#25164C
source.go#25164C
constant.character#7E7042
constant.language.boolean#7E7042
entity.name.tag#7E7042underline
keyword#8A7A48
markup.italic#847545
entity.name.function.method#8A7A48
string.quoted.single.js#8A7A48
string.quoted.single.jsx#847545
string.quoted.single.ts#7E7042
string.quoted.single.tsx#7E7042
support.type.property-name.json#847545
punctuation.accessor.js#847545
punctuation.accessor.jsx#90804B
punctuation.accessor.ts#847545
punctuation.accessor.tsx#72653C
punctuation.separator.key-value.js#7E7042
punctuation.separator.key-value.jsx#72653C
punctuation.separator.key-value.ts#847545
punctuation.separator.key-value.tsx#847545
constant.numeric#847545
meta.brace.square.js#72653C
meta.brace.square.jsx#847545
meta.brace.square.ts#90804B
meta.brace.square.tsx#847545
meta.var.expr.js#72653C
meta.var.expr.jsx#847545
meta.var.expr.ts#847545
meta.var.expr.tsx#72653C
storage.modifier.js#786A3F
storage.modifier.jsx#8A7A48
storage.modifier.ts#8A7A48
storage.modifier.tsx#96854E
storage.type#72653C
string.template#8A7A48
support.constant#7E7042
support.function.dom.js#847545
support.function.dom.jsx#847545
support.function.dom.ts#847545
support.function.dom.tsx#847545
support.variable.property.js#847545
support.variable.property.jsx#8A7A48
support.variable.property.ts#847545
support.variable.property.tsx#847545
variable.language.constructor#847545underline
variable.language.this#847545
meta.tag.js#8A7A48
meta.tag.jsx#7E7042
meta.tag.ts#847545
meta.tag.tsx#847545
support.type.object.module.js#847545
support.type.object.module.jsx#847545
support.type.object.module.ts#847545
support.type.object.module.tsx#72653C
punctuation.definition.parameters.begin.js#8A7A48
punctuation.definition.parameters.begin.jsx#786A3F
punctuation.definition.parameters.begin.ts#8A7A48
punctuation.definition.parameters.begin.tsx#847545
punctuation.definition.parameters.end.js#90804B
punctuation.definition.parameters.end.jsx#847545
punctuation.definition.parameters.end.ts#7E7042
punctuation.definition.parameters.end.tsx#847545
punctuation.definition.parameters.end.js#7E7042
punctuation.definition.parameters.end.jsx#7E7042
punctuation.definition.parameters.end.ts#786A3F
punctuation.definition.parameters.end.tsx#847545
markup.quote#90804B
entity.other.attribute-name.js#847545
entity.other.attribute-name.jsx#847545
entity.other.attribute-name.ts#786A3F
entity.other.attribute-name.tsx#847545
comment#f38b80
constant.language#f38b80
constant.other#f38b80
keyword.control.flow.js#f38b80
keyword.control.flow.jsx#f38b80
keyword.control.flow.ts#EF6152
keyword.control.flow.tsx#f38b80
keyword.control.module.js#EF6152
keyword.control.module.jsx#f38b80
keyword.control.module.ts#f38b80
keyword.control.module.tsx#f38b80
keyword.operator.accessor#F06F61
markup.italic#f38b80
meta.import.js#f38b80
meta.import.jsx#F27D71
meta.import.ts#f38b80
meta.import.tsx#f38b80
meta.object-literal.key.js#f38b80
meta.object-literal.key.jsx#F7B5AE
meta.object-literal.key.ts#f38b80
meta.object-literal.key.tsx#f38b80
meta.paragraph.markdown#F4998F
punctuation.definition.block.js#f38b80
punctuation.definition.block.jsx#F4998F
punctuation.definition.block.ts#F4998F
punctuation.definition.block.tsx#f38b80
punctuation.separator.parameter.js#f38b80
punctuation.separator.parameter.jsx#f38b80
punctuation.separator.parameter.ts#f38b80
punctuation.separator.parameter.tsx#F4998F
string.quoted.single.js#F06F61
string.quoted.single.jsx#F4998F
string.quoted.single.ts#F6A79F
string.quoted.single.tsx#F27D71
string.quoted.single.json#F27D71
support.class.promise.js#f38b80
support.class.promise.jsx#f38b80
support.class.promise.ts#f38b80
support.class.promise.tsx#F4998F
support.function#f38b80
keyword.control.import.js#F6A79F
keyword.control.import.jsx#f38b80
keyword.control.import.ts#F06F61
keyword.control.import.tsx#f38b80
keyword.control.from.js#F27D71
keyword.control.from.jsx#F27D71
keyword.control.from.ts#f38b80
keyword.control.from.tsx#F4998F
keyword.control.export.js#f38b80
keyword.control.export.jsx#f38b80
keyword.control.export.ts#f38b80
keyword.control.export.tsx#f38b80
keyword.control.default.js#f38b80
keyword.control.default.jsx#EF6152
keyword.control.default.ts#f38b80
keyword.control.default.tsx#f38b80
entity.name.class#F27D71underline
support.function.console.js#EF6152
support.function.console.jsx#f38b80
support.function.console.ts#F6A79F
support.function.console.tsx#F4998F
variable.language#f38b80
invalid#F06F61underline
support.type.object.console.js#f38b80
support.type.object.console.jsx#f38b80
support.type.object.console.ts#F4998F
support.type.object.console.tsx#f38b80
variable.parameter#f38b80
comment.block.documentation#F7B5AE
comment.line.double-slash#F27D71
constant.language.null.js#27174F
constant.language.null.jsx#25164C
constant.language.null.ts#25164C
constant.language.null.tsx#231549
entity.name.type#231549
meta.parameters.js#231549
meta.parameters.jsx#25164C
meta.parameters.ts#25164C
meta.parameters.tsx#25164C
variable.other.class.js#25164C
variable.other.class.jsx#25164C
variable.other.class.ts#231549
variable.other.class.tsx#231549
constant.other.object.key.js#25164C
constant.other.object.key.jsx#25164C
constant.other.object.key.ts#231549
constant.other.object.key.tsx#27174F
entity.other.inherited-class#27174F
markup.heading.markdown#2A1956
meta.brace.round.js#25164C
meta.brace.round.jsx#27174F
meta.brace.round.ts#25164C
meta.brace.round.tsx#221445
entity.name.function#27174Funderline
meta.tag.attributes.js#221445
meta.tag.attributes.jsx#25164C
meta.tag.attributes.ts#231549
meta.tag.attributes.tsx#25164C
punctuation.accessor.js#25164C
punctuation.accessor.jsx#221445
punctuation.accessor.ts#221445
punctuation.accessor.tsx#201342
punctuation.separator.comma.js#231549
punctuation.separator.comma.jsx#25164C
punctuation.separator.comma.ts#25164C
punctuation.separator.comma.tsx#25164C
source.js#231549
source.jsx#25164C
source.ts#201342
source.tsx#201342
variable.other.property.js#25164C
variable.other.property.jsx#2A1956
variable.other.property.ts#25164C
variable.other.property.tsx#25164C
storage.modifier.async.js#25164C
storage.modifier.async.jsx#25164C
storage.modifier.async.ts#231549
storage.modifier.async.tsx#231549
support.class.builtin.js#25164C
support.class.builtin.jsx#25164C
support.class.builtin.ts#231549
support.class.builtin.tsx#25164C
support.type.primitive.js#27174F
support.type.primitive.jsx#201342
support.type.primitive.ts#25164C
support.type.primitive.tsx#221445
support.variable.property.js#25164C
support.variable.property.jsx#231549
support.variable.property.ts#27174F
support.variable.property.tsx#25164C
variable#221445
variable.other.object.js#221445
variable.other.object.jsx#25164C
variable.other.object.ts#231549
variable.other.object.tsx#25164C
variable.other.readwrite#231549
variable.other.readwrite.js#221445
variable.other.readwrite.jsx#25164C
variable.other.readwrite.ts#25164C
variable.other.readwrite.tsx#25164C
LemonSong by selfrefactor - VS Code Theme