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
  • diffEditor.insertedTextBackground#4A422020
  • 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
  • extensionButton.prominentBackground#463A28
  • extensionButton.prominentForeground#FFFFFF
  • extensionButton.prominentHoverBackground#3A2E20
  • focusBorder#6A3A1480
  • gitDecoration.addedResourceForeground#4A4220
  • 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
  • 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
  • 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
  • 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#2A3838
  • 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#2A3838
  • terminal.ansiBrightBlack#7A6E54
  • terminal.ansiBrightBlue#2A3838
  • terminal.ansiBrightCyan#2A3838
  • terminal.ansiBrightGreen#3A2A14
  • terminal.ansiBrightMagenta#6A3A14
  • terminal.ansiBrightRed#7A2A18
  • terminal.ansiBrightWhite#2A2218
  • terminal.ansiBrightYellow#6A3A14
  • terminal.ansiCyan#2A3838
  • terminal.ansiGreen#4A4220
  • terminal.ansiMagenta#6A3A14
  • terminal.ansiRed#7A2A18
  • terminal.ansiWhite#7A6E54
  • terminal.ansiYellow#6A3A14
  • terminal.background#F6EDD4
  • terminal.foreground#2A2218
  • terminalCursor.foreground#2A2218
  • 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#8E7C50italic
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#9A7822
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#9A7822italic
constant.other#9A7822
entity.name.function, meta.function-call entity.name.function, support.function, meta.require#6E3A52
meta.decorator, punctuation.decorator, entity.name.function.decorator#6E3A52italic
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#7A6E54
punctuation, meta.brace, punctuation.separator, punctuation.terminator#A89A78
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#6E3A52
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#7A4420
constant.numeric.css, keyword.other.unit.css#9A7822
markup.heading, entity.name.section.markdown#A2381Abold
markup.bold#2A2218bold
markup.italic#463A28italic
markup.underline.link, string.other.link#6E3A52
markup.inline.raw, markup.fenced_code.block#6A4A16
markup.quote#8E7C50italic
variable.parameter.function.language.python#A2381Aitalic
support.function.builtin.python#6E3A52
support.type.property-name.json#6E3A52
entity.name.tag.yaml#6E3A52
invalid, invalid.illegal#7A2A18underline
invalid.deprecated#8A5818strikethrough
keyword.control.transition.mermaid, keyword.control.line.mermaid#7A6E54
Papyrus Inkwright by Saadman Sakib - VS Code Theme