Maple Theme
Publisher: subframe7536Themes in package: 2
A colorful editor theme, support light or dark mode, with medium brightness and low saturation.
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#d9dfd3
- activityBar.background#fafaf9
- activityBar.border#8393aa66
- activityBar.foreground#475569
- activityBarBadge.background#85987c
- activityBarBadge.foreground#fafaf9
- badge.background#85987c
- badge.foreground#fafaf9
- banner.background#d9dfd3
- banner.foreground#1d1d1d
- breadcrumb.background#fffffe
- breadcrumb.foreground#475569b3
- breadcrumbPicker.background#fffffe
- button.background#d9dfd3
- button.foreground#1d1d1d
- button.hoverBackground#d9dfd3e6
- button.secondaryBackground#85987c80
- button.secondaryForeground#1d1d1d
- button.secondaryHoverBackground#85987c99
- commandCenter.activeBackground#e1e7db
- commandCenter.activeBorder#94a3b8
- commandCenter.border#8393aa66
- commandCenter.foreground#475569
- debugToolBar.background#ffffff
- debugToolBar.border#8393aa66
- diffEditor.insertedLineBackground#478f1433
- diffEditor.insertedTextBackground#478f1466
- diffEditor.removedLineBackground#bd515133
- diffEditor.removedTextBackground#bd515166
- dropdown.background#fffffe
- dropdown.border#8393aa66
- dropdown.foreground#475569
- dropdown.listBackground#fffffe
- editor.background#fffffe
- editor.findMatchBackground#85987c4d
- editor.findMatchBorder#94a3b8
- editor.findMatchHighlightBackground#85987c33
- editor.findRangeHighlightBackground#d9dfd366
- editor.findRangeHighlightBorder#94a3b8cc
- editor.foreground#475569
- editor.hoverHighlightBackground#dee4d84d
- editor.inactiveSelectionBackground#dee4d880
- editor.lineHighlightBackground#dee4d840
- editor.lineHighlightBorder#dee4d84d
- editor.rangeHighlightBackground#d9dfd3e6
- editor.rangeHighlightBorder#94a3b8e6
- editor.selectionBackground#dee4d8e6
- editor.selectionHighlightBackground#dee4d866
- editor.selectionHighlightBorder#8393aa66
- editor.snippetTabstopHighlightBackground#dee4d899
- editor.snippetTabstopHighlightBorder#8393aa66
- editor.wordHighlightBackground#dee4d880
- editor.wordHighlightStrongBackground#dee4d880
- editor.wordHighlightTextBackground#dee4d880
- editorBracketHighlight.foreground1#71a3a8
- editorBracketHighlight.foreground2#ce637e
- editorBracketHighlight.foreground3#1da479
- editorBracketHighlight.foreground4#ed9f2a
- editorCursor.foreground#6e7e95
- editorError.foreground#bd5151
- editorGroupHeader.tabsBackground#fafaf9
- editorGroupHeader.tabsBorder#ffffff
- editorGutter.addedBackground#478f14e6
- editorGutter.addedSecondaryBackground#478f14b3
- editorGutter.deletedBackground#bd5151e6
- editorGutter.deletedSecondaryBackground#bd5151b3
- editorGutter.modifiedBackground#0585a8e6
- editorGutter.modifiedSecondaryBackground#0585a8b3
- editorHoverWidget.background#ffffff
- editorHoverWidget.statusBarBackground#ffffff
- editorIndentGuide.activeBackground1#475569cc
- editorIndentGuide.background1#47556940
- editorInfo.foreground#0585a8
- editorInlayHint.background#e2e8f0
- editorInlayHint.foreground#334155
- editorLineNumber.activeForeground#1d1d1d
- editorLineNumber.foreground#808080b3
- editorLink.activeForeground#85987c
- editorMultiCursor.secondary.foreground#6e7e95cc
- editorWarning.foreground#aa830e
- editorWidget.background#ffffff
- editorWidget.resizeBorder#d9dfd3
- focusBorder#94a3b8
- foreground#475569
- git.blame.editorDecorationForeground#808080e6
- gitDecoration.addedResourceForeground#478f14
- gitDecoration.conflictingResourceForeground#726293
- gitDecoration.deletedResourceForeground#bd5151
- gitDecoration.modifiedResourceForeground#aa830e
- gitDecoration.renamedResourceForeground#71a3a8
- gitDecoration.stageDeletedResourceForeground#bd5151e6
- gitDecoration.stageModifiedResourceForeground#c37522
- gitDecoration.submoduleResourceForeground#127d52
- gitDecoration.untrackedResourceForeground#0585a8
- input.background#fffffe
- input.border#8393aa66
- input.placeholderForeground#5f5f68
- inputOption.activeBackground#ffffff
- inputOption.activeBorder#94a3b8
- inputOption.activeForeground#475569
- keybindingLabel.background#e1e7dbb3
- keybindingLabel.border#94a3b8
- keybindingLabel.foreground#475569
- list.activeSelectionBackground#e1e7db
- list.activeSelectionForeground#475569
- list.dropBackground#ffffff
- list.filterMatchBackground#85987cb3
- list.filterMatchBorder#85987c
- list.focusAndSelectionOutline#94a3b8
- list.focusBackground#eef4e8
- list.focusForeground#475569
- list.focusHighlightForeground#85987c
- list.focusOutline#94a3b8cc
- list.highlightForeground#85987c
- list.hoverBackground#e9efe3
- list.inactiveFocusOutline#8393aa66
- list.inactiveSelectionBackground#f0f6ea
- menu.background#fafaf9
- menu.border#92a2b9
- menu.foreground#475569
- menu.selectionBackground#e1e7db
- menu.selectionBorder#94a3b8
- menu.separatorBackground#8d9db4
- menubar.selectionBackground#e1e7db
- minimap.background#ffffff
- minimap.errorHighlight#bd515199
- minimap.findMatchHighlight#85987ccc
- minimap.selectionHighlight#d9dfd380
- notifications.background#fafaf9
- peekView.border#8393aa66
- peekViewEditor.background#ffffff80
- peekViewEditor.matchHighlightBackground#85987c33
- peekViewEditor.matchHighlightBorder#85987c
- peekViewResult.background#ffffff
- peekViewResult.matchHighlightBackground#85987c33
- peekViewResult.selectionBackground#d9dfd333
- peekViewTitle.background#ffffff
- pickerGroup.foreground#85987c
- progressBar.background#d9dfd3
- quickInput.background#fafaf9
- quickInputList.focusBackground#e1e7db
- sash.hoverBorder#d9dfd3
- scrollbarSlider.activeBackground#85987c99
- scrollbarSlider.background#85987c4d
- scrollbarSlider.hoverBackground#85987c80
- selection.background#dee4d8
- sideBar.background#fafaf9
- sideBar.border#8393aa66
- sideBar.foreground#475569
- sideBarSectionHeader.background#fafaf9
- sideBarSectionHeader.border#8393aa66
- statusBar.background#fafaf9
- statusBar.border#8393aa66
- statusBar.debuggingBackground#85987c4d
- statusBar.debuggingBorder#8393aa66
- statusBar.debuggingForeground#475569
- statusBar.foreground#475569
- statusBar.noFolderBackground#fafaf9
- statusBar.noFolderBorder#8393aacc
- statusBar.noFolderForeground#475569
- statusBarItem.errorBackground#bd5151
- statusBarItem.errorForeground#fafaf9
- statusBarItem.errorHoverForeground#fffffe
- statusBarItem.offlineBackground#127d52
- statusBarItem.offlineForeground#fafaf9
- statusBarItem.offlineHoverForeground#fffffe
- statusBarItem.prominentBackground#85987c
- statusBarItem.prominentForeground#fafaf9
- statusBarItem.prominentHoverForeground#fffffe
- statusBarItem.remoteBackground#85987c
- statusBarItem.remoteForeground#fafaf9
- statusBarItem.remoteHoverForeground#fffffe
- statusBarItem.warningBackground#aa830e
- statusBarItem.warningForeground#fafaf9
- statusBarItem.warningHoverForeground#fffffe
- tab.activeBackground#ffffff
- tab.activeBorder#ffffff
- tab.activeBorderTop#d9dfd3
- tab.hoverBackground#ffffffb3
- tab.inactiveBackground#fafaf9
- tab.unfocusedActiveBackground#ffffff80
- terminal.ansiBlack#333333
- terminal.ansiBlue#057d9e
- terminal.ansiBrightBlack#666666
- terminal.ansiBrightBlue#057d9e
- terminal.ansiBrightCyan#127d52
- terminal.ansiBrightGreen#547000
- terminal.ansiBrightMagenta#726293
- terminal.ansiBrightRed#bd5151
- terminal.ansiBrightWhite#ffffff
- terminal.ansiBrightYellow#b26b1f
- terminal.ansiCyan#127d52
- terminal.ansiGreen#547000
- terminal.ansiMagenta#726293
- terminal.ansiRed#bd5151
- terminal.ansiWhite#f3f2f2
- terminal.ansiYellow#b26b1f
- terminal.background#fffffe
- terminal.foreground#475569
- terminalCursor.background#fffffe
- terminalCursor.foreground#475569
- textBlockQuote.border#8393aa66
- textCodeBlock.background#fafaf9
- textLink.activeForeground#99ac90
- textLink.foreground#85987c
- titleBar.activeBackground#fafaf9
- titleBar.activeForeground#475569
- titleBar.border#8393aa66
- widget.border#8393aa66
- widget.shadow#fafaf9cc
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, string.comment, comment.line, punctuation.definition.comment | #808080 | — |
| delimiter.bracket, delimiter, invalid.illegal.character-not-allowed-here.html, keyword.operator.rest, keyword.operator.spread, keyword.operator.type.annotation, keyword.operator.relational, keyword.operator.assignment, meta.tag.block.any.html, meta.tag.inline.any.html, meta.tag.structure.input.void.html, meta.type.annotation, meta.embedded.block.github-actions-expression, storage.type.function.arrow, keyword.operator.type, meta.objectliteral.ts | #71a3a8 | — |
| punctuation, meta.brace, meta.attribute punctuation.separator | #71a3a8 | — |
| punctuation.terminator, punctuation.separator | #71a3a8cc | — |
| constant, support.constant, entity.name.constant, variable.language, meta.definition.variable | #c37522 | — |
| entity, entity.name, variable.parameter.function, meta.body.function.definition.special, support.function, meta.function, meta.function-call.python | #0585a8 | — |
| entity.name.tag, tag.html | #bd5151 | — |
| entity.name.function | #0585a8 | — |
| keyword, storage.type.java, entity.name.package, entity.name.import, keyword.operator.expression.infer, keyword.control.satisfies, keyword.control.as.ts | #726293 | — |
| storage.type.annotation.java | #0585a8 | |
| storage, storage.type, support.type.builtin | #726293 | — |
| constant.language.undefined, constant.language.null, constant.language.nullptr | #a65973 | italic |
| support.type.primitive, support.type.builtin | — | bold |
| string, string punctuation.section.embedded source, attribute.value, meta.attribute-selector.scss, entity.name.import.go | #478f14 | — |
| punctuation.definition.string, punctuation.support.type.property-name | #478f14b3 | — |
| entity.name.tag.yaml, meta.attribute entity, source.rust meta.attribute, entity.other.attribute-name, source.css support.type.property-name.media, entity.other.attribute-name.tsx, entity.other.attribute-name.js, entity.other.attribute-name.xml | #aa830e | — |
| support | #8d8949 | — |
| property, meta.property-name, meta.member.access, meta.object-literal.key, attribute.name, variable.other.object.property, variable.other.property | #8d8949 | — |
| source.css support.type.property-name | #8d8949 | — |
| variable, identifier, constant.other.table-name, invalid.deprecated.entity.other.attribute-name.html, support.type.property-name.json, support.type.property-name.toml, support.type.property-name.array.toml, keyword.other.definition.ini, variable.other.normal.shell, meta.var | #aa830e | — |
| support.type.primitive, entity.name.type.instance.jsdoc | #726293 | — |
| entity.name.type.parameter | #aa830e | bold |
| entity.name.type.parameter.cpp, entity.name.type.ts | #c37522 | — |
| meta.type keyword.operator.expression.typeof, meta.type keyword.operator.expression.keyof | #726293 | italic |
| namespace | #a65973 | — |
| meta.type.annotation, support.type | #c37522 | — |
| keyword.operator, keyword.operator.assignment.compound, meta.var.expr.ts | #71a3a8 | — |
| invalid | #bd5151 | strikethrough |
| message.error | #bd5151 | — |
| string variable | #aa830e | — |
| source.regexp, string.regexp | #478f14 | — |
| string.regexp punctuation.definition.string | — | bold |
| keyword.control.anchor.regexp, keyword.control.flow.block-scalar.literal.yaml, storage.modifier.reference | — | |
| punctuation.definition.character-class.regexp | #71a3a8 | — |
| string.regexp.character-class, constant.character.escape, constant.other.character-class.regexp, string.regexp string.regexp.arbitrary-repitition, string.regexp constant.character.escape, constant.other.placeholder | #0585a8 | — |
| constant.numeric, constant.numeric.hex storage.type.number, number | #739900 | |
| entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, punctuation.definition.entity.css | #0585a8 | — |
| source.css variable | #127d52 | — |
| keyword.other.unit, punctuation.definition.constant.css | #0585a8 | — |
| source.css support.function | #726293 | — |
| constant.language.boolean, constant.language | #726293 | — |
| meta.module-reference | #0585a8 | — |
| entity.name.section | #726293 | — |
| punctuation.definition.list.begin.markdown | #71a3a8 | — |
| markup.heading, markup.heading entity.name | #726293 | bold |
| markup.quote | #127d52 | — |
| markup.italic | #c37522 | italic |
| markup.bold | #c37522 | bold |
| markup.inline.raw, fenced_code.block.language.markdown, fenced_code.block.language | #bd5151 | — |
| markup.deleted, punctuation.definition.deleted | #bd5151 | — |
| markup.inserted, punctuation.definition.inserted | #478f14 | — |
| markup.changed, punctuation.definition.changed | #aa830e | — |
| markup.ignored, markup.untracked | #808080 | — |
| meta.diff.range | #726293 | bold |
| meta.diff.header | #0585a8 | — |
| meta.separator | #0585a8 | bold |
| meta.output | #0585a8 | — |
| brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote | #71a3a8 | — |
| brackethighlighter.unmatched | #bd5151 | — |
| constant.other.reference.link, string.other.link, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, markup.heading.setext | #0585a8 | — |
| string.other.link.description, string.other.link.title | #478f14 | — |
| variable.other.link.underline | — | underline |
| markup.underline.link.markdown, markup.underline.link.image.markdown | #0585a8 | underline |
| variable.parameter, variable.other.jsdoc, meta.import variable | #aa830e | — |
| type.identifier, entity.other.inherited-class, entity.name.type.class, entity.name.type.module, meta.parameter.initialization | #c37522 | — |
| entity.name.section.group-title, support.type.property-name.table.toml | #726293 | — |
| support.class.component.js, support.class.component.ts, support.class.component.jsx, support.class.component.tsx, support.class.component.vue, support.class.component.svelte, support.class.component.astro | #127d52 | — |
| meta.fstring.python constant.character.format.placeholder | #127d52 | — |
| string.quoted.docstring.multi.python keyword.control | — | |
| invalid.illegal.unrecognized-tag.html | — | |
| source.vue meta.tag.other.unrecognized.html | #71a3a8 | |
| keyword.control.directive, keyword.control.import, keyword.control.from, keyword.control.export, keyword.package, keyword.other.package, keyword.import, meta.use.rust keyword, variable.language.this, variable.language.super, keyword.operator.new, keyword.control.trycatch, storage.modifier.package, storage.modifier.import, keyword.operator.expression.import, keyword.operator.expression.infer, source.css keyword.other.important, keyword.other.using, keyword.control.at-rule.import.css, keyword.control.at-rule.import.scss, keyword.control.at-rule.import.less | #a65973 | — |
| source.css keyword.other.important, source.sass keyword.other.important, source.less keyword.other.important | — | bold |
| keyword.control.import.python | #726293 | — |
| keyword.control.ternary.java | #a65973 | |
| keyword.control, keyword.function, keyword.operator.new, keyword.operator.borrow.and.rust, storage.type, storage.modifier, variable.language.this | — | italic |
| meta.decorator entity.name.function, meta.decorator variable.other.readwrite, meta.declaration storage.type.annotation.java | — | bold |
| source.go storage.type | — | |
| keyword.channel.go | — | bold |
| storage.type.function.arrow | — | |
| storage.type.java, punctuation.definition.string.template | — | bold |
| source.java storage.type.primitive | — | bold |
| source.java variable.parameter | — | underline |
| storage.type.object.array.java, meta.class.java storage.type.java, entity.name.type.class.java | #c37522 | — |
| entity.name.namespace | #aa830e | — |
| meta.jsx.children | #475569 | — |
| invalid.illegal.character-not-allowed-here.html, invalid.deprecated.entity.other.attribute-name.html | — | |
| source.nix invalid | #71a3a8 | |
| source.nix invalid.illegal.reserved | #726293 | |
| entity.name.type.rust | #c37522 | |
| log.error | #bd5151 | — |
| log.warning | #aa830e | — |
| log.info | #478f14 | — |
| log.debug | #0585a8 | — |
| log.verbose | #71a3a8 | — |
| log.date | #808080 | — |
Shiki preview
TypeScript sample highlighted with this variant's colors and tokenColors.
Loading...