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#2a2222
  • activityBar.border#4a3d3c
  • activityBar.foreground#f7cac9
  • activityBar.inactiveForeground#a27380
  • activityBarBadge.background#53b0ae
  • activityBarBadge.foreground#f5f1f2
  • badge.background#f7cac9
  • badge.foreground#251e1e
  • breadcrumb.activeSelectionForeground#e3d6da
  • breadcrumb.focusForeground#e3d6da
  • breadcrumb.foreground#a27380
  • button.background#f7cac9
  • button.foreground#251e1e
  • button.hoverBackground#f8cfce
  • button.secondaryBackground#362c2c
  • button.secondaryForeground#e3d6da
  • descriptionForeground#a27380
  • dropdown.background#2a2222
  • dropdown.border#4a3d3c
  • dropdown.foreground#e3d6da
  • editor.background#1e1818
  • editor.findMatchBackground#5c068c66
  • editor.findMatchHighlightBackground#5c068c33
  • editor.foreground#e3d6da
  • editor.inactiveSelectionBackground#f7cac926
  • editor.lineHighlightBackground#f7cac91a
  • editor.lineHighlightBorder#f7cac900
  • editor.selectionBackground#f7cac94d
  • editor.wordHighlightBackground#f7cac933
  • editorBracketMatch.background#f7cac940
  • editorBracketMatch.border#f7cac999
  • editorCursor.foreground#f7cac9
  • editorError.foreground#dd4132
  • editorGroup.border#4a3d3c
  • editorGroupHeader.tabsBackground#2a2222
  • editorGroupHeader.tabsBorder#4a3d3c
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#e3d6da33
  • editorIndentGuide.background#e3d6da14
  • editorInfo.foreground#53b0ae
  • editorLineNumber.activeForeground#e3d6da
  • editorLineNumber.foreground#a27380
  • editorRuler.foreground#e3d6da14
  • editorSuggestWidget.selectedBackground#f7cac940
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#e3d6da1a
  • editorWidget.background#2a2222
  • editorWidget.border#4a3d3c
  • focusBorder#f7cac999
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#a27380
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#a27380
  • input.background#2a2222
  • input.border#4a3d3c
  • input.foreground#e3d6da
  • input.placeholderForeground#a27380
  • inputOption.activeBorder#f7cac9
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#53b0ae
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#f7cac94d
  • list.activeSelectionForeground#e3d6da
  • list.focusBackground#f7cac933
  • list.highlightForeground#f7cac9
  • list.hoverBackground#f7cac926
  • list.inactiveSelectionBackground#f7cac926
  • minimap.background#1e1818
  • minimap.findMatchHighlight#5c068c99
  • minimap.selectionHighlight#f7cac966
  • notificationLink.foreground#f7cac9
  • notifications.background#362c2c
  • notifications.foreground#e3d6da
  • panel.background#2a2222
  • panel.border#4a3d3c
  • panelTitle.activeBorder#f7cac9
  • panelTitle.activeForeground#e3d6da
  • panelTitle.inactiveForeground#a27380
  • peekView.border#f7cac9
  • peekViewEditor.background#2a2222
  • peekViewResult.background#362c2c
  • peekViewTitle.background#2a2222
  • progressBar.background#f7cac9
  • scrollbar.shadow#19141445
  • scrollbarSlider.activeBackground#e3d6da59
  • scrollbarSlider.background#e3d6da1f
  • scrollbarSlider.hoverBackground#e3d6da40
  • selection.background#f7cac94d
  • sideBar.background#362c2c
  • sideBar.border#4a3d3c
  • sideBar.foreground#e3d6da
  • sideBarSectionHeader.background#f7cac926
  • sideBarSectionHeader.foreground#e3d6da
  • sideBarTitle.foreground#e3d6da
  • statusBar.background#947979
  • statusBar.border#4a3d3c
  • statusBar.debuggingBackground#53b0ae
  • statusBar.debuggingForeground#f5f1f2
  • statusBar.foreground#fadfdf
  • statusBar.noFolderBackground#2a2222
  • statusBarItem.hoverBackground#f7cac94d
  • statusBarItem.remoteBackground#f7cac9
  • statusBarItem.remoteForeground#251e1e
  • tab.activeBackground#1e1818
  • tab.activeBorder#f7cac9
  • tab.activeBorderTop#f7cac900
  • tab.activeForeground#e3d6da
  • tab.border#4a3d3c
  • tab.inactiveBackground#2a2222
  • tab.inactiveForeground#a27380
  • terminal.ansiBlack#1e1818
  • terminal.ansiBlue#838ba5
  • terminal.ansiBrightBlack#a27380
  • terminal.ansiBrightBlue#4b79a1
  • terminal.ansiBrightCyan#61c0b7
  • terminal.ansiBrightGreen#9abc66
  • terminal.ansiBrightMagenta#bd7ab1
  • terminal.ansiBrightRed#e25e51
  • terminal.ansiBrightWhite#f5f1f2
  • terminal.ansiBrightYellow#f1c96a
  • terminal.ansiCyan#45b5aa
  • terminal.ansiGreen#88b04b
  • terminal.ansiMagenta#b163a3
  • terminal.ansiRed#dd4132
  • terminal.ansiWhite#e3d6da
  • terminal.ansiYellow#efc050
  • terminal.background#2a2222
  • terminal.foreground#e3d6da
  • terminalCursor.foreground#f7cac9
  • textLink.activeForeground#6dbcba
  • textLink.foreground#53b0ae
  • titleBar.activeBackground#2a2222
  • titleBar.activeForeground#e3d6da
  • titleBar.border#4a3d3c
  • titleBar.inactiveBackground#2a2222
  • titleBar.inactiveForeground#a27380

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#a27380italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#f7cac9bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#f7cac9bold
storage.type, storage.modifier#f7cac9bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#53b0ae
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#f7cac9
string.regexp#53b0ae
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#a474bf
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#efc050bold
variable.other.constant, variable.other.enummember#efc050bold
constant.character.escape#f8d2d1
entity.name.type, entity.name.type.class, entity.name.type.interface, entity.name.type.enum, entity.name.type.alias, entity.name.type.module, support.type, support.type.builtin#b07583italic
entity.name.type.parameter#b07583italic
entity.name.function, meta.function entity.name.function#e8d4e2bold
meta.function-call entity.name.function, support.function#e8d4e2
meta.method-call entity.name.function, entity.name.function.member#e8d4e2
variable, variable.other, variable.other.readwrite#e3d6da
variable.parameter#e3d6daitalic
variable.language, variable.language.this, variable.language.self, variable.language.super#f7cac9italic
variable.other.property, variable.other.object.property, meta.object-literal.key#e3d6da
entity.name.class, entity.name.type.class, support.class#88b04bbold italic
entity.other.inherited-class#88b04bitalic
entity.name.tag, punctuation.definition.tag#f7cac9bold
entity.other.attribute-name#e8d4e2italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#f8d2d1
punctuation, punctuation.separator, punctuation.terminator, meta.brace#a27380
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#b07583italic
support.type.property-name.css, support.type.vendored.property-name.css#b07583
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#88b04bbold
support.constant.property-value.css, support.constant.color.css#efc050
keyword.other.unit.css#a474bf
support.type.property-name.json#b07583
markup.heading, markup.heading entity.name, entity.name.section.markdown#f7cac9bold
markup.bold#efc050bold
markup.italic#b07583italic
markup.inline.raw, markup.raw#53b0ae
markup.underline.link#e8d4e2
markup.quote#a27380italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050