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#f9f3f1
  • activityBar.border#f0dcd5
  • activityBar.foreground#dd4132
  • activityBar.inactiveForeground#de9586
  • activityBarBadge.background#00a3b8
  • activityBarBadge.foreground#fcfbfa
  • badge.background#dd4132
  • badge.foreground#210a08
  • breadcrumb.activeSelectionForeground#210a08
  • breadcrumb.focusForeground#210a08
  • breadcrumb.foreground#de9586
  • button.background#dd4132
  • button.foreground#210a08
  • button.hoverBackground#c73b2d
  • button.secondaryBackground#f9f3f1
  • button.secondaryForeground#210a08
  • descriptionForeground#de9586
  • dropdown.background#fdfbfa
  • dropdown.border#f0dcd5
  • dropdown.foreground#210a08
  • editor.background#fdfbfa
  • editor.findMatchBackground#5c068c59
  • editor.findMatchHighlightBackground#5c068c26
  • editor.foreground#210a08
  • editor.inactiveSelectionBackground#dd41321a
  • editor.lineHighlightBackground#dd413214
  • editor.lineHighlightBorder#dd413200
  • editor.selectionBackground#dd413233
  • editor.wordHighlightBackground#dd413226
  • editorBracketMatch.background#dd413233
  • editorBracketMatch.border#dd413280
  • editorCursor.foreground#dd4132
  • editorError.foreground#bf1932
  • editorGroup.border#f0dcd5
  • editorGroupHeader.tabsBackground#fbf7f6
  • editorGroupHeader.tabsBorder#f0dcd5
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#210a082e
  • editorIndentGuide.background#210a0814
  • editorInfo.foreground#00a3b8
  • editorLineNumber.activeForeground#210a08
  • editorLineNumber.foreground#de9586
  • editorRuler.foreground#210a0814
  • editorSuggestWidget.selectedBackground#dd413226
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#210a081a
  • editorWidget.background#fdfbfa
  • editorWidget.border#f0dcd5
  • focusBorder#dd413280
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#de9586
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#de9586
  • input.background#fdfbfa
  • input.border#f0dcd5
  • input.foreground#210a08
  • input.placeholderForeground#de9586
  • inputOption.activeBorder#dd4132
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#00a3b8
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#dd413233
  • list.activeSelectionForeground#210a08
  • list.focusBackground#dd413226
  • list.highlightForeground#dd4132
  • list.hoverBackground#dd41321a
  • list.inactiveSelectionBackground#dd41321a
  • minimap.background#fdfbfa
  • minimap.findMatchHighlight#5c068c80
  • minimap.selectionHighlight#dd41324d
  • notificationLink.foreground#dd4132
  • notifications.background#fdfbfa
  • notifications.foreground#210a08
  • panel.background#fbf7f6
  • panel.border#f0dcd5
  • panelTitle.activeBorder#dd4132
  • panelTitle.activeForeground#210a08
  • panelTitle.inactiveForeground#de9586
  • peekView.border#dd4132
  • peekViewEditor.background#fbf7f6
  • peekViewResult.background#f9f3f1
  • peekViewTitle.background#fbf7f6
  • progressBar.background#dd4132
  • scrollbar.shadow#16060514
  • scrollbarSlider.activeBackground#210a084d
  • scrollbarSlider.background#210a081a
  • scrollbarSlider.hoverBackground#210a0833
  • selection.background#dd413233
  • sideBar.background#fbf7f6
  • sideBar.border#f0dcd5
  • sideBar.foreground#210a08
  • sideBarSectionHeader.background#dd41321a
  • sideBarSectionHeader.foreground#210a08
  • sideBarTitle.foreground#210a08
  • statusBar.background#dd4132
  • statusBar.border#f0dcd5
  • statusBar.debuggingBackground#00a3b8
  • statusBar.debuggingForeground#fcfbfa
  • statusBar.foreground#210a08
  • statusBar.noFolderBackground#f9f3f1
  • statusBarItem.hoverBackground#fcfbfa33
  • statusBarItem.remoteBackground#bc372b
  • statusBarItem.remoteForeground#210a08
  • tab.activeBackground#fdfbfa
  • tab.activeBorder#dd4132
  • tab.activeBorderTop#dd413200
  • tab.activeForeground#210a08
  • tab.border#f0dcd5
  • tab.inactiveBackground#fbf7f6
  • tab.inactiveForeground#de9586
  • terminal.ansiBlack#210a08
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#de9586
  • terminal.ansiBrightBlue#2c9fd9
  • terminal.ansiBrightCyan#45b5aa
  • terminal.ansiBrightGreen#88b04b
  • terminal.ansiBrightMagenta#b163a3
  • terminal.ansiBrightRed#dd4132
  • terminal.ansiBrightWhite#fcfbfa
  • terminal.ansiBrightYellow#efc050
  • terminal.ansiCyan#006e7f
  • terminal.ansiGreen#4e9a2f
  • terminal.ansiMagenta#8c3359
  • terminal.ansiRed#bf1932
  • terminal.ansiWhite#fdfbfa
  • terminal.ansiYellow#d4a017
  • terminal.background#fbf7f6
  • terminal.foreground#210a08
  • terminalCursor.foreground#dd4132
  • textLink.activeForeground#0091a3
  • textLink.foreground#00a3b8
  • titleBar.activeBackground#fbf7f6
  • titleBar.activeForeground#210a08
  • titleBar.border#f0dcd5
  • titleBar.inactiveBackground#fbf7f6
  • titleBar.inactiveForeground#de9586

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#de9586italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#cb3c2ebold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#cb3c2ebold
storage.type, storage.modifier#cb3c2ebold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#007986
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#cb3c2e
string.regexp#007986
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#5c068c
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#5e2b4ebold
variable.other.constant, variable.other.enummember#5e2b4ebold
constant.character.escape#bf4f45
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#9b1b30italic
entity.name.type.parameter#9b1b30italic
entity.name.function, meta.function entity.name.function#38793abold
meta.function-call entity.name.function, support.function#38793a
meta.method-call entity.name.function, entity.name.function.member#38793a
variable, variable.other, variable.other.readwrite#210a08
variable.parameter#210a08italic
variable.language, variable.language.this, variable.language.self, variable.language.super#cb3c2eitalic
variable.other.property, variable.other.object.property, meta.object-literal.key#210a08
entity.name.class, entity.name.type.class, support.class#4f7d15bold italic
entity.other.inherited-class#4f7d15italic
entity.name.tag, punctuation.definition.tag#cb3c2ebold
entity.other.attribute-name#38793aitalic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#bf4f45
punctuation, punctuation.separator, punctuation.terminator, meta.brace#de9586
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#9b1b30italic
support.type.property-name.css, support.type.vendored.property-name.css#9b1b30
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#4f7d15bold
support.constant.property-value.css, support.constant.color.css#5e2b4e
keyword.other.unit.css#5c068c
support.type.property-name.json#9b1b30
markup.heading, markup.heading entity.name, entity.name.section.markdown#cb3c2ebold
markup.bold#5e2b4ebold
markup.italic#9b1b30italic
markup.inline.raw, markup.raw#007986
markup.underline.link#38793a
markup.quote#de9586italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050