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#1C2426
  • activityBar.border#3A454A
  • activityBar.foreground#D75642
  • activityBarBadge.background#D75642
  • activityBarBadge.foreground#141B1F
  • badge.background#D75642
  • badge.foreground#141B1F
  • button.background#D75642
  • button.foreground#141B1F
  • button.hoverBackground#D75642
  • dropdown.background#1C2426
  • dropdown.border#3A454A
  • dropdown.foreground#FFFFFF
  • editor.background#0E1316
  • editor.foreground#FFFFFF
  • editor.lineHighlightBackground#1C242699
  • editor.selectionBackground#21343B80
  • editorBracketMatch.background#21343B55
  • editorBracketMatch.border#D75642
  • editorCursor.foreground#D75642
  • editorGroupHeader.tabsBackground#1C2426
  • editorIndentGuide.activeBackground#3A454A
  • editorIndentGuide.background#3A454A88
  • editorLineNumber.activeForeground#8DC3CE
  • editorLineNumber.foreground#FFFFFFAA
  • editorWhitespace.foreground#3A454A66
  • focusBorder#3A454A
  • foreground#FFFFFF
  • gitDecoration.deletedResourceForeground#D74E42
  • gitDecoration.modifiedResourceForeground#DAA72F
  • gitDecoration.untrackedResourceForeground#53AC80
  • input.background#1C2426
  • input.border#3A454A
  • input.foreground#FFFFFF
  • inputOption.activeBorder#D75642
  • list.activeSelectionBackground#21343B
  • list.activeSelectionForeground#FFFFFF
  • list.focusOutline#D75642
  • list.hoverBackground#1C2426
  • list.inactiveSelectionBackground#21343B
  • minimap.selectionHighlight#21343BAA
  • panel.background#1C2426
  • panel.border#3A454A
  • peekView.border#3A454A
  • peekViewEditor.background#1C2426
  • peekViewTitle.background#1C2426
  • scrollbarSlider.activeBackground#D75642AA
  • scrollbarSlider.background#3A454A66
  • scrollbarSlider.hoverBackground#3A454A99
  • sideBar.background#141B1F
  • sideBar.border#3A454A
  • sideBar.foreground#FFFFFF
  • sideBarTitle.foreground#FFFFFF
  • statusBar.background#1C2426
  • statusBar.border#3A454A
  • statusBar.foreground#FFFFFF
  • tab.activeBackground#0E1316
  • tab.activeForeground#FFFFFF
  • tab.border#3A454A
  • tab.inactiveBackground#21343B
  • tab.inactiveForeground#8DC3CE
  • terminal.ansiBlack#0E1316
  • terminal.ansiBlue#8DC3CE
  • terminal.ansiCyan#FFFFFF
  • terminal.ansiGreen#8DC3CE
  • terminal.ansiMagenta#D75642
  • terminal.ansiRed#D75642
  • terminal.ansiWhite#FFFFFF
  • terminal.ansiYellow#21343B
  • terminal.background#0E1316
  • terminal.foreground#FFFFFF
  • titleBar.activeBackground#1C2426
  • titleBar.activeForeground#FFFFFF
  • titleBar.inactiveBackground#141B1F
  • titleBar.inactiveForeground#FFFFFF
  • widget.shadow#0A0A0A55

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.documentation#819890italic
string, constant.other.symbol, string.regexp, string.template#8DC3CE
constant.character.escape#D75642
constant.numeric#D75642
constant.language.boolean, constant.language.null, constant.language.undefined#D75642
constant, entity.name.constant, support.constant#D75642
keyword, storage.type, storage.modifier, storage.type.function#D75642
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.import, keyword.control.export#D75642
keyword.operator, keyword.operator.expression, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment#819890
storage.type.class, storage.type.interface, storage.type.enum#D75642
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.array, punctuation.section#819890
entity.name.type, support.type, support.class, entity.name.type.class, entity.name.type.interface, entity.name.type.enum#8DC3CE
support.type.builtin, entity.name.type.primitive#8DC3CE
entity.name.function, meta.definition.function entity.name.function, entity.name.function.definition#EAE8E1
meta.function-call entity.name.function, meta.function-call support.function, support.function, entity.name.function.member#D75642
variable.parameter, variable.parameter.function#EAE8E1
variable.other.property, variable.other.object.property, variable.object.property, support.type.property-name, meta.object-literal.key, meta.field.declaration variable.object.property#8DC3CE
variable, meta.definition.variable, variable.other.readwrite#EAE8E1
entity.name.tag, entity.name.tag.template, entity.name.tag.style, entity.name.tag.script, entity.name.tag.css, entity.name.tag.custom.css#D75642
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#819890
entity.other.attribute-name, entity.other.attribute-name.html#8DC3CE
support.class.component, entity.name.tag.template.value#D75642
support.type.property-name.css, meta.property-name.css, support.type.vendored.property-name.css#53AC80
entity.other.attribute-name.class.css, entity.other.attribute-name.class#D75642
entity.other.attribute-name.id.css, entity.other.attribute-name.id#D75642
support.constant.property-value.css, meta.property-value.css, constant.other.color.rgb-value.css#8DC3CE
markup.heading#D75642bold
markup.boldbold
markup.italicitalic
markup.quote#EAE8E1
markup.inline.raw, markup.fenced_code#8DC3CE
invalid, invalid.illegal#FF6B6B