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#E8E2C6
  • activityBar.border#DDD4B2
  • activityBar.foreground#1F2428
  • activityBar.inactiveForeground#6E6F62
  • activityBarBadge.background#5C3A1F
  • activityBarBadge.foreground#FFFFFF
  • badge.background#5C3A1F
  • badge.foreground#FFFFFF
  • breadcrumb.activeSelectionForeground#1F2428
  • breadcrumb.background#FCF6E6
  • breadcrumb.foreground#6E6F62
  • breadcrumbPicker.background#F4EED8
  • button.background#3A4148
  • button.foreground#FFFFFF
  • button.hoverBackground#2E3640
  • button.secondaryBackground#DDD4B2
  • button.secondaryForeground#1F2428
  • charts.blue#285058
  • charts.foreground#1F2428
  • charts.green#4A6B2E
  • charts.lines#A8A593
  • charts.orange#8A5818
  • charts.purple#8A5A30
  • charts.red#7A2E1F
  • charts.yellow#7A5418
  • chat.avatarBackground#E8E2C6
  • chat.avatarForeground#1F2428
  • chat.editedFileForeground#5C3A1F
  • chat.linesAddedForeground#3D4A2E
  • chat.linesRemovedForeground#7A2E1F
  • chat.requestBackground#F4EFDA
  • chat.requestBorder#DDD4B2
  • chat.slashCommandBackground#E8E2C6
  • chat.slashCommandForeground#3C5A5E
  • descriptionForeground#6E6F62
  • diffEditor.insertedTextBackground#3D4A2E20
  • diffEditor.removedTextBackground#7A2E1F20
  • dropdown.background#F4EED8
  • dropdown.border#DDD4B2
  • dropdown.foreground#1F2428
  • editor.background#FCF6E6
  • editor.findMatchBackground#5C3A1F70
  • editor.findMatchHighlightBackground#5C3A1F30
  • editor.foreground#1F2428
  • editor.inactiveSelectionBackground#C8C0A040
  • editor.lineHighlightBackground#F4EFDA
  • editor.selectionBackground#C8C0A075
  • editor.selectionHighlightBackground#C8C0A075
  • editor.wordHighlightBackground#C8C0A040
  • editor.wordHighlightStrongBackground#C8C0A075
  • editorBracketMatch.background#C8C0A075
  • editorBracketMatch.border#6E6F62
  • editorCursor.foreground#1F2428
  • editorError.foreground#7A2E1F
  • editorGroup.border#DDD4B2
  • editorGroupHeader.tabsBackground#F0EAD0
  • editorGroupHeader.tabsBorder#DDD4B2
  • editorGutter.background#FCF6E6
  • editorHint.foreground#3A2E1F
  • editorIndentGuide.activeBackground1#A8A593
  • editorIndentGuide.background1#EBE4C8
  • editorInfo.foreground#157E6A
  • editorLineNumber.activeForeground#3A4148
  • editorLineNumber.foreground#A8A593
  • editorOverviewRuler.border#DDD4B2
  • editorStickyScroll.background#F0EAD0
  • editorStickyScrollHover.background#F4EFDA
  • editorWarning.foreground#8A5818
  • editorWhitespace.foreground#EBE4C8
  • errorForeground#7A2E1F
  • extensionButton.prominentBackground#3A4148
  • extensionButton.prominentForeground#FFFFFF
  • extensionButton.prominentHoverBackground#2E3640
  • focusBorder#5C3A1F80
  • foreground#1F2428
  • gitDecoration.addedResourceForeground#3D4A2E
  • gitDecoration.conflictingResourceForeground#8A5818
  • gitDecoration.deletedResourceForeground#7A2E1F
  • gitDecoration.ignoredResourceForeground#A8A593
  • gitDecoration.modifiedResourceForeground#5C3A1F
  • gitDecoration.untrackedResourceForeground#3A2E1F
  • input.background#F4EED8
  • input.border#DDD4B2
  • input.foreground#1F2428
  • input.placeholderForeground#A8A593
  • inputOption.activeBorder#5C3A1F
  • inputValidation.errorBorder#7A2E1F
  • inputValidation.warningBorder#8A5818
  • list.activeSelectionBackground#E8E2C6
  • list.activeSelectionForeground#1F2428
  • list.focusBackground#E8E2C6
  • list.focusForeground#1F2428
  • list.highlightForeground#5C3A1F
  • list.hoverBackground#F4EFDA
  • list.inactiveSelectionBackground#F0EAD0
  • list.inactiveSelectionForeground#3A4148
  • menu.background#F4EED8
  • menu.border#DDD4B2
  • menu.foreground#1F2428
  • menu.selectionBackground#E8E2C6
  • menu.selectionForeground#1F2428
  • menu.separatorBackground#DDD4B2
  • menubar.selectionBackground#C8C0A040
  • menubar.selectionForeground#1F2428
  • notificationLink.foreground#5C3A1F
  • notifications.background#F0EAD0
  • notifications.border#DDD4B2
  • notifications.foreground#1F2428
  • panel.background#F0EAD0
  • panel.border#DDD4B2
  • panelTitle.activeBorder#5C3A1F
  • panelTitle.activeForeground#1F2428
  • panelTitle.inactiveForeground#6E6F62
  • peekView.border#5C3A1F
  • peekViewEditor.background#F4EED8
  • peekViewEditorGutter.background#F4EED8
  • peekViewResult.background#F0EAD0
  • peekViewResult.fileForeground#1F2428
  • peekViewResult.lineForeground#3A4148
  • peekViewResult.selectionBackground#E8E2C6
  • peekViewResult.selectionForeground#1F2428
  • peekViewTitle.background#E8E2C6
  • peekViewTitleDescription.foreground#6E6F62
  • peekViewTitleLabel.foreground#1F2428
  • progressBar.background#5C3A1F
  • quickInput.background#FCF6E6
  • quickInput.foreground#1F2428
  • quickInputList.focusBackground#E8E2C6
  • scrollbar.shadow#00000020
  • scrollbarSlider.activeBackground#3A414880
  • scrollbarSlider.background#A8A59360
  • scrollbarSlider.hoverBackground#6E6F6270
  • sideBar.background#F0EAD0
  • sideBar.border#DDD4B2
  • sideBar.foreground#3A4148
  • sideBarActivityBarTop.border#DDD4B2
  • sideBarSectionHeader.background#E8E2C6
  • sideBarSectionHeader.border#DDD4B2
  • sideBarSectionHeader.foreground#3A4148
  • sideBarTitle.foreground#1F2428
  • statusBar.background#2E3640
  • statusBar.border#2E3640
  • statusBar.foreground#F4EED8
  • statusBar.noFolderBackground#2E3640
  • statusBarItem.hoverBackground#FFFFFF15
  • statusBarItem.remoteBackground#2E3640
  • statusBarItem.remoteForeground#F4EED8
  • symbolIcon.classForeground#2C6E8C
  • symbolIcon.constantForeground#7A5418
  • symbolIcon.functionForeground#157E6A
  • symbolIcon.keywordForeground#2C5E64
  • symbolIcon.numberForeground#7A5418
  • symbolIcon.propertyForeground#1F2428
  • symbolIcon.stringForeground#1E7A52
  • symbolIcon.variableForeground#1F2428
  • tab.activeBackground#FCF6E6
  • tab.activeBorderTop#5C3A1F
  • tab.activeForeground#1F2428
  • tab.border#DDD4B2
  • tab.inactiveBackground#F0EAD0
  • tab.inactiveForeground#6E6F62
  • tab.unfocusedActiveBackground#FCF6E6
  • tab.unfocusedActiveForeground#3A4148
  • terminal.ansiBlack#1F2428
  • terminal.ansiBlue#2A4A66
  • terminal.ansiBrightBlack#5C5D50
  • terminal.ansiBrightBlue#3A5A78
  • terminal.ansiBrightCyan#2A5E68
  • terminal.ansiBrightGreen#4A6B34
  • terminal.ansiBrightMagenta#A05040
  • terminal.ansiBrightRed#9A3E28
  • terminal.ansiBrightWhite#BFB89C
  • terminal.ansiBrightYellow#9A6E22
  • terminal.ansiCyan#1F4A52
  • terminal.ansiGreen#3A5A28
  • terminal.ansiMagenta#8A4030
  • terminal.ansiRed#7A2E1F
  • terminal.ansiWhite#8A8B7E
  • terminal.ansiYellow#7A5418
  • terminal.background#FCF6E6
  • terminal.foreground#1F2428
  • terminalCursor.foreground#1F2428
  • textBlockQuote.background#F4EFDA
  • textBlockQuote.border#DDD4B2
  • textCodeBlock.background#FCF6E6
  • textLink.activeForeground#157E6A
  • textLink.foreground#2C6E8C
  • textPreformat.background#1E7A521E
  • textPreformat.foreground#13161A
  • textSeparator.foreground#DDD4B2
  • titleBar.activeBackground#E8E2C6
  • titleBar.activeForeground#1F2428
  • titleBar.border#DDD4B2
  • titleBar.inactiveBackground#F0EAD0
  • titleBar.inactiveForeground#6E6F62
  • tree.indentGuidesStroke#EBE4C8
  • widget.shadow#00000025

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6E695Aitalic
keyword, keyword.control, keyword.operator.new, keyword.operator.delete, keyword.operator.typeof, keyword.operator.void, storage.modifier#2C5E64bold
storage.type#2C5E64—
string, string.quoted, string.template#1E7A52—
constant.character.escape, string.regexp#1E7A52—
punctuation.definition.template-expression, punctuation.section.embedded#1E7A52—
constant.numeric, constant.language.numeric#7A5418—
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#7A5418italic
constant.other#7A5418—
entity.name.function, meta.function-call entity.name.function, support.function, meta.require#157E6A—
meta.decorator, punctuation.decorator, entity.name.function.decorator#157E6Aitalic
entity.name.type, entity.name.class, support.class, entity.other.inherited-class#2C6E8C—
entity.name.type.interface#2C6E8Citalic
meta.type.annotation, support.type, entity.name.type.alias#6A4A16—
variable, variable.other, variable.other.readwrite#13161A—
variable.parameter#4A4030italic
variable.other.property, support.variable.property, meta.object-literal.key#1E222A—
variable.language.self, variable.language.this, variable.language.super#4A38A0italic
entity.name.module, entity.name.namespace, variable.other.module#6A4A16—
keyword.operator, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.logical, keyword.operator.assignment#5E5C50—
punctuation, meta.brace, punctuation.separator, punctuation.terminator#6D6A5D—
entity.name.tag, meta.tag#2C6E8C—
entity.other.attribute-name, meta.tag.attributes#6A4A16—
support.type.property-name.css, entity.name.tag.css, support.constant.property-value.css#157E6A—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#2C6E8C—
constant.numeric.css, keyword.other.unit.css#7A5418—
markup.heading, entity.name.section.markdown#2C5E64bold
markup.bold#13161Abold
markup.italic#3A4148italic
markup.underline.link, string.other.link#2C6E8C—
markup.inline.raw, markup.fenced_code.block#6A4A16—
markup.quote#6E695Aitalic
variable.parameter.function.language.python#4A38A0italic
support.function.builtin.python#157E6A—
support.type.property-name.json#157E6A—
entity.name.tag.yaml#157E6A—
invalid, invalid.illegal#7A2E1Funderline
invalid.deprecated#8A5818strikethrough
keyword.control.transition.mermaid, keyword.control.line.mermaid#6A685C—
Papyrus Inkwright by Saadman Sakib - VS Code Theme