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#f3f0e0
  • editor.findMatchBackground#95a5a677
  • editor.findMatchHighlightBackground#71aac355
  • editor.findRangeHighlightBackground#3f706366
  • editor.foldBackground#fafafa
  • editor.lineHighlightBackground#bbc0c425
  • editor.lineHighlightBorderx#9a9b9411
  • editor.selectionBackground#bbc0c455
  • editor.selectionHighlightBackground#bbc0c488
  • editor.wordHighlightBackground#bbc0c4aa
  • editor.wordHighlightStrongBackground#bbc0c4dd
  • editorBracketMatch.background#ecf6ff
  • editorBracketMatch.border#c3c1a9
  • editorCursor.foreground#544
  • editorGroupHeader.tabsBackground#bbc0c4
  • 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#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
entity.name.tag#884b50underline
source.go#c4773b
source.json#c4773b
source.css#c4773b
markup.italic#82484C
punctuation.accessor.js#884b50
punctuation.accessor.jsx#884b50
punctuation.accessor.ts#7C4449
punctuation.accessor.tsx#884b50
source.js#764145
source.jsx#884b50
source.ts#7C4449
source.tsx#82484C
storage.modifier.js#8E4E54
storage.modifier.jsx#9A555B
storage.modifier.ts#884b50
storage.modifier.tsx#884b50
storage.type#945257
string.quoted.single.js#82484C
string.quoted.single.jsx#884b50
string.quoted.single.ts#884b50
string.quoted.single.tsx#945257
support.function.dom.js#764145
support.function.dom.jsx#884b50
support.function.dom.ts#884b50
support.function.dom.tsx#884b50
support.variable.property.js#7C4449
support.variable.property.jsx#884b50
support.variable.property.ts#884b50
support.variable.property.tsx#884b50
variable.language.constructor#764145underline
variable.language.this#764145
meta.var.expr.js#9A555B
meta.var.expr.jsx#8E4E54
meta.var.expr.ts#884b50
meta.var.expr.tsx#884b50
variable#357CA7
keyword.control.import.js#357CA7
keyword.control.import.jsx#3782AF
keyword.control.import.ts#307097
keyword.control.import.tsx#3988B7
keyword.control.from.js#4293C3
keyword.control.from.jsx#3782AF
keyword.control.from.ts#4293C3
keyword.control.from.tsx#3782AF
keyword.control.export.js#3782AF
keyword.control.export.jsx#3782AF
keyword.control.export.ts#3782AF
keyword.control.export.tsx#357CA7
variable.parameter#3782AF
support.function#3782AF
meta.import.js#3988B7
meta.import.jsx#3782AF
meta.import.ts#3782AF
meta.import.tsx#3782AF
meta.paragraph.markdown#3782AF
entity.other.attribute-name.js#3782AF
entity.other.attribute-name.jsx#357CA7
entity.other.attribute-name.ts#3988B7
entity.other.attribute-name.tsx#357CA7
string.quoted.single.js#4293C3
string.quoted.single.jsx#3782AF
string.quoted.single.ts#357CA7
string.quoted.single.tsx#3C8EBF
string.quoted.single.json#3782AF
support.class.promise.js#357CA7
support.class.promise.jsx#307097
support.class.promise.ts#3782AF
support.class.promise.tsx#357CA7
support.type.object.console.js#3C8EBF
support.type.object.console.jsx#3782AF
support.type.object.console.ts#357CA7
support.type.object.console.tsx#307097
support.function.console.js#3782AF
support.function.console.jsx#3988B7
support.function.console.ts#3782AF
support.function.console.tsx#4293C3
punctuation.definition.block.js#3988B7
punctuation.definition.block.jsx#3C8EBF
punctuation.definition.block.ts#3C8EBF
punctuation.definition.block.tsx#307097
keyword#c4773b
keyword.control.default.js#c4773b
keyword.control.default.jsx#c4773b
keyword.control.default.ts#CC8955
keyword.control.default.tsx#c4773b
support.type.object.module.js#c4773b
support.type.object.module.jsx#C77D44
support.type.object.module.ts#c4773b
support.type.object.module.tsx#c4773b
keyword.control.module.js#B26C36
keyword.control.module.jsx#c4773b
keyword.control.module.ts#BB7238
keyword.control.module.tsx#C77D44
keyword.operator.accessor#c4773b
invalid#c4773bunderline
constant.numeric#c4773b
constant.language.boolean#C77D44
constant.language.null.js#c4773b
constant.language.null.jsx#AA6733
constant.language.null.ts#c4773b
constant.language.null.tsx#BB7238
entity.name.class#c4773bunderline
entity.name.function#c4773bunderline
entity.name.type#C9834Dunderline
markup.heading.markdown#CC8955
punctuation.separator.comma.js#c4773b
punctuation.separator.comma.jsx#c4773b
punctuation.separator.comma.ts#BB7238
punctuation.separator.comma.tsx#AA6733
support.variable.property.js#BB7238
support.variable.property.jsx#c4773b
support.variable.property.ts#AA6733
support.variable.property.tsx#c4773b
support.type.primitive.js#c4773b
support.type.primitive.jsx#AA6733
support.type.primitive.ts#C77D44
support.type.primitive.tsx#C9834D
punctuation.definition.parameters.begin.js#B03F4D
punctuation.definition.parameters.begin.jsx#C35866
punctuation.definition.parameters.begin.ts#C0505E
punctuation.definition.parameters.begin.tsx#B84251
punctuation.definition.parameters.end.js#9F3946
punctuation.definition.parameters.end.jsx#9F3946
punctuation.definition.parameters.end.ts#B84251
punctuation.definition.parameters.end.tsx#BD4857
punctuation.definition.parameters.end.js#BD4857
punctuation.definition.parameters.end.jsx#B03F4D
punctuation.definition.parameters.end.ts#B84251
punctuation.definition.parameters.end.tsx#B03F4D
markup.quote#B84251
meta.tag.js#B84251
meta.tag.jsx#B84251
meta.tag.ts#B84251
meta.tag.tsx#A73C4A
meta.parameters.js#C0505E
meta.parameters.jsx#B84251
meta.parameters.ts#C0505E
meta.parameters.tsx#BD4857
meta.brace.square.js#B84251
meta.brace.square.jsx#B84251
meta.brace.square.ts#B03F4D
meta.brace.square.tsx#B03F4D
variable.other.class.js#B03F4D
variable.other.class.jsx#B84251
variable.other.class.ts#B03F4D
variable.other.class.tsx#B03F4D
punctuation.separator.key-value.js#B03F4D
punctuation.separator.key-value.jsx#B84251
punctuation.separator.key-value.ts#B84251
punctuation.separator.key-value.tsx#B03F4D
storage.modifier.async.js#BD4857
storage.modifier.async.jsx#A73C4A
storage.modifier.async.ts#B03F4D
storage.modifier.async.tsx#B03F4D
meta.brace.round.js#B84251
meta.brace.round.jsx#C0505E
meta.brace.round.ts#A73C4A
meta.brace.round.tsx#B03F4D
constant.other.object.key.js#BD4857
constant.other.object.key.jsx#BD4857
constant.other.object.key.ts#B84251
constant.other.object.key.tsx#B03F4D
entity.name.function.method#B84251
string.template#B84251
support.type.property-name.json#B03F4D
variable.other.property.js#9F3946
variable.other.property.jsx#A73C4A
variable.other.property.ts#BD4857
variable.other.property.tsx#B84251
support.constant#406F64
punctuation.separator.parameter.js#406F64
punctuation.separator.parameter.jsx#46796D
punctuation.separator.parameter.ts#406F64
punctuation.separator.parameter.tsx#406F64
constant.character#3D6A60
constant.language#406F64
constant.other#406F64
comment#376057
markup.italic#3D6A60
meta.object-literal.key.js#406F64
meta.object-literal.key.jsx#406F64
meta.object-literal.key.ts#3D6A60
meta.object-literal.key.tsx#3D6A60
comment.block.documentation#3D6A60
comment.line.double-slash#46796D
punctuation.accessor.js#3D6A60
punctuation.accessor.jsx#406F64
punctuation.accessor.ts#406F64
punctuation.accessor.tsx#406F64
variable.language#406F64
variable.other.object.js#376057
variable.other.object.jsx#406F64
variable.other.object.ts#406F64
variable.other.object.tsx#46796D
variable.other.readwrite#3A655B
variable.other.readwrite.js#406F64
variable.other.readwrite.jsx#3D6A60
variable.other.readwrite.ts#406F64
variable.other.readwrite.tsx#406F64
entity.other.inherited-class#497E72
support.class.builtin.js#406F64
support.class.builtin.jsx#497E72
support.class.builtin.ts#406F64
support.class.builtin.tsx#3D6A60
meta.tag.attributes.js#46796D
meta.tag.attributes.jsx#406F64
meta.tag.attributes.ts#406F64
meta.tag.attributes.tsx#406F64