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#f3a173
  • activityBar.background#150f0c
  • activityBar.border#413a37
  • activityBar.foreground#f3a173
  • activityBar.inactiveForeground#796e67
  • activityBarBadge.background#f3a173
  • activityBarBadge.foreground#1d1511
  • badge.background#f3a173
  • badge.foreground#1d1511
  • breadcrumb.activeSelectionForeground#f3a173
  • breadcrumb.focusForeground#e0dad6
  • breadcrumb.foreground#796e67
  • button.background#f3a173
  • button.foreground#1d1511
  • button.hoverBackground#f5ae87
  • descriptionForeground#a89b94
  • dropdown.background#2f2824
  • dropdown.border#413a37
  • dropdown.foreground#e0dad6
  • editor.background#1d1511
  • editor.findMatchBackground#f3a17373
  • editor.findMatchHighlightBackground#f3a17338
  • editor.foreground#e0dad6
  • editor.lineHighlightBackground#38312e66
  • editor.selectionBackground#f3a17352
  • editor.selectionHighlightBackground#f3a17329
  • editor.wordHighlightBackground#f3a17329
  • editor.wordHighlightStrongBackground#f3a1733d
  • editorBracketMatch.background#f3a17329
  • editorBracketMatch.border#f3a17399
  • editorCursor.foreground#f3a173
  • editorError.foreground#f38ba8
  • editorGroup.border#413a37
  • editorGroupHeader.tabsBackground#1a120f
  • editorGroupHeader.tabsBorder#413a37
  • editorGutter.addedBackground#a6e3a1
  • editorGutter.deletedBackground#f38ba8
  • editorGutter.modifiedBackground#d1b65a
  • editorHoverWidget.background#2f2824
  • editorHoverWidget.border#413a37
  • editorIndentGuide.activeBackground1#f3a17399
  • editorIndentGuide.background1#413a37
  • editorInfo.foreground#f3a173
  • editorLineNumber.activeForeground#f3a173
  • editorLineNumber.foreground#796e67
  • editorSuggestWidget.background#2f2824
  • editorSuggestWidget.selectedBackground#f3a1733d
  • editorWarning.foreground#f9e2af
  • editorWhitespace.foreground#796e67
  • editorWidget.background#2f2824
  • editorWidget.border#413a37
  • errorForeground#f38ba8
  • focusBorder#f3a17380
  • foreground#a89b94
  • gitDecoration.deletedResourceForeground#f38ba8
  • gitDecoration.modifiedResourceForeground#d1b65a
  • gitDecoration.untrackedResourceForeground#a6e3a1
  • input.background#2f2824
  • input.border#413a37
  • input.foreground#e0dad6
  • input.placeholderForeground#796e67
  • inputOption.activeBackground#f3a1733d
  • inputOption.activeBorder#f3a173
  • list.activeSelectionBackground#f3a17347
  • list.activeSelectionForeground#e0dad6
  • list.focusBackground#f3a17347
  • list.highlightForeground#f3a173
  • list.hoverBackground#3d363280
  • list.inactiveSelectionBackground#f3a17329
  • minimap.selectionHighlight#f3a17380
  • panel.background#1a120f
  • panel.border#413a37
  • panelTitle.activeBorder#f3a173
  • panelTitle.activeForeground#e0dad6
  • panelTitle.inactiveForeground#796e67
  • peekViewEditor.background#1d1511
  • peekViewResult.background#1a120f
  • progressBar.background#f3a173
  • quickInput.background#2f2824
  • quickInput.foreground#e0dad6
  • quickInputList.focusBackground#f3a1733d
  • scrollbarSlider.activeBackground#f3a1738c
  • scrollbarSlider.background#f3a17338
  • scrollbarSlider.hoverBackground#f3a17361
  • selection.background#f3a17357
  • sideBar.background#1a120f
  • sideBar.border#413a37
  • sideBar.foreground#a89b94
  • sideBarSectionHeader.background#1a120f
  • sideBarSectionHeader.foreground#e0dad6
  • sideBarTitle.foreground#e0dad6
  • statusBar.background#150f0c
  • statusBar.border#413a37
  • statusBar.debuggingBackground#f3a173
  • statusBar.debuggingForeground#1d1511
  • statusBar.foreground#a89b94
  • statusBar.noFolderBackground#150f0c
  • statusBarItem.remoteBackground#f3a173
  • statusBarItem.remoteForeground#1d1511
  • tab.activeBackground#1d1511
  • tab.activeBorder#f3a173b3
  • tab.activeBorderTop#f3a173
  • tab.activeForeground#e0dad6
  • tab.border#150f0c
  • tab.inactiveBackground#1a120f
  • tab.inactiveForeground#796e67
  • terminal.background#1d1511
  • terminal.foreground#e0dad6
  • terminalCursor.foreground#f3a173
  • textLink.activeForeground#f5b089
  • textLink.foreground#f3a173
  • titleBar.activeBackground#150f0c
  • titleBar.activeForeground#e0dad6
  • titleBar.border#413a37
  • titleBar.inactiveBackground#150f0c
  • titleBar.inactiveForeground#796e67
  • widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#796e67italic
string, string.quoted, string.template#62cfaa
constant.numeric, constant.language, constant.character, constant.other#5ec5f3
keyword, storage, storage.type, storage.modifier, keyword.control, keyword.operator.new#f3a173
keyword.operator, punctuation, meta.brace#a89b94
entity.name.function, support.function, meta.function-call.generic#b7aafc
entity.name.type, entity.name.class, support.type, support.class, entity.other.inherited-class#f697ab
variable, variable.other, meta.definition.variable.name#e0dad6
variable.parameter, variable.other.readwrite#e0dad6
variable.language, variable.other.constant, support.variable#5ec5f3
entity.name.tag, punctuation.definition.tag#f3a173
entity.other.attribute-name, meta.object-literal.key, support.type.property-name#d1b65a
markup.heading, entity.name.section#f3a173bold
markup.bold#5ec5f3bold
markup.italic#62cfaaitalic
markup.inline.raw, markup.fenced_code#b7aafc
markup.inserted#a6e3a1
markup.deleted#f38ba8
invalid, invalid.illegal#f38ba8