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#251918
  • activityBar.border#2C3A37
  • activityBar.foreground#FF3729
  • activityBarBadge.background#FF3729
  • activityBarBadge.foreground#201513
  • badge.background#FF3729
  • badge.foreground#201513
  • button.background#FF3729
  • button.foreground#201513
  • button.hoverBackground#FF4A3D
  • dropdown.background#2B1E1D
  • dropdown.border#5B3633
  • dropdown.foreground#EDDEE6
  • editor.background#150F0E
  • editor.foreground#E7D2D0
  • editor.lineHighlightBackground#25191899
  • editor.selectionBackground#1C3C4A80
  • editorBracketMatch.background#1C3C4A55
  • editorBracketMatch.border#FF3729
  • editorCursor.foreground#FF3729
  • editorGroupHeader.tabsBackground#251918
  • editorIndentGuide.activeBackground#5B3633
  • editorIndentGuide.background#2C3A3788
  • editorLineNumber.activeForeground#6AA095
  • editorLineNumber.foreground#6B948CAA
  • editorWhitespace.foreground#2C3A3766
  • focusBorder#5B3633
  • foreground#E7D2D0
  • gitDecoration.deletedResourceForeground#F55047
  • gitDecoration.modifiedResourceForeground#F0B019
  • gitDecoration.untrackedResourceForeground#4CA981
  • input.background#2B1E1D
  • input.border#5B3633
  • input.foreground#EDDEE6
  • inputOption.activeBorder#FF3729
  • list.activeSelectionBackground#1C3C4A
  • list.activeSelectionForeground#E7D2D0
  • list.focusOutline#FF3729
  • list.hoverBackground#1B2427
  • list.inactiveSelectionBackground#182125
  • minimap.selectionHighlight#1C3C4AAA
  • panel.background#251918
  • panel.border#2C3A37
  • peekView.border#5B3633
  • peekViewEditor.background#211817
  • peekViewTitle.background#251918
  • scrollbarSlider.activeBackground#FF3729AA
  • scrollbarSlider.background#5B363366
  • scrollbarSlider.hoverBackground#5B363399
  • sideBar.background#201513
  • sideBar.border#2C3A37
  • sideBar.foreground#E2CDCB
  • sideBarTitle.foreground#E7D2D0
  • statusBar.background#251918
  • statusBar.border#2C3A37
  • statusBar.foreground#76938D
  • tab.activeBackground#150F0E
  • tab.activeForeground#E7D2D0
  • tab.border#2C3A37
  • tab.inactiveBackground#182125
  • tab.inactiveForeground#3EAFE0
  • terminal.ansiBlack#150F0E
  • terminal.ansiBlue#3EAFE0
  • terminal.ansiCyan#6B948C
  • terminal.ansiGreen#6AA095
  • terminal.ansiMagenta#E14794
  • terminal.ansiRed#FF3729
  • terminal.ansiWhite#E7D2D0
  • terminal.ansiYellow#AD7C0B
  • terminal.background#150F0E
  • terminal.foreground#E7D2D0
  • titleBar.activeBackground#251918
  • titleBar.activeForeground#E7D2D0
  • titleBar.inactiveBackground#201513
  • titleBar.inactiveForeground#6B948C
  • widget.shadow#0A060555

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.documentation#6B948Citalic
string, constant.other.symbol, string.regexp, string.template#3EAFE0
constant.character.escape#EC8DBD
constant.numeric#F0B019
constant.language.boolean, constant.language.null, constant.language.undefined#EEB52F
constant, entity.name.constant, support.constant#FB6A60
keyword, storage.type, storage.modifier, storage.type.function#FF3729
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#F65951
keyword.operator, keyword.operator.expression, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment#73968F
storage.type.class, storage.type.interface, storage.type.enum#FF3729
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, punctuation.section#637E78
entity.name.type, support.type, support.class, entity.name.type.class, entity.name.type.interface, entity.name.type.enum#E873AD
support.type.builtin, entity.name.type.primitive#F089BD
entity.name.function, meta.definition.function entity.name.function, entity.name.function.definition#FF4A3D
meta.function-call entity.name.function, meta.function-call support.function, support.function, entity.name.function.member#F88477
variable.parameter, variable.parameter.function#A4B7B3
variable.other.property, variable.other.object.property, variable.object.property, support.type.property-name, meta.object-literal.key, meta.field.declaration variable.object.property#E170A8
variable, meta.definition.variable, variable.other.readwrite#E7D2D0
entity.name.tag, entity.name.tag.template, entity.name.tag.style, entity.name.tag.script, entity.name.tag.css, entity.name.tag.custom.css#FF3729
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#73968F
entity.other.attribute-name, entity.other.attribute-name.html#E873AD
support.class.component, entity.name.tag.template.value#F0B019
support.type.property-name.css, meta.property-name.css, support.type.vendored.property-name.css#4CA981
entity.other.attribute-name.class.css, entity.other.attribute-name.class#EEB52F
entity.other.attribute-name.id.css, entity.other.attribute-name.id#FF3729
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#3EAFE0
markup.heading#FF3729bold
markup.boldbold
markup.italicitalic
markup.quote#E7D2D0
markup.inline.raw, markup.fenced_code#3EAFE0
invalid, invalid.illegal#FF6B6B