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.activeBorder#e4a97e
  • activityBar.background#15100c
  • activityBar.border#413b37
  • activityBar.foreground#e4a97e
  • activityBar.inactiveForeground#796f67
  • activityBarBadge.background#e4a97e
  • activityBarBadge.foreground#1d1611
  • badge.background#e4a97e
  • badge.foreground#1d1611
  • breadcrumb.activeSelectionForeground#e4a97e
  • breadcrumb.focusForeground#e0dbd6
  • breadcrumb.foreground#796f67
  • button.background#e4a97e
  • button.foreground#1d1611
  • button.hoverBackground#e8b590
  • descriptionForeground#a89d94
  • dropdown.background#2f2924
  • dropdown.border#413b37
  • dropdown.foreground#e0dbd6
  • editor.background#1d1611
  • editor.findMatchBackground#e4a97e73
  • editor.findMatchHighlightBackground#e4a97e38
  • editor.foreground#e0dbd6
  • editor.lineHighlightBackground#38322e66
  • editor.selectionBackground#e4a97e52
  • editor.selectionHighlightBackground#e4a97e29
  • editor.wordHighlightBackground#e4a97e29
  • editor.wordHighlightStrongBackground#e4a97e3d
  • editorBracketMatch.background#e4a97e29
  • editorBracketMatch.border#e4a97e99
  • editorCursor.foreground#e4a97e
  • editorError.foreground#f38ba8
  • editorGroup.border#413b37
  • editorGroupHeader.tabsBackground#1a130f
  • editorGroupHeader.tabsBorder#413b37
  • editorGutter.addedBackground#a6e3a1
  • editorGutter.deletedBackground#f38ba8
  • editorGutter.modifiedBackground#c4b974
  • editorHoverWidget.background#2f2924
  • editorHoverWidget.border#413b37
  • editorIndentGuide.activeBackground1#e4a97e99
  • editorIndentGuide.background1#413b37
  • editorInfo.foreground#e4a97e
  • editorLineNumber.activeForeground#e4a97e
  • editorLineNumber.foreground#796f67
  • editorSuggestWidget.background#2f2924
  • editorSuggestWidget.selectedBackground#e4a97e3d
  • editorWarning.foreground#f9e2af
  • editorWhitespace.foreground#796f67
  • editorWidget.background#2f2924
  • editorWidget.border#413b37
  • errorForeground#f38ba8
  • focusBorder#e4a97e80
  • foreground#a89d94
  • gitDecoration.deletedResourceForeground#f38ba8
  • gitDecoration.modifiedResourceForeground#c4b974
  • gitDecoration.untrackedResourceForeground#a6e3a1
  • input.background#2f2924
  • input.border#413b37
  • input.foreground#e0dbd6
  • input.placeholderForeground#796f67
  • inputOption.activeBackground#e4a97e3d
  • inputOption.activeBorder#e4a97e
  • list.activeSelectionBackground#e4a97e47
  • list.activeSelectionForeground#e0dbd6
  • list.focusBackground#e4a97e47
  • list.highlightForeground#e4a97e
  • list.hoverBackground#3d373280
  • list.inactiveSelectionBackground#e4a97e29
  • minimap.selectionHighlight#e4a97e80
  • panel.background#1a130f
  • panel.border#413b37
  • panelTitle.activeBorder#e4a97e
  • panelTitle.activeForeground#e0dbd6
  • panelTitle.inactiveForeground#796f67
  • peekViewEditor.background#1d1611
  • peekViewResult.background#1a130f
  • progressBar.background#e4a97e
  • quickInput.background#2f2924
  • quickInput.foreground#e0dbd6
  • quickInputList.focusBackground#e4a97e3d
  • scrollbarSlider.activeBackground#e4a97e8c
  • scrollbarSlider.background#e4a97e38
  • scrollbarSlider.hoverBackground#e4a97e61
  • selection.background#e4a97e57
  • sideBar.background#1a130f
  • sideBar.border#413b37
  • sideBar.foreground#a89d94
  • sideBarSectionHeader.background#1a130f
  • sideBarSectionHeader.foreground#e0dbd6
  • sideBarTitle.foreground#e0dbd6
  • statusBar.background#15100c
  • statusBar.border#413b37
  • statusBar.debuggingBackground#e4a97e
  • statusBar.debuggingForeground#1d1611
  • statusBar.foreground#a89d94
  • statusBar.noFolderBackground#15100c
  • statusBarItem.remoteBackground#e4a97e
  • statusBarItem.remoteForeground#1d1611
  • tab.activeBackground#1d1611
  • tab.activeBorder#e4a97eb3
  • tab.activeBorderTop#e4a97e
  • tab.activeForeground#e0dbd6
  • tab.border#15100c
  • tab.inactiveBackground#1a130f
  • tab.inactiveForeground#796f67
  • terminal.background#1d1611
  • terminal.foreground#e0dbd6
  • terminalCursor.foreground#e4a97e
  • textLink.activeForeground#e8b793
  • textLink.foreground#e4a97e
  • titleBar.activeBackground#15100c
  • titleBar.activeForeground#e0dbd6
  • titleBar.border#413b37
  • titleBar.inactiveBackground#15100c
  • titleBar.inactiveForeground#796f67
  • widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#796f67italic
string, string.quoted, string.template#74cbb5
constant.numeric, constant.language, constant.character, constant.other#7ec0ea
keyword, storage, storage.type, storage.modifier, keyword.control, keyword.operator.new#e4a97e
keyword.operator, punctuation, meta.brace#a89d94
entity.name.function, support.function, meta.function-call.generic#beabea
entity.name.type, entity.name.class, support.type, support.class, entity.other.inherited-class#eba0a6
variable, variable.other, meta.definition.variable.name#e0dbd6
variable.parameter, variable.other.readwrite#e0dbd6
variable.language, variable.other.constant, support.variable#7ec0ea
entity.name.tag, punctuation.definition.tag#e4a97e
entity.other.attribute-name, meta.object-literal.key, support.type.property-name#c4b974
markup.heading, entity.name.section#e4a97ebold
markup.bold#7ec0eabold
markup.italic#74cbb5italic
markup.inline.raw, markup.fenced_code#beabea
markup.inserted#a6e3a1
markup.deleted#f38ba8
invalid, invalid.illegal#f38ba8