Skip to main content
Coding Theme

Color themes

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#e7e7e7
  • badge.foreground#3f7063
  • diffEditor.insertedTextBackground#9c824a55
  • diffEditor.removedTextBackground#64B5F655
  • editor.background#F1F1F1
  • editor.findMatchBackground#87a192
  • editor.findMatchHighlightBackground#71aac355
  • editor.findRangeHighlightBackground#3f706366
  • editor.foldBackground#fafafa
  • editor.inactiveSelectionBackground#aaab9c66
  • editor.lineHighlightBackground#F1F1F1
  • editor.lineHighlightBorder#9c824a
  • editor.selectionBackground#cdd0d255
  • editor.selectionHighlightBackground#cdd0d277
  • editor.wordHighlightBackground#aa769b55
  • editor.wordHighlightStrongBackground#410a0b44
  • editorBracketMatch.background#e7e7e7
  • editorBracketMatch.border#fafafa
  • editorCursor.foreground#544
  • editorGroupHeader.tabsBackground#cdd0d2
  • editorHoverWidget.background#d1d3d4
  • editorHoverWidget.border#d78d9f
  • editorLineNumber.foreground#2a3343a9
  • editorLink.activeForeground#034694
  • editorSuggestWidget.background#d1d3d4
  • editorSuggestWidget.border#d78d9f
  • editorSuggestWidget.foreground#2a3343
  • editorSuggestWidget.highlightForeground#820014
  • editorSuggestWidget.selectedBackground#2c3d5244
  • editorWidget.background#cdd0d2
  • editorWidget.border#d78d9f
  • errorForeground#B1365Bf3
  • focusBorder#525e54
  • foreground#24283b
  • git.color.modified#4d0e0b
  • gitDecoration.addedResourceForeground#53245b
  • gitDecoration.modifiedResourceForeground#034694
  • gitDecoration.untrackedResourceForeground#aa769b
  • list.activeSelectionBackground#d1343822
  • list.activeSelectionForeground#2a3343
  • list.dropBackground#db82d6cc
  • list.errorForeground#a50044
  • list.focusBackground#6d50a188
  • list.highlightForeground#4d0e0b
  • list.hoverBackground#ad680066
  • list.hoverForeground#e7e7e7
  • list.inactiveFocusBackground#885f66cc
  • list.inactiveSelectionBackground#eae3cd55
  • list.inactiveSelectionForeground#4d0e0b
  • scrollbar.shadow#cf6f4b
  • scrollbarSlider.background#cdd0d2
  • scrollbarSlider.hoverBackground#C4BE9D
  • selection.background#ebe6d9
  • sideBar.background#cdd0d2
  • sideBar.border#8382ae
  • sideBar.foreground#85483d
  • sideBarSectionHeader.background#aebabe
  • sideBarSectionHeader.foreground#2a3343
  • sideBarTitle.foreground#30322e
  • statusBar.background#cdd0d2
  • statusBar.foreground#35495f
  • tab.activeBackground#F1F1F1
  • tab.activeBorder#35495f
  • tab.activeForeground#35495f
  • tab.border#cdd0d2
  • tab.inactiveBackground#cdd0d2
  • tab.inactiveForeground#fff
  • tab.unfocusedActiveBackground#cdd0d2
  • tab.unfocusedActiveBorder#cdd0d2
  • tab.unfocusedActiveForeground#aa769b
  • widget.shadow#8382aebb

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
entity.name.tag#0F9D92underline
markup.italic#0d8a81—
text.html.derivative#0C7E75—
punctuation.accessor.js#0d8a81—
punctuation.accessor.jsx#0d8a81—
punctuation.accessor.ts#0E9087—
punctuation.accessor.tsx#0d8a81—
source.js#0E9087—
source.jsx#0d8a81—
source.ts#0d8a81—
source.tsx#0C847B—
storage.modifier.js#0d8a81—
storage.modifier.jsx#0F9D92—
storage.modifier.ts#0d8a81—
storage.modifier.tsx#0E968D—
punctuation.separator.key-value.js#0d8a81—
punctuation.separator.key-value.jsx#0B7770—
punctuation.separator.key-value.ts#0E9087—
punctuation.separator.key-value.tsx#0C847B—
storage.type#0d8a81—
string.quoted.single.js#0F9D92—
string.quoted.single.jsx#0d8a81—
string.quoted.single.ts#0C7E75—
string.quoted.single.tsx#0d8a81—
support.function.dom.js#0F9D92—
support.function.dom.jsx#0E9087—
support.function.dom.ts#0d8a81—
support.function.dom.tsx#0C847B—
support.variable.property.js#0d8a81—
support.variable.property.jsx#0F9D92—
support.variable.property.ts#0E9087—
support.variable.property.tsx#0E9087—
variable.language.constructor#0C847Bunderline
variable.language.this#0d8a81—
meta.var.expr.js#00a8cc—
meta.var.expr.jsx#00BFE8—
meta.var.expr.ts#00a8cc—
meta.var.expr.tsx#00a8cc—
keyword#00a8cc—
expression.ng#00a8cc—
meta.brace.round.js#00a8cc—
meta.brace.round.jsx#00B7DE—
meta.brace.round.ts#00a8cc—
meta.brace.round.tsx#00a8cc—
constant.language.boolean#00BFE8—
constant.numeric#00BFE8—
constant.language.null.js#00B0D5—
constant.language.null.jsx#00a8cc—
constant.language.null.ts#00a8cc—
constant.language.null.tsx#00a8cc—
entity.name.class#00a8ccunderline
entity.name.function#00a8ccunderline
entity.name.type#00a8ccunderline
markup.heading.markdown#00a8cc—
punctuation.separator.comma.js#00A0C3—
punctuation.separator.comma.jsx#00a8cc—
punctuation.separator.comma.ts#00A0C3—
punctuation.separator.comma.tsx#00A0C3—
meta.tag.attributes.js#00a8cc—
meta.tag.attributes.jsx#00B0D5—
meta.tag.attributes.ts#00a8cc—
meta.tag.attributes.tsx#00a8cc—
support.variable.property.js#00a8cc—
support.variable.property.jsx#00a8cc—
support.variable.property.ts#00B0D5—
support.variable.property.tsx#00a8cc—
support.type.primitive.js#0099BA—
support.type.primitive.jsx#00A0C3—
support.type.primitive.ts#00A0C3—
support.type.primitive.tsx#00B0D5—
variable#0091B0—
source.go#AF2F77—
string.quoted.double.html#a12b6d—
keyword.control.import.js#a12b6d—
keyword.control.import.jsx#B7317C—
keyword.control.import.ts#a12b6d—
keyword.control.import.tsx#a12b6d—
source.json#a12b6d—
source.css#a12b6d—
variable.parameter#a12b6d—
support.function#a12b6d—
support.type.object.module.js#9A2968—
support.type.object.module.jsx#9A2968—
support.type.object.module.ts#9A2968—
support.type.object.module.tsx#9A2968—
meta.import.js#a12b6d—
meta.import.jsx#a12b6d—
meta.import.ts#a12b6d—
meta.import.tsx#a12b6d—
meta.paragraph.markdown#a12b6d—
entity.other.attribute-name.js#A82D72—
entity.other.attribute-name.jsx#8B255E—
entity.other.attribute-name.ts#9A2968—
entity.other.attribute-name.tsx#a12b6d—
string.quoted.single.js#9A2968—
string.quoted.single.jsx#a12b6d—
string.quoted.single.ts#a12b6d—
string.quoted.single.tsx#9A2968—
string.quoted.single.json#AF2F77—
keyword.control.module.js#a12b6d—
keyword.control.module.jsx#a12b6d—
keyword.control.module.ts#a12b6d—
keyword.control.module.tsx#a12b6d—
support.class.promise.js#AF2F77—
support.class.promise.jsx#9A2968—
support.class.promise.ts#9A2968—
support.class.promise.tsx#a12b6d—
support.type.object.console.js#932763—
support.type.object.console.jsx#a12b6d—
support.type.object.console.ts#B7317C—
support.type.object.console.tsx#a12b6d—
support.function.console.js#9A2968—
support.function.console.jsx#a12b6d—
support.function.console.ts#9A2968—
support.function.console.tsx#a12b6d—
punctuation.definition.block.js#932763—
punctuation.definition.block.jsx#a12b6d—
punctuation.definition.block.ts#9A2968—
punctuation.definition.block.tsx#a12b6d—
entity.other.ng-binding-name.property.html#d44578—
punctuation.definition.parameters.begin.js#d44578—
punctuation.definition.parameters.begin.jsx#d44578—
punctuation.definition.parameters.begin.ts#D23B71—
punctuation.definition.parameters.begin.tsx#d44578—
punctuation.definition.parameters.end.js#D95A87—
punctuation.definition.parameters.end.jsx#d44578—
punctuation.definition.parameters.end.ts#d44578—
punctuation.definition.parameters.end.tsx#d44578—
punctuation.definition.parameters.end.js#D23B71—
punctuation.definition.parameters.end.jsx#d44578—
punctuation.definition.parameters.end.ts#d44578—
punctuation.definition.parameters.end.tsx#d44578—
keyword.control.export.js#D95A87—
keyword.control.export.jsx#CF3069—
keyword.control.export.ts#d44578—
keyword.control.export.tsx#d44578—
keyword.control.from.js#d44578—
keyword.control.from.jsx#D64F7F—
keyword.control.from.ts#D95A87—
keyword.control.from.tsx#d44578—
markup.quote#D23B71—
meta.tag.js#d44578—
meta.tag.jsx#D23B71—
meta.tag.ts#D23B71—
meta.tag.tsx#d44578—
meta.parameters.js#D64F7F—
meta.parameters.jsx#d44578—
meta.parameters.ts#D95A87—
meta.parameters.tsx#d44578—
meta.brace.square.js#D23B71—
meta.brace.square.jsx#D23B71—
meta.brace.square.ts#C52E64—
meta.brace.square.tsx#CF3069—
variable.other.class.js#d44578—
variable.other.class.jsx#d44578—
variable.other.class.ts#d44578—
variable.other.class.tsx#CF3069—
constant.other.object.key.js#D64F7F—
constant.other.object.key.jsx#d44578—
constant.other.object.key.ts#d44578—
constant.other.object.key.tsx#D64F7F—
keyword.operator.accessor#d44578—
keyword.control.default.js#D23B71—
keyword.control.default.jsx#D23B71—
keyword.control.default.ts#d44578—
keyword.control.default.tsx#DB648E—
entity.name.function.method#C52E64—
string.template#d44578—
support.type.property-name.json#D23B71—
variable.other.property.js#C52E64—
variable.other.property.jsx#D23B71—
variable.other.property.ts#C52E64—
variable.other.property.tsx#D23B71—
entity.other.ng-binding-name.outputReplEvent.html#3a0088—
entity.other.inherited-class#3a0088—
support.constant#3F0094—
punctuation.separator.parameter.js#370082—
punctuation.separator.parameter.jsx#3a0088—
punctuation.separator.parameter.ts#3D008E—
punctuation.separator.parameter.tsx#320076—
constant.character#3a0088—
constant.language#3a0088—
constant.other#370082—
support.class.builtin.js#320076—
support.class.builtin.jsx#370082—
support.class.builtin.ts#370082—
support.class.builtin.tsx#3a0088—
comment#370082—
markup.italic#35007C—
meta.object-literal.key.js#370082—
meta.object-literal.key.jsx#3a0088—
meta.object-literal.key.ts#3a0088—
meta.object-literal.key.tsx#370082—
comment.block.documentation#3a0088—
comment.line.double-slash#3a0088—
punctuation.accessor.js#320076—
punctuation.accessor.jsx#3a0088—
punctuation.accessor.ts#370082—
punctuation.accessor.tsx#3a0088—
invalid#370082underline
variable.language#3a0088—
storage.modifier.async.js#3a0088—
storage.modifier.async.jsx#3a0088—
storage.modifier.async.ts#3F0094—
storage.modifier.async.tsx#3a0088—
variable.other.object.js#370082—
variable.other.object.jsx#3a0088—
variable.other.object.ts#320076—
variable.other.object.tsx#35007C—
variable.other.readwrite#3a0088—
variable.other.readwrite.js#3a0088—
variable.other.readwrite.jsx#3a0088—
variable.other.readwrite.ts#3F0094—
variable.other.readwrite.tsx#3a0088—