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#E2D7AC
  • activityBar.border#D8CCA8
  • activityBar.foreground#2A2218
  • activityBar.inactiveForeground#7A6E54
  • activityBarBadge.background#6A3A14
  • activityBarBadge.foreground#FFFFFF
  • badge.background#6A3A14
  • badge.foreground#FFFFFF
  • breadcrumb.activeSelectionForeground#2A2218
  • breadcrumb.background#F6EDD4
  • breadcrumb.foreground#7A6E54
  • breadcrumbPicker.background#EFE5C6
  • button.background#463A28
  • button.foreground#FFFFFF
  • button.hoverBackground#3A2E20
  • button.secondaryBackground#D8CCA8
  • button.secondaryForeground#2A2218
  • charts.blue#3A5A66
  • charts.foreground#2A2218
  • charts.green#3A5828
  • charts.lines#A89A78
  • charts.orange#8A5818
  • charts.purple#7A4420
  • charts.red#7A2A18
  • charts.yellow#80631C
  • chat.avatarBackground#E2D7AC
  • chat.avatarForeground#2A2218
  • chat.checkpointSeparator#A89A78
  • chat.editedFileForeground#6A3A14
  • chat.linesAddedForeground#3A5828
  • chat.linesRemovedForeground#7A2A18
  • chat.requestBackground#EFE6C8
  • chat.requestBorder#D8CCA8
  • chat.requestBubbleBackground#EFE6C8
  • chat.requestBubbleHoverBackground#E8E2C6
  • chat.requestCodeBorder#D8CCA8
  • chat.slashCommandBackground#EAE0BC
  • chat.slashCommandForeground#2F5648
  • chat.thinkingShimmer#7A6E54
  • descriptionForeground#6A5E48
  • diffEditor.insertedTextBackground#3A582820
  • diffEditor.removedTextBackground#7A2A1820
  • dropdown.background#EFE5C6
  • dropdown.border#D8CCA8
  • dropdown.foreground#2A2218
  • editor.background#F6EDD4
  • editor.findMatchBackground#6A3A1470
  • editor.findMatchHighlightBackground#6A3A1430
  • editor.foreground#2A2218
  • editor.inactiveSelectionBackground#D2C49040
  • editor.lineHighlightBackground#EFE6C8
  • editor.selectionBackground#D2C49070
  • editor.selectionHighlightBackground#D2C49070
  • editor.wordHighlightBackground#D2C49040
  • editor.wordHighlightStrongBackground#D2C49070
  • editorBracketMatch.background#D2C49070
  • editorBracketMatch.border#7A6E54
  • editorCursor.foreground#2A2218
  • editorError.foreground#7A2A18
  • editorGroup.border#D8CCA8
  • editorGroupHeader.tabsBackground#EAE0BC
  • editorGroupHeader.tabsBorder#D8CCA8
  • editorGutter.background#F6EDD4
  • editorHint.foreground#3A2A14
  • editorIndentGuide.activeBackground1#A89A78
  • editorIndentGuide.background1#E5DCBC
  • editorInfo.foreground#2A3838
  • editorLineNumber.activeForeground#463A28
  • editorLineNumber.foreground#A89A78
  • editorOverviewRuler.border#D8CCA8
  • editorStickyScroll.background#EAE0BC
  • editorStickyScrollHover.background#EFE6C8
  • editorWarning.foreground#8A5818
  • editorWhitespace.foreground#E5DCBC
  • errorForeground#7A2A18
  • extensionButton.prominentBackground#463A28
  • extensionButton.prominentForeground#FFFFFF
  • extensionButton.prominentHoverBackground#3A2E20
  • focusBorder#6A3A1480
  • foreground#2A2218
  • gitDecoration.addedResourceForeground#3A5828
  • gitDecoration.conflictingResourceForeground#8A5818
  • gitDecoration.deletedResourceForeground#7A2A18
  • gitDecoration.ignoredResourceForeground#A89A78
  • gitDecoration.modifiedResourceForeground#6A3A14
  • gitDecoration.untrackedResourceForeground#3A2A14
  • input.background#EFE5C6
  • input.border#D8CCA8
  • input.foreground#2A2218
  • input.placeholderForeground#A89A78
  • inputOption.activeBorder#6A3A14
  • inputValidation.errorBorder#7A2A18
  • inputValidation.warningBorder#8A5818
  • list.activeSelectionBackground#E2D7AC
  • list.activeSelectionForeground#2A2218
  • list.focusBackground#E2D7AC
  • list.focusForeground#2A2218
  • list.highlightForeground#6A3A14
  • list.hoverBackground#EFE6C8
  • list.inactiveSelectionBackground#EAE0BC
  • list.inactiveSelectionForeground#463A28
  • menu.background#EFE5C6
  • menu.border#D8CCA8
  • menu.foreground#2A2218
  • menu.selectionBackground#E2D7AC
  • menu.selectionForeground#2A2218
  • menu.separatorBackground#D8CCA8
  • menubar.selectionBackground#D2C49040
  • menubar.selectionForeground#2A2218
  • notificationLink.foreground#6A3A14
  • notifications.background#EAE0BC
  • notifications.border#D8CCA8
  • notifications.foreground#2A2218
  • panel.background#EAE0BC
  • panel.border#D8CCA8
  • panelTitle.activeBorder#6A3A14
  • panelTitle.activeForeground#2A2218
  • panelTitle.inactiveForeground#7A6E54
  • peekView.border#6A3A14
  • peekViewEditor.background#EFE5C6
  • peekViewEditorGutter.background#EFE5C6
  • peekViewResult.background#EAE0BC
  • peekViewResult.fileForeground#2A2218
  • peekViewResult.lineForeground#463A28
  • peekViewResult.selectionBackground#E2D7AC
  • peekViewResult.selectionForeground#2A2218
  • peekViewTitle.background#E2D7AC
  • peekViewTitleDescription.foreground#7A6E54
  • peekViewTitleLabel.foreground#2A2218
  • progressBar.background#6A3A14
  • quickInput.background#F6EDD4
  • quickInput.foreground#2A2218
  • quickInputList.focusBackground#E2D7AC
  • scrollbar.shadow#00000020
  • scrollbarSlider.activeBackground#463A2880
  • scrollbarSlider.background#A89A7860
  • scrollbarSlider.hoverBackground#7A6E5470
  • sideBar.background#EAE0BC
  • sideBar.border#D8CCA8
  • sideBar.foreground#463A28
  • sideBarActivityBarTop.border#D8CCA8
  • sideBarSectionHeader.background#E2D7AC
  • sideBarSectionHeader.border#D8CCA8
  • sideBarSectionHeader.foreground#463A28
  • sideBarTitle.foreground#2A2218
  • statusBar.background#3A2E20
  • statusBar.border#3A2E20
  • statusBar.foreground#F6EDD4
  • statusBar.noFolderBackground#3A2E20
  • statusBarItem.hoverBackground#FFFFFF15
  • statusBarItem.remoteBackground#3A2E20
  • statusBarItem.remoteForeground#F6EDD4
  • symbolIcon.classForeground#3A2A14
  • symbolIcon.constantForeground#6A3A14
  • symbolIcon.functionForeground#2F5648
  • symbolIcon.keywordForeground#2A2218
  • symbolIcon.numberForeground#6A3A14
  • symbolIcon.propertyForeground#2A2218
  • symbolIcon.stringForeground#4A4220
  • symbolIcon.variableForeground#2A2218
  • tab.activeBackground#F6EDD4
  • tab.activeBorderTop#6A3A14
  • tab.activeForeground#2A2218
  • tab.border#D8CCA8
  • tab.inactiveBackground#EAE0BC
  • tab.inactiveForeground#7A6E54
  • tab.unfocusedActiveBackground#F6EDD4
  • tab.unfocusedActiveForeground#463A28
  • terminal.ansiBlack#2A2218
  • terminal.ansiBlue#3A5A66
  • terminal.ansiBrightBlack#7A6E54
  • terminal.ansiBrightBlue#4A6E7C
  • terminal.ansiBrightCyan#3A6B5A
  • terminal.ansiBrightGreen#4A6B2E
  • terminal.ansiBrightMagenta#B0685A
  • terminal.ansiBrightRed#A2381A
  • terminal.ansiBrightWhite#C2B48E
  • terminal.ansiBrightYellow#A07418
  • terminal.ansiCyan#2F5648
  • terminal.ansiGreen#3A5828
  • terminal.ansiMagenta#A05A50
  • terminal.ansiRed#7A2A18
  • terminal.ansiWhite#A89A78
  • terminal.ansiYellow#8A5818
  • terminal.background#F6EDD4
  • terminal.foreground#2A2218
  • terminalCursor.foreground#2A2218
  • textBlockQuote.background#EFE6C8
  • textBlockQuote.border#6A3A14
  • textCodeBlock.background#EFE6C8
  • textLink.activeForeground#244A3D
  • textLink.foreground#2F5648
  • textPreformat.background#EAE0BC
  • textPreformat.border#D8CCA8
  • textPreformat.foreground#6A4A16
  • textSeparator.foreground#D8CCA8
  • titleBar.activeBackground#E2D7AC
  • titleBar.activeForeground#2A2218
  • titleBar.border#D8CCA8
  • titleBar.inactiveBackground#EAE0BC
  • titleBar.inactiveForeground#7A6E54
  • tree.indentGuidesStroke#E5DCBC
  • widget.shadow#00000025

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#71623Fitalic
keyword, keyword.control, keyword.operator.new, keyword.operator.delete, keyword.operator.typeof, keyword.operator.void, storage.modifier#A2381Abold
storage.type#A2381A
string, string.quoted, string.template#3A5828
constant.character.escape, string.regexp#486840
punctuation.definition.template-expression, punctuation.section.embedded#486840
constant.numeric, constant.language.numeric#735919
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#735919italic
constant.other#735919
entity.name.function, meta.function-call entity.name.function, support.function, meta.require#2F5648
meta.decorator, punctuation.decorator, entity.name.function.decorator#2F5648italic
entity.name.type, entity.name.class, support.class, entity.other.inherited-class#7A4420
entity.name.type.interface#7A4420italic
meta.type.annotation, support.type, entity.name.type.alias#6A4A16
variable, variable.other, variable.other.readwrite#2A2218
variable.parameter#5E4A2Aitalic
variable.other.property, support.variable.property, meta.object-literal.key#33301F
variable.language.self, variable.language.this, variable.language.super#A2381Aitalic
entity.name.module, entity.name.namespace, variable.other.module#6A4A16
keyword.operator, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.logical, keyword.operator.assignment#6B604A
punctuation, meta.brace, punctuation.separator, punctuation.terminator#6F6445
entity.name.tag, meta.tag#7A4420
entity.other.attribute-name, meta.tag.attributes#6A4A16
support.type.property-name.css, entity.name.tag.css, support.constant.property-value.css#2F5648
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#7A4420
constant.numeric.css, keyword.other.unit.css#735919
markup.heading, entity.name.section.markdown#A2381Abold
markup.bold#2A2218bold
markup.italic#463A28italic
markup.underline.link, string.other.link#2F5648
markup.inline.raw, markup.fenced_code.block#6A4A16
markup.quote#71623Fitalic
variable.parameter.function.language.python#A2381Aitalic
support.function.builtin.python#2F5648
support.type.property-name.json#2F5648
entity.name.tag.yaml#2F5648
invalid, invalid.illegal#7A2A18underline
invalid.deprecated#8A5818strikethrough
keyword.control.transition.mermaid, keyword.control.line.mermaid#6B604A