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.activeBackground#ebe6e2
  • activityBar.activeBorder#84661b
  • activityBar.background#d9d3cc
  • activityBar.border#00000000
  • activityBar.foreground#84661b
  • activityBar.inactiveForeground#a39984
  • activityBarBadge.background#b8a888
  • activityBarBadge.foreground#686e7a
  • badge.background#b8a888
  • badge.foreground#686e7a
  • breadcrumb.background#efecea
  • breadcrumb.focusForeground#686e7a
  • breadcrumb.foreground#a39984
  • breadcrumbPicker.background#efecea
  • button.background#7a6a45
  • button.foreground#efecea
  • button.hoverBackground#8b7a52
  • chat.linesAddedForeground#2e8f53c5
  • chat.linesRemovedForeground#a04545c7
  • diffEditor.insertedTextBackground#2e8f5330
  • diffEditor.removedTextBackground#a0454530
  • dropdown.background#efecea
  • dropdown.border#00000000
  • dropdown.foreground#686e7a
  • dropdown.listBackground#ebe6e2
  • editor.background#efecea
  • editor.findMatchBackground#7a6a4544
  • editor.findMatchHighlightBackground#7a6a4522
  • editor.foldBackground#7a6a4510
  • editor.foreground#686e7a
  • editor.lineHighlightBackground#ebe6e2
  • editor.selectionBackground#7a6a4540
  • editor.selectionHighlightBackground#7a6a4522
  • editor.wordHighlightBackground#7a6a4522
  • editor.wordHighlightStrongBackground#7a6a4533
  • editorBracketHighlight.foreground1#a0aabb
  • editorBracketHighlight.foreground2#ac8c71
  • editorBracketHighlight.foreground3#a89878
  • editorBracketHighlight.foreground4#a0aabb
  • editorBracketHighlight.foreground5#ac8c71
  • editorBracketHighlight.foreground6#a89878
  • editorBracketHighlight.unexpectedBracket.foreground#a04545
  • editorBracketMatch.background#7a6a4540
  • editorBracketMatch.border#7a6a45
  • editorCursor.foreground#84661b
  • editorError.foreground#a04545
  • editorGroup.border#00000000
  • editorGroupHeader.tabsBackground#ebe6e2
  • editorGroupHeader.tabsBorder#00000000
  • editorGutter.addedBackground#2e8f53
  • editorGutter.commentRangeForeground#a39984
  • editorGutter.deletedBackground#a04545
  • editorGutter.foldingControlForeground#a39984
  • editorGutter.modifiedBackground#7a6a45
  • editorHint.foreground#2e8f53
  • editorHoverWidget.background#ebe6e2
  • editorHoverWidget.border#7a6a4540
  • editorIndentGuide.activeBackground1#a8987860
  • editorIndentGuide.background1#a8987820
  • editorInfo.foreground#7a6a45
  • editorInlayHint.background#ebe6e2
  • editorInlayHint.foreground#a0aabb
  • editorLineNumber.activeForeground#84661b
  • editorLineNumber.foreground#a39984
  • editorOverviewRuler.bracketMatchForeground#a89878
  • editorStickyScroll.background#ebe6e2
  • editorStickyScroll.border#a8987840
  • editorStickyScroll.shadow#00000000
  • editorStickyScrollHover.background#ebe6e2
  • editorSuggestWidget.background#ebe6e2
  • editorSuggestWidget.border#7a6a4540
  • editorWarning.foreground#84661b
  • editorWhitespace.foreground#a8987820
  • editorWidget.background#ebe6e2
  • editorWidget.border#00000000
  • focusBorder#c4b89c
  • foreground#686e7a
  • gitDecoration.addedResourceForeground#2e8f53
  • gitDecoration.conflictingResourceForeground#84661b
  • gitDecoration.deletedResourceForeground#a04545
  • gitDecoration.ignoredResourceForeground#a3998475
  • gitDecoration.modifiedResourceForeground#7a6a45
  • gitDecoration.submoduleResourceForeground#a39984
  • gitDecoration.untrackedResourceForeground#2e8a80
  • input.background#c1c9d1
  • input.border#00000000
  • input.foreground#686e7a
  • input.placeholderForeground#a39984
  • list.activeSelectionBackground#dcd0b8
  • list.activeSelectionForeground#84661b
  • list.focusBackground#ebe6e2
  • list.highlightForeground#7a6a45
  • list.hoverBackground#ebe6e2
  • list.hoverForeground#686e7a
  • list.inactiveSelectionBackground#dcd0b880
  • list.inactiveSelectionForeground#686e7a
  • menu.background#efecea
  • menu.foreground#686e7a
  • menu.separatorBackground#00000000
  • notifications.background#efecea
  • notifications.border#00000000
  • notifications.foreground#686e7a
  • notificationsErrorIcon.foreground#a04545
  • notificationsInfoIcon.foreground#7a6a45
  • notificationsWarningIcon.foreground#84661b
  • panel.background#efecea
  • panel.border#c4b89c
  • panelTitle.activeBorder#7a6a45
  • panelTitle.activeForeground#84661b
  • panelTitle.inactiveForeground#a89878
  • pickerGroup.border#00000000
  • pickerGroup.foreground#686e7a
  • problemsErrorIcon.foreground#a04545
  • problemsInfoIcon.foreground#7a6a45
  • problemsWarningIcon.foreground#84661b
  • progressBar.background#7a6a45
  • quickInput.background#ebe6e2
  • quickInput.foreground#84661b
  • quickInputList.focusBackground#c4b89c
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#a89878
  • scrollbarSlider.background#a8987840
  • scrollbarSlider.hoverBackground#a8987880
  • sideBar.background#ebe6e2
  • sideBar.border#00000000
  • sideBar.foreground#84661b
  • sideBarSectionHeader.background#efecea
  • sideBarSectionHeader.border#00000000
  • sideBarSectionHeader.foreground#686e7a
  • sideBarTitle.foreground#a39984
  • statusBar.background#d9d3cc
  • statusBar.border#00000000
  • statusBar.debuggingBackground#d9d3cc
  • statusBar.debuggingForeground#84661b
  • statusBar.foreground#84661b
  • statusBar.noFolderBackground#d9d3cc
  • tab.activeBackground#efecea
  • tab.activeBorderTop#7a6a45
  • tab.activeForeground#686e7a
  • tab.border#7a6a4540
  • tab.hoverBackground#ebe6e2
  • tab.inactiveBackground#efecea
  • tab.inactiveForeground#a39984
  • terminal.ansiBlack#d9d3cc
  • terminal.ansiBlue#36568a
  • terminal.ansiBrightBlack#888376
  • terminal.ansiBrightBlue#2c4670
  • terminal.ansiBrightCyan#1a5b54
  • terminal.ansiBrightGreen#1a6b3a
  • terminal.ansiBrightMagenta#5e3a8a
  • terminal.ansiBrightRed#b06548
  • terminal.ansiBrightWhite#383a3d
  • terminal.ansiBrightYellow#6e5a2a
  • terminal.ansiCyan#2c7a72
  • terminal.ansiGreen#2c7a4a
  • terminal.ansiMagenta#8a3a6a
  • terminal.ansiRed#8a3535
  • terminal.ansiWhite#686e7a
  • terminal.ansiYellow#8a6f30
  • terminal.foreground#686e7a
  • terminalCommandGuide.foreground#7a6a45
  • terminalStickyScroll.background#ebe6e2
  • terminalStickyScroll.border#ebe6e2
  • terminalStickyScrollHover.background#ebe6e2
  • textLink.activeForeground#84661b
  • textLink.foreground#7a6a45
  • titleBar.activeBackground#d9d3cc
  • titleBar.activeForeground#84661b
  • titleBar.border#00000000
  • titleBar.inactiveBackground#d9d3cc
  • titleBar.inactiveForeground#a39984
  • tree.indentGuidesStroke#a8987840

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#a0aabbitalic
punctuation, punctuation.definition.tag, punctuation.definition.typeparameters, meta.brace, delimiter#a0aabb
keyword, storage, storage.type, storage.modifier#ba7f27
keyword.operator, keyword.operator.assignment, keyword.operator.relational, keyword.operator.type#686e7a
string, constant.other.symbol, attribute.value#87a897
punctuation.definition.string#87a89777
constant.numeric, constant.language, constant.character, constant.character.escape, number#b35c46
constant.language.boolean#b35c46
entity.name.function, support.function, meta.function-call, variable.function#6d9331
entity.name.type, entity.name.class, support.type, support.class, support.class.component, type.identifier#ad592f96
variable, identifier, variable.parameter#686e7a
variable.other.readwrite.alias, variable.other.enummember, constant, entity.name.constant, variable.language#b35c46
entity.name.tag, tag.html#ba7f27
entity.other.attribute-name, support.type.property-name, meta.object-literal.key, meta.property-name, entity.name.tag.yaml, entity.name.tag.toml, support.type.property-name.toml, attribute.name, property#b5a78e
source.regexp, string.regexp#2e8a80
invalid, invalid.illegal#a04545
invalid.deprecated#a04545italic
markup.heading, markup.heading entity.name#7a6a45bold
markup.italic#686e7aitalic
markup.bold#686e7abold
markup.quote#ad592f96
markup.raw#7a6a45
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#a04545
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#2e8f53
markup.changed, punctuation.definition.changed#84661b
markup.underline.link.markdown, markup.underline.link.image.markdown#a39984underline