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#aaa
  • badge.foreground#fafafa
  • diffEditor.insertedTextBackground#9c824a55
  • diffEditor.removedTextBackground#64B5F655
  • editor.background#f9f6f2
  • editor.findMatchBackground#95a5a677
  • editor.findMatchHighlightBackground#71aac355
  • editor.findRangeHighlightBackground#3f706366
  • editor.foldBackground#fafafa
  • editor.lineHighlightBackground#bdc3c725
  • editor.lineHighlightBorderx#9a9b9411
  • editor.selectionBackground#bdc3c755
  • editor.selectionHighlightBackground#bdc3c788
  • editor.wordHighlightBackground#bdc3c7aa
  • editor.wordHighlightStrongBackground#bdc3c7dd
  • editorBracketMatch.background#ecf6ff
  • editorBracketMatch.border#c3c1a9
  • editorCursor.foreground#544
  • editorGroupHeader.tabsBackground#bdc3c7
  • editorLineNumber.foreground#2a3343a9
  • editorLink.activeForeground#034694
  • editorSuggestWidget.background#c3c1a9
  • editorSuggestWidget.border#936776
  • editorSuggestWidget.foreground#344250
  • editorSuggestWidget.highlightForeground#4d0e0b
  • editorSuggestWidget.selectedBackground#fafafa
  • 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#b1c1a5
  • list.hoverForeground#30322e
  • list.inactiveSelectionBackground#eae3cd55
  • list.inactiveSelectionForeground#95a5a6
  • scrollbarSlider.background#bdc3c7
  • scrollbarSlider.hoverBackground#C4BE9D
  • selection.background#ebe6d9
  • sideBar.background#bdc3c7
  • sideBar.border#445250c1
  • sideBar.foreground#f9f4f4
  • sideBarSectionHeader.background#aebabee9
  • sideBarSectionHeader.foreground#2a3343e9
  • sideBarTitle.foreground#30322ed1
  • statusBar.background#bdc3c7
  • statusBar.foreground#35495f
  • tab.activeBackground#f9f6f2
  • tab.activeBorder#35495f
  • tab.activeForeground#35495f
  • tab.border#bdc3c7
  • tab.inactiveBackground#bdc3c7
  • tab.inactiveForeground#fff
  • tab.unfocusedActiveBackground#bdc3c7
  • tab.unfocusedActiveBorder#bdc3c7
  • tab.unfocusedActiveForeground#fff
  • widget.shadow#8382aebb

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source.json#533963f1
source.css#533963f1
source.go#533963f1
comment#af3564fa
constant.language#af3564fa
constant.other#af3564f3
keyword.control.flow.js#af3564f3
keyword.control.flow.jsx#af3564fa
keyword.control.flow.ts#af3564DC
keyword.control.flow.tsx#af3564fa
keyword.control.module.js#af3564fa
keyword.control.module.jsx#af3564f3
keyword.control.module.ts#af3564C8
keyword.control.module.tsx#af3564B4
keyword.operator.accessor#af3564fa
markup.italic#af3564B4
meta.import.js#af3564fa
meta.import.jsx#af3564DC
meta.import.ts#af3564fa
meta.import.tsx#af3564fa
meta.object-literal.key.js#af3564C8
meta.object-literal.key.jsx#af3564f3
meta.object-literal.key.ts#af3564fa
meta.object-literal.key.tsx#af3564fa
meta.paragraph.markdown#af3564f3
punctuation.definition.block.js#af3564DC
punctuation.definition.block.jsx#af3564C8
punctuation.definition.block.ts#af3564B4
punctuation.definition.block.tsx#af3564fa
punctuation.separator.parameter.js#af3564fa
punctuation.separator.parameter.jsx#af3564fa
punctuation.separator.parameter.ts#af3564f3
punctuation.separator.parameter.tsx#af3564f3
string.quoted.single.js#af3564f3
string.quoted.single.jsx#af3564fa
string.quoted.single.ts#af3564f3
string.quoted.single.tsx#af3564fa
string.quoted.single.json#af3564f3
support.class.promise.js#af3564DC
support.class.promise.jsx#af3564fa
support.class.promise.ts#af3564fa
support.class.promise.tsx#af3564fa
support.function#af3564fa
support.function.console.js#af3564C8
support.function.console.jsx#af3564fa
support.function.console.ts#af3564fa
support.function.console.tsx#af3564fa
support.type.object.console.js#af3564fa
support.type.object.console.jsx#af3564f3
support.type.object.console.ts#af3564fa
support.type.object.console.tsx#af3564fa
variable.parameter#af3564f3
meta.tag.js#C26F63B4
meta.tag.jsx#C26F63fa
meta.tag.ts#C26F63f3
meta.tag.tsx#C26F63f3
variable.language#C26F63f3
invalid#C26F63faunderline
constant.numeric#C26F63fa
meta.brace.square.js#C26F63f3
meta.brace.square.jsx#C26F63f3
meta.brace.square.ts#C26F63fa
meta.brace.square.tsx#C26F63DC
meta.var.expr.js#C26F63fa
meta.var.expr.jsx#C26F63fa
meta.var.expr.ts#C26F63f3
meta.var.expr.tsx#C26F63fa
keyword.control.import.js#C26F63f3
keyword.control.import.jsx#C26F63B4
keyword.control.import.ts#C26F63f3
keyword.control.import.tsx#C26F63fa
keyword.control.from.js#C26F63B4
keyword.control.from.jsx#C26F63f3
keyword.control.from.ts#C26F63DC
keyword.control.from.tsx#C26F63fa
keyword.control.export.js#C26F63f3
keyword.control.export.jsx#C26F63C8
keyword.control.export.ts#C26F63f3
keyword.control.export.tsx#C26F63fa
keyword.control.default.js#C26F63f3
keyword.control.default.jsx#C26F63fa
keyword.control.default.ts#C26F63fa
keyword.control.default.tsx#C26F63B4
support.type.object.module.js#C26F63DC
support.type.object.module.jsx#C26F63DC
support.type.object.module.ts#C26F63f3
support.type.object.module.tsx#C26F63fa
punctuation.definition.parameters.begin.js#C26F63fa
punctuation.definition.parameters.begin.jsx#C26F63f3
punctuation.definition.parameters.begin.ts#C26F63fa
punctuation.definition.parameters.begin.tsx#C26F63fa
punctuation.definition.parameters.end.js#C26F63fa
punctuation.definition.parameters.end.jsx#C26F63C8
punctuation.definition.parameters.end.ts#C26F63B4
punctuation.definition.parameters.end.tsx#C26F63C8
punctuation.definition.parameters.end.js#C26F63f3
punctuation.definition.parameters.end.jsx#C26F63fa
punctuation.definition.parameters.end.ts#C26F63B4
punctuation.definition.parameters.end.tsx#C26F63fa
markup.quote#C26F63fa
entity.other.attribute-name.js#C26F63C8
entity.other.attribute-name.jsx#C26F63fa
entity.other.attribute-name.ts#C26F63f3
entity.other.attribute-name.tsx#C26F63fa
meta.parameters.js#C26F63f3
meta.parameters.jsx#C26F63fa
meta.parameters.ts#C26F63C8
meta.parameters.tsx#C26F63fa
variable.other.class.js#C26F63fa
variable.other.class.jsx#C26F63fa
variable.other.class.ts#C26F63fa
variable.other.class.tsx#C26F63fa
constant.other.object.key.js#C26F63f3
constant.other.object.key.jsx#C26F63f3
constant.other.object.key.ts#C26F63C8
constant.other.object.key.tsx#C26F63f3
entity.name.function.method#C26F63fa
string.quoted.single.js#C26F63fa
string.quoted.single.jsx#C26F63DC
string.quoted.single.ts#C26F63fa
string.quoted.single.tsx#C26F63fa
support.type.property-name.json#C26F63f3
variable.other.property.js#C26F63fa
variable.other.property.jsx#C26F63B4
variable.other.property.ts#C26F63f3
variable.other.property.tsx#C26F63f3
entity.name.class#C26F63faunderline
comment.block.documentation#533963BF
comment.line.double-slash#533963f1
constant.language.null.js#533963f1
constant.language.null.jsx#533963AB
constant.language.null.ts#533963f1
constant.language.null.tsx#533963f3
entity.name.type#533963BF
entity.other.inherited-class#533963f3
markup.heading.markdown#533963D3
meta.brace.round.js#533963f3
meta.brace.round.jsx#533963f3
meta.brace.round.ts#533963f1
meta.brace.round.tsx#533963f3
entity.name.function#533963f1underline
meta.tag.attributes.js#533963D3
meta.tag.attributes.jsx#533963f1
meta.tag.attributes.ts#533963f3
meta.tag.attributes.tsx#533963f1
punctuation.accessor.js#533963f1
punctuation.accessor.jsx#533963BF
punctuation.accessor.ts#533963f1
punctuation.accessor.tsx#533963f1
punctuation.separator.comma.js#533963f1
punctuation.separator.comma.jsx#533963f3
punctuation.separator.comma.ts#533963f1
punctuation.separator.comma.tsx#533963f1
source.js#533963f3
source.jsx#533963f1
source.ts#533963f3
source.tsx#533963f3
storage.modifier.async.js#533963f3
storage.modifier.async.jsx#533963f1
storage.modifier.async.ts#533963f1
storage.modifier.async.tsx#533963f3
support.class.builtin.js#533963f3
support.class.builtin.jsx#533963f1
support.class.builtin.ts#533963f1
support.class.builtin.tsx#533963f1
support.type.primitive.js#533963D3
support.type.primitive.jsx#533963D3
support.type.primitive.ts#533963f3
support.type.primitive.tsx#533963BF
support.variable.property.js#533963f3
support.variable.property.jsx#533963f3
support.variable.property.ts#533963f1
support.variable.property.tsx#533963D3
variable#533963f1
variable.other.object.js#533963f1
variable.other.object.jsx#533963f3
variable.other.object.ts#533963f1
variable.other.object.tsx#533963f1
variable.other.readwrite#533963f3
variable.other.readwrite.js#533963D3
variable.other.readwrite.jsx#533963f1
variable.other.readwrite.ts#533963f3
variable.other.readwrite.tsx#533963f1
constant.character#7F8E52f1
constant.language.boolean#7F8E52f1
entity.name.tag#7F8E52f3underline
keyword#7F8E52f3
markup.italic#7F8E52f1
punctuation.accessor.js#7F8E52f3
punctuation.accessor.jsx#7F8E52f1
punctuation.accessor.ts#7F8E52f1
punctuation.accessor.tsx#7F8E52D3
punctuation.separator.key-value.js#7F8E52f1
punctuation.separator.key-value.jsx#7F8E52BF
punctuation.separator.key-value.ts#7F8E52D3
punctuation.separator.key-value.tsx#7F8E52f1
storage.modifier.js#7F8E52BF
storage.modifier.jsx#7F8E52f1
storage.modifier.ts#7F8E52BF
storage.modifier.tsx#7F8E52D3
storage.type#7F8E52f1
string.template#7F8E52D3
support.constant#7F8E52f1
support.function.dom.js#7F8E52f3
support.function.dom.jsx#7F8E52f1
support.function.dom.ts#7F8E52D3
support.function.dom.tsx#7F8E52f1
support.variable.property.js#7F8E52f1
support.variable.property.jsx#7F8E52f1
support.variable.property.ts#7F8E52f1
support.variable.property.tsx#7F8E52f3
variable.language.constructor#7F8E52f1underline
variable.language.this#7F8E52f3