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