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#262320
  • activityBar.border#433e39
  • activityBar.foreground#decdbe
  • activityBar.inactiveForeground#decdbe
  • activityBarBadge.background#0f4c81
  • activityBarBadge.foreground#fcfbfa
  • badge.background#decdbe
  • badge.foreground#211f1d
  • breadcrumb.activeSelectionForeground#f6f1ed
  • breadcrumb.focusForeground#f6f1ed
  • breadcrumb.foreground#decdbe
  • button.background#decdbe
  • button.foreground#211f1d
  • button.hoverBackground#e1d2c5
  • button.secondaryBackground#312d2a
  • button.secondaryForeground#f6f1ed
  • descriptionForeground#decdbe
  • dropdown.background#262320
  • dropdown.border#433e39
  • dropdown.foreground#f6f1ed
  • editor.background#1b1917
  • editor.findMatchBackground#76ff7b66
  • editor.findMatchHighlightBackground#76ff7b33
  • editor.foreground#f6f1ed
  • editor.inactiveSelectionBackground#decdbe26
  • editor.lineHighlightBackground#decdbe1a
  • editor.lineHighlightBorder#decdbe00
  • editor.selectionBackground#decdbe4d
  • editor.wordHighlightBackground#decdbe33
  • editorBracketMatch.background#decdbe40
  • editorBracketMatch.border#decdbe99
  • editorCursor.foreground#decdbe
  • editorError.foreground#dd4132
  • editorGroup.border#433e39
  • editorGroupHeader.tabsBackground#262320
  • editorGroupHeader.tabsBorder#433e39
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#f6f1ed33
  • editorIndentGuide.background#f6f1ed14
  • editorInfo.foreground#0f4c81
  • editorLineNumber.activeForeground#f6f1ed
  • editorLineNumber.foreground#decdbe
  • editorRuler.foreground#f6f1ed14
  • editorSuggestWidget.selectedBackground#decdbe40
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#f6f1ed1a
  • editorWidget.background#262320
  • editorWidget.border#433e39
  • focusBorder#decdbe99
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#decdbe
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#decdbe
  • input.background#262320
  • input.border#433e39
  • input.foreground#f6f1ed
  • input.placeholderForeground#decdbe
  • inputOption.activeBorder#decdbe
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#0f4c81
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#decdbe4d
  • list.activeSelectionForeground#f6f1ed
  • list.focusBackground#decdbe33
  • list.highlightForeground#decdbe
  • list.hoverBackground#decdbe26
  • list.inactiveSelectionBackground#decdbe26
  • minimap.background#1b1917
  • minimap.findMatchHighlight#76ff7b99
  • minimap.selectionHighlight#decdbe66
  • notificationLink.foreground#decdbe
  • notifications.background#312d2a
  • notifications.foreground#f6f1ed
  • panel.background#262320
  • panel.border#433e39
  • panelTitle.activeBorder#decdbe
  • panelTitle.activeForeground#f6f1ed
  • panelTitle.inactiveForeground#decdbe
  • peekView.border#decdbe
  • peekViewEditor.background#262320
  • peekViewResult.background#312d2a
  • peekViewTitle.background#262320
  • progressBar.background#decdbe
  • scrollbar.shadow#16141345
  • scrollbarSlider.activeBackground#f6f1ed59
  • scrollbarSlider.background#f6f1ed1f
  • scrollbarSlider.hoverBackground#f6f1ed40
  • selection.background#decdbe4d
  • sideBar.background#312d2a
  • sideBar.border#433e39
  • sideBar.foreground#f6f1ed
  • sideBarSectionHeader.background#decdbe26
  • sideBarSectionHeader.foreground#f6f1ed
  • sideBarTitle.foreground#f6f1ed
  • statusBar.background#857b72
  • statusBar.border#433e39
  • statusBar.debuggingBackground#0f4c81
  • statusBar.debuggingForeground#fcfbfa
  • statusBar.foreground#ebe1d8
  • statusBar.noFolderBackground#262320
  • statusBarItem.hoverBackground#decdbe4d
  • statusBarItem.remoteBackground#decdbe
  • statusBarItem.remoteForeground#211f1d
  • tab.activeBackground#1b1917
  • tab.activeBorder#decdbe
  • tab.activeBorderTop#decdbe00
  • tab.activeForeground#f6f1ed
  • tab.border#433e39
  • tab.inactiveBackground#262320
  • tab.inactiveForeground#decdbe
  • terminal.ansiBlack#1b1917
  • terminal.ansiBlue#778da0
  • terminal.ansiBrightBlack#decdbe
  • terminal.ansiBrightBlue#4b79a1
  • terminal.ansiBrightCyan#61c0b7
  • terminal.ansiBrightGreen#9abc66
  • terminal.ansiBrightMagenta#bd7ab1
  • terminal.ansiBrightRed#e25e51
  • terminal.ansiBrightWhite#fcfbfa
  • terminal.ansiBrightYellow#f1c96a
  • terminal.ansiCyan#45b5aa
  • terminal.ansiGreen#88b04b
  • terminal.ansiMagenta#b163a3
  • terminal.ansiRed#dd4132
  • terminal.ansiWhite#f6f1ed
  • terminal.ansiYellow#efc050
  • terminal.background#262320
  • terminal.foreground#f6f1ed
  • terminalCursor.foreground#decdbe
  • textLink.activeForeground#336794
  • textLink.foreground#0f4c81
  • titleBar.activeBackground#262320
  • titleBar.activeForeground#f6f1ed
  • titleBar.border#433e39
  • titleBar.inactiveBackground#262320
  • titleBar.inactiveForeground#decdbe

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#decdbeitalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#decdbebold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#decdbebold
storage.type, storage.modifier#decdbebold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#6188ac
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#decdbe
string.regexp#6188ac
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#76ff7b
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#b07583bold
variable.other.constant, variable.other.enummember#b07583bold
constant.character.escape#e3d5c8
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#8e805citalic
entity.name.type.parameter#8e805citalic
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#f6f1ed
variable.parameter#f6f1editalic
variable.language, variable.language.this, variable.language.self, variable.language.super#decdbeitalic
variable.other.property, variable.other.object.property, meta.object-literal.key#f6f1ed
entity.name.class, entity.name.type.class, support.class#ad6ab3bold italic
entity.other.inherited-class#ad6ab3italic
entity.name.tag, punctuation.definition.tag#decdbebold
entity.other.attribute-name#e8d4e2italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#e3d5c8
punctuation, punctuation.separator, punctuation.terminator, meta.brace#decdbe
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#8e805citalic
support.type.property-name.css, support.type.vendored.property-name.css#8e805c
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#ad6ab3bold
support.constant.property-value.css, support.constant.color.css#b07583
keyword.other.unit.css#76ff7b
support.type.property-name.json#8e805c
markup.heading, markup.heading entity.name, entity.name.section.markdown#decdbebold
markup.bold#b07583bold
markup.italic#8e805citalic
markup.inline.raw, markup.raw#6188ac
markup.underline.link#e8d4e2
markup.quote#decdbeitalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050