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#11100E
  • activityBar.border#241E18
  • activityBar.foreground#C4703A
  • activityBar.inactiveForeground#575049
  • activityBarBadge.background#C4703A
  • activityBarBadge.foreground#11100E
  • badge.background#C4703A
  • badge.foreground#11100E
  • breadcrumb.activeSelectionForeground#C4703A
  • breadcrumb.focusForeground#C4703A
  • breadcrumb.foreground#575049
  • button.background#C4703A
  • button.foreground#11100E
  • button.hoverBackground#A85C2A
  • diffEditor.insertedTextBackground#6A884020
  • diffEditor.removedTextBackground#8C3A2020
  • dropdown.background#201C18
  • dropdown.border#302A24
  • dropdown.foreground#C9BDA7
  • editor.background#171512
  • editor.findMatchBackground#C4703A50
  • editor.findMatchHighlightBackground#C4703A30
  • editor.foreground#C9BDA7
  • editor.inactiveSelectionBackground#C4703A20
  • editor.lineHighlightBackground#201C18
  • editor.lineHighlightBorder#2B252080
  • editor.selectionBackground#C4703A35
  • editor.selectionHighlightBackground#C4703A18
  • editor.wordHighlightBackground#C4703A20
  • editor.wordHighlightStrongBackground#C4703A35
  • editorBracketMatch.background#C4703A25
  • editorBracketMatch.border#C4703A
  • editorCodeLens.foreground#575049
  • editorCursor.foreground#C4703A
  • editorGroupHeader.tabsBackground#11100E
  • editorGroupHeader.tabsBorder#241E18
  • editorGutter.addedBackground#6A8840
  • editorGutter.deletedBackground#8C3A20
  • editorGutter.modifiedBackground#B87A2A
  • editorHoverWidget.background#201C18
  • editorHoverWidget.border#302A24
  • editorIndentGuide.activeBackground1#B87A2A60
  • editorIndentGuide.background1#302A24
  • editorLineNumber.activeForeground#C4703A
  • editorLineNumber.foreground#464039
  • editorRuler.foreground#302A24
  • editorSuggestWidget.background#201C18
  • editorSuggestWidget.border#302A24
  • editorSuggestWidget.foreground#C9BDA7
  • editorSuggestWidget.highlightForeground#C4703A
  • editorSuggestWidget.selectedBackground#C4703A25
  • editorWhitespace.foreground#302A24
  • editorWidget.background#201C18
  • editorWidget.border#302A24
  • editorWidget.foreground#C9BDA7
  • focusBorder#C4703A80
  • foreground#C9BDA7
  • gitDecoration.addedResourceForeground#6A8840
  • gitDecoration.deletedResourceForeground#8C3A20
  • gitDecoration.ignoredResourceForeground#464039
  • gitDecoration.modifiedResourceForeground#B87A2A
  • gitDecoration.untrackedResourceForeground#5A9A8C
  • input.background#171512
  • input.border#302A24
  • input.foreground#C9BDA7
  • input.placeholderForeground#575049
  • inputOption.activeBackground#C4703A30
  • inputOption.activeBorder#C4703A
  • inputOption.activeForeground#C4703A
  • list.activeSelectionBackground#C4703A30
  • list.activeSelectionForeground#C4703A
  • list.focusBackground#C4703A25
  • list.focusOutline#C4703A50
  • list.highlightForeground#C4703A
  • list.hoverBackground#241E18
  • list.hoverForeground#C9BDA7
  • list.inactiveSelectionBackground#201C18
  • list.inactiveSelectionForeground#A89A84
  • minimap.background#11100E
  • minimap.findMatchHighlight#C4703A80
  • minimap.selectionHighlight#C4703A50
  • panel.background#0E0D0B
  • panel.border#241E18
  • panelTitle.activeBorder#C4703A
  • panelTitle.activeForeground#C4703A
  • panelTitle.inactiveForeground#575049
  • peekView.border#C4703A
  • peekViewEditor.background#171512
  • peekViewEditor.matchHighlightBackground#C4703A40
  • peekViewResult.background#201C18
  • peekViewResult.fileForeground#C4703A
  • peekViewResult.lineForeground#C9BDA7
  • peekViewTitle.background#11100E
  • peekViewTitleLabel.foreground#C4703A
  • pickerGroup.border#302A24
  • pickerGroup.foreground#C4703A
  • progressBar.background#C4703A
  • quickInput.background#201C18
  • quickInput.foreground#C9BDA7
  • scrollbar.shadow#00000040
  • scrollbarSlider.activeBackground#C4703A70
  • scrollbarSlider.background#B87A2A30
  • scrollbarSlider.hoverBackground#C4703A50
  • selection.background#C4703A35
  • settings.headerForeground#C4703A
  • settings.modifiedItemIndicator#B87A2A
  • sideBar.background#11100E
  • sideBar.border#241E18
  • sideBar.foreground#A89A84
  • sideBarSectionHeader.background#171512
  • sideBarSectionHeader.border#241E18
  • sideBarSectionHeader.foreground#A89A84
  • sideBarTitle.foreground#C4703A
  • statusBar.background#C4703A
  • statusBar.border#A85C2A
  • statusBar.debuggingBackground#8C3A20
  • statusBar.debuggingForeground#C9BDA7
  • statusBar.foreground#11100E
  • statusBar.noFolderBackground#B87A2A
  • statusBarItem.hoverBackground#A85C2A80
  • tab.activeBackground#171512
  • tab.activeBorder#C4703A
  • tab.activeForeground#C4703A
  • tab.border#241E18
  • tab.hoverBackground#241E18
  • tab.inactiveBackground#11100E
  • tab.inactiveForeground#575049
  • terminal.ansiBlack#11100E
  • terminal.ansiBlue#5A88B0
  • terminal.ansiBrightBlack#575049
  • terminal.ansiBrightBlue#5A88B0
  • terminal.ansiBrightCyan#5A9A8C
  • terminal.ansiBrightGreen#6A8840
  • terminal.ansiBrightMagenta#7870A4
  • terminal.ansiBrightRed#C4703A
  • terminal.ansiBrightWhite#C9BDA7
  • terminal.ansiBrightYellow#D4925A
  • terminal.ansiCyan#5A9A8C
  • terminal.ansiGreen#6A8840
  • terminal.ansiMagenta#8870A4
  • terminal.ansiRed#8C3A20
  • terminal.ansiWhite#A89A84
  • terminal.ansiYellow#B87A2A
  • terminal.background#0E0D0B
  • terminal.foreground#C9BDA7
  • terminalCursor.foreground#C4703A
  • textBlockQuote.background#201C18
  • textBlockQuote.border#C4703A
  • textCodeBlock.background#201C18
  • textLink.activeForeground#A85C2A
  • textLink.foreground#C4703A
  • titleBar.activeBackground#11100E
  • titleBar.activeForeground#A89A84
  • titleBar.border#241E18
  • titleBar.inactiveBackground#0E0D0B
  • titleBar.inactiveForeground#575049
  • widget.shadow#00000060

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#575049italic
string, constant.other.symbol#5A9A8C
constant.character.escape, string.regexp#B87A2A
constant.numeric#8C3A20
constant.language#C4703Abold
keyword, keyword.control, storage.type.function.arrow#C4703Abold
storage, storage.type#C4703A
storage.modifier#A85C2Aitalic
keyword.control.import, keyword.control.export, keyword.control.from#B87A2Abold
keyword.operator, punctuation.accessor#817463
entity.name.function, support.function#B87A2A
variable.parameter#A06040italic
entity.name.class, entity.name.type, entity.name.interface, support.class#A85C2Abold
variable, variable.other#A89A84
variable.language.this, variable.language.self#C4703Aitalic
entity.name.tag#C4703A
entity.other.attribute-name#B87A2Aitalic
support.type.property-name, support.type.property-name.json#B87A2A
markup.heading, punctuation.definition.heading.markdown#C4703Abold
markup.bold, punctuation.definition.bold.markdown#A85C2Abold
markup.italic, punctuation.definition.italic.markdown#A06040italic
markup.underline.link, string.other.link, meta.link.inline.markdown#5A88B0
markup.inline.raw, markup.raw.block, fenced_code.block.language.markdown#5A9A8C
markup.quote, punctuation.definition.quote.begin.markdown#6A8840italic
markup.list, punctuation.definition.list.begin.markdown#B87A2A
markup.inserted#6A8840
markup.deleted#8C3A20
markup.changed#B87A2A
Maple Leaves by 0melette - VS Code Theme