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#252423
  • activityBar.border#413f3d
  • activityBar.foreground#d7d2cb
  • activityBar.inactiveForeground#d7d2cb
  • activityBarBadge.background#4a6fa5
  • activityBarBadge.foreground#fcfbfb
  • badge.background#d7d2cb
  • badge.foreground#20201e
  • breadcrumb.activeSelectionForeground#f4f2f0
  • breadcrumb.focusForeground#f4f2f0
  • breadcrumb.foreground#d7d2cb
  • button.background#d7d2cb
  • button.foreground#20201e
  • button.hoverBackground#dbd7d0
  • button.secondaryBackground#2f2e2d
  • button.secondaryForeground#f4f2f0
  • descriptionForeground#d7d2cb
  • dropdown.background#252423
  • dropdown.border#413f3d
  • dropdown.foreground#f4f2f0
  • editor.background#1a1918
  • editor.findMatchBackground#5c068c66
  • editor.findMatchHighlightBackground#5c068c33
  • editor.foreground#f4f2f0
  • editor.inactiveSelectionBackground#d7d2cb26
  • editor.lineHighlightBackground#d7d2cb1a
  • editor.lineHighlightBorder#d7d2cb00
  • editor.selectionBackground#d7d2cb4d
  • editor.wordHighlightBackground#d7d2cb33
  • editorBracketMatch.background#d7d2cb40
  • editorBracketMatch.border#d7d2cb99
  • editorCursor.foreground#d7d2cb
  • editorError.foreground#dd4132
  • editorGroup.border#413f3d
  • editorGroupHeader.tabsBackground#252423
  • editorGroupHeader.tabsBorder#413f3d
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#f4f2f033
  • editorIndentGuide.background#f4f2f014
  • editorInfo.foreground#4a6fa5
  • editorLineNumber.activeForeground#f4f2f0
  • editorLineNumber.foreground#d7d2cb
  • editorRuler.foreground#f4f2f014
  • editorSuggestWidget.selectedBackground#d7d2cb40
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#f4f2f01a
  • editorWidget.background#252423
  • editorWidget.border#413f3d
  • focusBorder#d7d2cb99
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#d7d2cb
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#d7d2cb
  • input.background#252423
  • input.border#413f3d
  • input.foreground#f4f2f0
  • input.placeholderForeground#d7d2cb
  • inputOption.activeBorder#d7d2cb
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#4a6fa5
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#d7d2cb4d
  • list.activeSelectionForeground#f4f2f0
  • list.focusBackground#d7d2cb33
  • list.highlightForeground#d7d2cb
  • list.hoverBackground#d7d2cb26
  • list.inactiveSelectionBackground#d7d2cb26
  • minimap.background#1a1918
  • minimap.findMatchHighlight#5c068c99
  • minimap.selectionHighlight#d7d2cb66
  • notificationLink.foreground#d7d2cb
  • notifications.background#2f2e2d
  • notifications.foreground#f4f2f0
  • panel.background#252423
  • panel.border#413f3d
  • panelTitle.activeBorder#d7d2cb
  • panelTitle.activeForeground#f4f2f0
  • panelTitle.inactiveForeground#d7d2cb
  • peekView.border#d7d2cb
  • peekViewEditor.background#252423
  • peekViewResult.background#2f2e2d
  • peekViewTitle.background#252423
  • progressBar.background#d7d2cb
  • scrollbar.shadow#15151445
  • scrollbarSlider.activeBackground#f4f2f059
  • scrollbarSlider.background#f4f2f01f
  • scrollbarSlider.hoverBackground#f4f2f040
  • selection.background#d7d2cb4d
  • sideBar.background#2f2e2d
  • sideBar.border#413f3d
  • sideBar.foreground#f4f2f0
  • sideBarSectionHeader.background#d7d2cb26
  • sideBarSectionHeader.foreground#f4f2f0
  • sideBarTitle.foreground#f4f2f0
  • statusBar.background#817e7a
  • statusBar.border#413f3d
  • statusBar.debuggingBackground#4a6fa5
  • statusBar.debuggingForeground#fcfbfb
  • statusBar.foreground#e7e4e0
  • statusBar.noFolderBackground#252423
  • statusBarItem.hoverBackground#d7d2cb4d
  • statusBarItem.remoteBackground#d7d2cb
  • statusBarItem.remoteForeground#20201e
  • tab.activeBackground#1a1918
  • tab.activeBorder#d7d2cb
  • tab.activeBorderTop#d7d2cb00
  • tab.activeForeground#f4f2f0
  • tab.border#413f3d
  • tab.inactiveBackground#252423
  • tab.inactiveForeground#d7d2cb
  • terminal.ansiBlack#1a1918
  • terminal.ansiBlue#738fa6
  • terminal.ansiBrightBlack#d7d2cb
  • terminal.ansiBrightBlue#4b79a1
  • terminal.ansiBrightCyan#61c0b7
  • terminal.ansiBrightGreen#9abc66
  • terminal.ansiBrightMagenta#bd7ab1
  • terminal.ansiBrightRed#e25e51
  • terminal.ansiBrightWhite#fcfbfb
  • terminal.ansiBrightYellow#f1c96a
  • terminal.ansiCyan#45b5aa
  • terminal.ansiGreen#88b04b
  • terminal.ansiMagenta#b163a3
  • terminal.ansiRed#dd4132
  • terminal.ansiWhite#f4f2f0
  • terminal.ansiYellow#efc050
  • terminal.background#252423
  • terminal.foreground#f4f2f0
  • terminalCursor.foreground#d7d2cb
  • textLink.activeForeground#6585b3
  • textLink.foreground#4a6fa5
  • titleBar.activeBackground#252423
  • titleBar.activeForeground#f4f2f0
  • titleBar.border#413f3d
  • titleBar.inactiveBackground#252423
  • titleBar.inactiveForeground#d7d2cb

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#d7d2cbitalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#d7d2cbbold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#d7d2cbbold
storage.type, storage.modifier#d7d2cbbold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#6586b3
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#d7d2cb
string.regexp#6586b3
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#a474bf
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#b0787cbold
variable.other.constant, variable.other.enummember#b0787cbold
constant.character.escape#ddd9d3
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#fe5000italic
entity.name.type.parameter#fe5000italic
entity.name.function, meta.function entity.name.function#76ff7bbold
meta.function-call entity.name.function, support.function#76ff7b
meta.method-call entity.name.function, entity.name.function.member#76ff7b
variable, variable.other, variable.other.readwrite#f4f2f0
variable.parameter#f4f2f0italic
variable.language, variable.language.this, variable.language.self, variable.language.super#d7d2cbitalic
variable.other.property, variable.other.object.property, meta.object-literal.key#f4f2f0
entity.name.class, entity.name.type.class, support.class#b76faabold italic
entity.other.inherited-class#b76faaitalic
entity.name.tag, punctuation.definition.tag#d7d2cbbold
entity.other.attribute-name#76ff7bitalic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#ddd9d3
punctuation, punctuation.separator, punctuation.terminator, meta.brace#d7d2cb
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#fe5000italic
support.type.property-name.css, support.type.vendored.property-name.css#fe5000
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#b76faabold
support.constant.property-value.css, support.constant.color.css#b0787c
keyword.other.unit.css#a474bf
support.type.property-name.json#fe5000
markup.heading, markup.heading entity.name, entity.name.section.markdown#d7d2cbbold
markup.bold#b0787cbold
markup.italic#fe5000italic
markup.inline.raw, markup.raw#6586b3
markup.underline.link#76ff7b
markup.quote#d7d2cbitalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050