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#E0D8C4
  • activityBar.border#C8C0A8
  • activityBar.foreground#B84818
  • activityBar.inactiveForeground#907860
  • activityBarBadge.background#B84818
  • activityBarBadge.foreground#FDF6E3
  • badge.background#B84818
  • badge.foreground#FDF6E3
  • breadcrumb.activeSelectionForeground#B84818
  • breadcrumb.focusForeground#B84818
  • button.background#B84818
  • button.foreground#FDF6E3
  • button.hoverBackground#8C3010
  • dropdown.background#EEE8D5
  • dropdown.foreground#4A3828
  • editor.background#FDF6E3
  • editor.findMatchBackground#D0602850
  • editor.findMatchHighlightBackground#D0602830
  • editor.foreground#4A3828
  • editor.inactiveSelectionBackground#E8D8C080
  • editor.lineHighlightBackground#F5ECDA
  • editor.lineHighlightBorder#EBE0CC
  • editor.selectionBackground#D0602835
  • editor.selectionHighlightBackground#D0602818
  • editor.wordHighlightBackground#B8481818
  • editorBracketMatch.background#D0602830
  • editorBracketMatch.border#B84818
  • editorCursor.foreground#B84818
  • editorGroupHeader.tabsBackground#EEE8D5
  • editorGutter.addedBackground#5A7A20
  • editorGutter.deletedBackground#782010
  • editorGutter.modifiedBackground#A06010
  • editorIndentGuide.activeBackground1#A0601080
  • editorIndentGuide.background1#DDD5C0
  • editorLineNumber.activeForeground#B84818
  • editorLineNumber.foreground#B0A898
  • editorWidget.background#EEE8D5
  • editorWidget.border#CCC4B0
  • focusBorder#B8481880
  • foreground#4A3828
  • gitDecoration.addedResourceForeground#5A7A20
  • gitDecoration.deletedResourceForeground#782010
  • gitDecoration.modifiedResourceForeground#A06010
  • gitDecoration.untrackedResourceForeground#1A8878
  • input.background#FDF6E3
  • input.border#CCC4B0
  • input.foreground#4A3828
  • input.placeholderForeground#A09080
  • inputOption.activeBackground#D0602835
  • inputOption.activeBorder#B84818
  • list.activeSelectionBackground#D0602835
  • list.activeSelectionForeground#B84818
  • list.highlightForeground#B84818
  • list.hoverBackground#EEE8D5
  • list.inactiveSelectionBackground#E8DEC8
  • minimap.background#F5EFDB
  • minimap.selectionHighlight#D0602850
  • panel.background#E8DEC8
  • panel.border#CCC4B0
  • panelTitle.activeBorder#B84818
  • panelTitle.activeForeground#B84818
  • peekView.border#B84818
  • peekViewEditor.background#FDF6E3
  • peekViewEditor.matchHighlightBackground#D0602840
  • peekViewResult.background#EEE8D5
  • peekViewResult.fileForeground#B84818
  • peekViewTitle.background#E0D8C4
  • peekViewTitleLabel.foreground#B84818
  • pickerGroup.foreground#B84818
  • progressBar.background#B84818
  • quickInput.background#EEE8D5
  • quickInput.foreground#4A3828
  • scrollbarSlider.activeBackground#B8481880
  • scrollbarSlider.background#A0601040
  • scrollbarSlider.hoverBackground#B8481860
  • settings.headerForeground#B84818
  • sideBar.background#F5EFDB
  • sideBar.border#CCC4B0
  • sideBar.foreground#4A3828
  • sideBarSectionHeader.background#EEE8D5
  • sideBarSectionHeader.foreground#4A3828
  • sideBarTitle.foreground#B84818
  • statusBar.background#B84818
  • statusBar.border#8C3010
  • statusBar.debuggingBackground#782010
  • statusBar.foreground#FDF6E3
  • statusBar.noFolderBackground#A06010
  • tab.activeBackground#FDF6E3
  • tab.activeBorder#B84818
  • tab.activeForeground#B84818
  • tab.border#CCC4B0
  • tab.inactiveBackground#EEE8D5
  • tab.inactiveForeground#907860
  • terminal.ansiBlack#1C1814
  • terminal.ansiBlue#1A6EA8
  • terminal.ansiBrightBlack#686050
  • terminal.ansiBrightBlue#1A6EA8
  • terminal.ansiBrightCyan#1A8878
  • terminal.ansiBrightGreen#5A7A20
  • terminal.ansiBrightMagenta#6050A0
  • terminal.ansiBrightRed#B84818
  • terminal.ansiBrightWhite#FDF6E3
  • terminal.ansiBrightYellow#C07818
  • terminal.ansiCyan#1A8878
  • terminal.ansiGreen#5A7A20
  • terminal.ansiMagenta#882060
  • terminal.ansiRed#782010
  • terminal.ansiWhite#EEE8D5
  • terminal.ansiYellow#A06010
  • terminal.background#E8DBBC
  • terminal.foreground#4A3828
  • terminalCursor.foreground#B84818
  • textLink.activeForeground#8C3010
  • textLink.foreground#B84818
  • titleBar.activeBackground#E0D8C4
  • titleBar.activeForeground#4A3828
  • titleBar.inactiveBackground#EEE8D5
  • titleBar.inactiveForeground#907860

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#907860italic
string, constant.other.symbol#1A8878—
constant.character.escape, string.regexp#A06010—
constant.numeric#782010—
constant.language#B84818bold
keyword, keyword.control, storage.type.function.arrow#B84818bold
storage, storage.type#B84818—
storage.modifier#8C3010italic
keyword.control.import, keyword.control.export, keyword.control.from#A06010bold
keyword.operator, punctuation.accessor#686050—
entity.name.function, support.function#A06010—
variable.parameter#905838italic
entity.name.class, entity.name.type, entity.name.interface, support.class#8C3010bold
variable, variable.other#4A3828—
variable.language.this, variable.language.self#B84818italic
entity.name.tag#B84818—
entity.other.attribute-name#A06010italic
support.type.property-name, support.type.property-name.json#A06010—
markup.heading, punctuation.definition.heading.markdown#B84818bold
markup.bold, punctuation.definition.bold.markdown#8C3010bold
markup.italic, punctuation.definition.italic.markdown#905838italic
markup.underline.link, string.other.link, meta.link.inline.markdown#1A6EA8—
markup.inline.raw, markup.raw.block, fenced_code.block.language.markdown#1A8878—
markup.quote, punctuation.definition.quote.begin.markdown#5A7A20italic
markup.list, punctuation.definition.list.begin.markdown#A06010—
markup.inserted#5A7A20—
markup.deleted#782010—
markup.changed#A06010—

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

Maple Leaves - Coding Theme