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#6285a7
- activityBar.background#171718
- activityBar.border#44444b
- activityBar.foreground#cbd5e1
- activityBarBadge.background#8dbe74
- activityBarBadge.foreground#171718
- badge.background#8dbe74
- badge.foreground#171718
- banner.background#6285a7
- banner.foreground#1d1d1d
- breadcrumb.background#1e1e1f
- breadcrumb.foreground#cbd5e1b3
- breadcrumbPicker.background#1e1e1f
- button.background#6285a7
- button.foreground#fafafa
- button.hoverBackground#6285a7e6
- button.secondaryBackground#8dbe74b3
- button.secondaryForeground#fafafa
- button.secondaryHoverBackground#8dbe7499
- commandCenter.activeBackground#334155
- commandCenter.activeBorder#64748b
- commandCenter.border#44444b
- commandCenter.foreground#cbd5e1
- debugToolBar.background#232a39
- debugToolBar.border#44444b
- diffEditor.insertedLineBackground#a4dfae33
- diffEditor.insertedTextBackground#a4dfae66
- diffEditor.removedLineBackground#edabab33
- diffEditor.removedTextBackground#edabab66
- dropdown.background#1e1e1f
- dropdown.border#44444b
- dropdown.foreground#cbd5e1
- dropdown.listBackground#1e1e1f
- editor.background#1e1e1f
- editor.findMatchBackground#8dbe744d
- editor.findMatchBorder#64748b
- editor.findMatchHighlightBackground#8dbe7433
- editor.findRangeHighlightBackground#1e293b66
- editor.findRangeHighlightBorder#334155cc
- editor.foreground#cbd5e1
- editor.hoverHighlightBackground#4755694d
- editor.inactiveSelectionBackground#475569b3
- editor.lineHighlightBackground#47556940
- editor.lineHighlightBorder#4755694d
- editor.rangeHighlightBackground#1e293be6
- editor.rangeHighlightBorder#334155e6
- editor.selectionBackground#475569
- editor.selectionHighlightBackground#47556966
- editor.selectionHighlightBorder#44444b
- editor.snippetTabstopHighlightBackground#47556999
- editor.snippetTabstopHighlightBorder#44444b
- editor.wordHighlightBackground#47556980
- editor.wordHighlightStrongBackground#47556980
- editor.wordHighlightTextBackground#47556980
- editorBracketHighlight.foreground1#b8d7f9
- editorBracketHighlight.foreground2#c6b9ca
- editorBracketHighlight.foreground3#89cdca
- editorBracketHighlight.foreground4#d9a68c
- editorCursor.foreground#8d9db4
- editorError.foreground#edabab
- editorGroupHeader.tabsBackground#171718
- editorGroupHeader.tabsBorder#232a39
- editorGutter.addedBackground#a4dfaee6
- editorGutter.addedSecondaryBackground#a4dfaeb3
- editorGutter.deletedBackground#edababe6
- editorGutter.deletedSecondaryBackground#edababb3
- editorGutter.modifiedBackground#8fc7ffe6
- editorGutter.modifiedSecondaryBackground#8fc7ffb3
- editorHoverWidget.background#232a39
- editorHoverWidget.statusBarBackground#232324
- editorIndentGuide.activeBackground1#cbd5e1cc
- editorIndentGuide.background1#cbd5e140
- editorInfo.foreground#8fc7ff
- editorInlayHint.background#3b5b7d
- editorInlayHint.foreground#f5e7d6
- editorLineNumber.activeForeground#fafafa
- editorLineNumber.foreground#999999b3
- editorLink.activeForeground#8dbe74
- editorMultiCursor.secondary.foreground#8d9db4cc
- editorWarning.foreground#eecfa0
- editorWidget.background#232a39
- editorWidget.resizeBorder#6285a7
- focusBorder#64748b
- foreground#cbd5e1
- git.blame.editorDecorationForeground#999999cc
- gitDecoration.addedResourceForeground#a4dfae
- gitDecoration.conflictingResourceForeground#d2ccff
- gitDecoration.deletedResourceForeground#edabab
- gitDecoration.modifiedResourceForeground#eecfa0
- gitDecoration.renamedResourceForeground#b8d7f9
- gitDecoration.stageDeletedResourceForeground#edababe6
- gitDecoration.stageModifiedResourceForeground#f0c0a8
- gitDecoration.submoduleResourceForeground#a1e8e5
- gitDecoration.untrackedResourceForeground#8fc7ff
- input.background#1e1e1f
- input.border#44444b
- input.placeholderForeground#5f5f68
- inputOption.activeBackground#232a39
- inputOption.activeBorder#64748b
- inputOption.activeForeground#cbd5e1
- keybindingLabel.background#334155b3
- keybindingLabel.border#64748b
- keybindingLabel.foreground#cbd5e1
- list.activeSelectionBackground#334155
- list.activeSelectionForeground#cbd5e1
- list.dropBackground#232a39
- list.filterMatchBackground#8dbe74b3
- list.filterMatchBorder#8dbe74
- list.focusAndSelectionOutline#64748b
- list.focusBackground#293545
- list.focusForeground#cbd5e1
- list.focusHighlightForeground#8dbe74
- list.focusOutline#64748bcc
- list.highlightForeground#8dbe74
- list.hoverBackground#2d3a4b
- list.inactiveFocusOutline#44444b
- list.inactiveSelectionBackground#283242
- menu.background#171718
- menu.border#53535a
- menu.foreground#cbd5e1
- menu.selectionBackground#334155
- menu.selectionBorder#64748b
- menu.separatorBackground#4e4e55
- menubar.selectionBackground#334155
- minimap.background#212122
- minimap.errorHighlight#edabab99
- minimap.findMatchHighlight#8dbe74cc
- minimap.selectionHighlight#6285a780
- notifications.background#171718
- peekView.border#44444b
- peekViewEditor.background#232a3980
- peekViewEditor.matchHighlightBackground#8dbe7433
- peekViewEditor.matchHighlightBorder#8dbe74
- peekViewResult.background#212122
- peekViewResult.matchHighlightBackground#8dbe7433
- peekViewResult.selectionBackground#6285a733
- peekViewTitle.background#232a39
- pickerGroup.foreground#8dbe74
- progressBar.background#6285a7
- quickInput.background#171718
- quickInputList.focusBackground#334155
- sash.hoverBorder#6285a7
- scrollbarSlider.activeBackground#3d4b5fcc
- scrollbarSlider.background#3d4b5f80
- scrollbarSlider.hoverBackground#3d4b5f99
- selection.background#475569cc
- sideBar.background#171718
- sideBar.border#44444b
- sideBar.foreground#cbd5e1
- sideBarSectionHeader.background#171718
- sideBarSectionHeader.border#44444b
- statusBar.background#171718
- statusBar.border#44444b
- statusBar.debuggingBackground#8dbe7466
- statusBar.debuggingBorder#44444b
- statusBar.debuggingForeground#cbd5e1
- statusBar.foreground#cbd5e1
- statusBar.noFolderBackground#171718
- statusBar.noFolderBorder#44444bcc
- statusBar.noFolderForeground#cbd5e1
- statusBarItem.errorBackground#edabab
- statusBarItem.errorForeground#171718
- statusBarItem.errorHoverForeground#1e1e1f
- statusBarItem.offlineBackground#a1e8e5
- statusBarItem.offlineForeground#171718
- statusBarItem.offlineHoverForeground#1e1e1f
- statusBarItem.prominentBackground#8dbe74
- statusBarItem.prominentForeground#171718
- statusBarItem.prominentHoverForeground#1e1e1f
- statusBarItem.remoteBackground#8dbe74
- statusBarItem.remoteForeground#171718
- statusBarItem.remoteHoverForeground#1e1e1f
- statusBarItem.warningBackground#eecfa0
- statusBarItem.warningForeground#171718
- statusBarItem.warningHoverForeground#1e1e1f
- tab.activeBackground#232a39
- tab.activeBorder#232a39
- tab.activeBorderTop#6285a7
- tab.hoverBackground#232a39b3
- tab.inactiveBackground#171718
- tab.unfocusedActiveBackground#232a3980
- terminal.ansiBlack#333333
- terminal.ansiBlue#8fc7ff
- terminal.ansiBrightBlack#666666
- terminal.ansiBrightBlue#a8e0ff
- terminal.ansiBrightCyan#bafffe
- terminal.ansiBrightGreen#bdf8c7
- terminal.ansiBrightMagenta#ebe5ff
- terminal.ansiBrightRed#ffc4c4
- terminal.ansiBrightWhite#ffffff
- terminal.ansiBrightYellow#ffe8b9
- terminal.ansiCyan#a1e8e5
- terminal.ansiGreen#a4dfae
- terminal.ansiMagenta#d2ccff
- terminal.ansiRed#edabab
- terminal.ansiWhite#f3f2f2
- terminal.ansiYellow#eecfa0
- terminal.background#1e1e1f
- terminal.foreground#cbd5e1
- terminalCursor.background#1e1e1f
- terminalCursor.foreground#cbd5e1
- textBlockQuote.border#44444b
- textCodeBlock.background#171718
- textLink.activeForeground#a1d288
- textLink.foreground#8dbe74
- titleBar.activeBackground#171718
- titleBar.activeForeground#cbd5e1
- titleBar.border#44444b
- widget.border#44444b
- widget.shadow#171718cc
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, string.comment, comment.line, punctuation.definition.comment | #999999 | — |
| 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 | #b8d7f9 | — |
| punctuation, meta.brace, meta.attribute punctuation.separator | #b8d7f9 | — |
| punctuation.terminator, punctuation.separator | #b8d7f9cc | — |
| constant, support.constant, entity.name.constant, variable.language, meta.definition.variable | #f0c0a8 | — |
| entity, entity.name, variable.parameter.function, meta.body.function.definition.special, support.function, meta.function, meta.function-call.python | #8fc7ff | — |
| entity.name.tag, tag.html | #edabab | — |
| entity.name.function | #8fc7ff | — |
| keyword, storage.type.java, entity.name.package, entity.name.import, keyword.operator.expression.infer, keyword.control.satisfies, keyword.control.as.ts | #d2ccff | — |
| storage.type.annotation.java | #8fc7ff | |
| storage, storage.type, support.type.builtin | #d2ccff | — |
| constant.language.undefined, constant.language.null, constant.language.nullptr | #e3cbeb | italic |
| support.type.primitive, support.type.builtin | — | bold |
| string, string punctuation.section.embedded source, attribute.value, meta.attribute-selector.scss, entity.name.import.go | #a4dfae | — |
| punctuation.definition.string, punctuation.support.type.property-name | #a4dfaeb3 | — |
| 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 | #eecfa0 | — |
| support | #ded6cf | — |
| property, meta.property-name, meta.member.access, meta.object-literal.key, attribute.name, variable.other.object.property, variable.other.property | #ded6cf | — |
| source.css support.type.property-name | #ded6cf | — |
| 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 | #eecfa0 | — |
| support.type.primitive, entity.name.type.instance.jsdoc | #d2ccff | — |
| entity.name.type.parameter | #eecfa0 | bold |
| entity.name.type.parameter.cpp, entity.name.type.ts | #f0c0a8 | — |
| meta.type keyword.operator.expression.typeof, meta.type keyword.operator.expression.keyof | #d2ccff | italic |
| namespace | #e3cbeb | — |
| meta.type.annotation, support.type | #f0c0a8 | — |
| keyword.operator, keyword.operator.assignment.compound, meta.var.expr.ts | #b8d7f9 | — |
| invalid | #edabab | strikethrough |
| message.error | #edabab | — |
| string variable | #eecfa0 | — |
| source.regexp, string.regexp | #a4dfae | — |
| 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 | #b8d7f9 | — |
| 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 | #8fc7ff | — |
| constant.numeric, constant.numeric.hex storage.type.number, number | #d5f288 | |
| entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, punctuation.definition.entity.css | #8fc7ff | — |
| source.css variable | #a1e8e5 | — |
| keyword.other.unit, punctuation.definition.constant.css | #8fc7ff | — |
| source.css support.function | #d2ccff | — |
| constant.language.boolean, constant.language | #d2ccff | — |
| meta.module-reference | #8fc7ff | — |
| entity.name.section | #d2ccff | — |
| punctuation.definition.list.begin.markdown | #b8d7f9 | — |
| markup.heading, markup.heading entity.name | #d2ccff | bold |
| markup.quote | #a1e8e5 | — |
| markup.italic | #f0c0a8 | italic |
| markup.bold | #f0c0a8 | bold |
| markup.inline.raw, fenced_code.block.language.markdown, fenced_code.block.language | #edabab | — |
| markup.deleted, punctuation.definition.deleted | #edabab | — |
| markup.inserted, punctuation.definition.inserted | #a4dfae | — |
| markup.changed, punctuation.definition.changed | #eecfa0 | — |
| markup.ignored, markup.untracked | #999999 | — |
| meta.diff.range | #d2ccff | bold |
| meta.diff.header | #8fc7ff | — |
| meta.separator | #8fc7ff | bold |
| meta.output | #8fc7ff | — |
| brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote | #b8d7f9 | — |
| brackethighlighter.unmatched | #edabab | — |
| constant.other.reference.link, string.other.link, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, markup.heading.setext | #8fc7ff | — |
| string.other.link.description, string.other.link.title | #a4dfae | — |
| variable.other.link.underline | — | underline |
| markup.underline.link.markdown, markup.underline.link.image.markdown | #8fc7ff | underline |
| variable.parameter, variable.other.jsdoc, meta.import variable | #eecfa0 | — |
| type.identifier, entity.other.inherited-class, entity.name.type.class, entity.name.type.module, meta.parameter.initialization | #f0c0a8 | — |
| entity.name.section.group-title, support.type.property-name.table.toml | #d2ccff | — |
| 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 | #a1e8e5 | — |
| meta.fstring.python constant.character.format.placeholder | #a1e8e5 | — |
| string.quoted.docstring.multi.python keyword.control | — | |
| invalid.illegal.unrecognized-tag.html | — | |
| source.vue meta.tag.other.unrecognized.html | #b8d7f9 | |
| 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 | #e3cbeb | — |
| source.css keyword.other.important, source.sass keyword.other.important, source.less keyword.other.important | — | bold |
| keyword.control.import.python | #d2ccff | — |
| keyword.control.ternary.java | #e3cbeb | |
| 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 | #f0c0a8 | — |
| entity.name.namespace | #eecfa0 | — |
| meta.jsx.children | #cbd5e1 | — |
| invalid.illegal.character-not-allowed-here.html, invalid.deprecated.entity.other.attribute-name.html | — | |
| source.nix invalid | #b8d7f9 | |
| source.nix invalid.illegal.reserved | #d2ccff | |
| entity.name.type.rust | #f0c0a8 | |
| log.error | #edabab | — |
| log.warning | #eecfa0 | — |
| log.info | #a4dfae | — |
| log.debug | #8fc7ff | — |
| log.verbose | #b8d7f9 | — |
| log.date | #999999 | — |
Shiki preview
TypeScript sample highlighted with this variant's colors and tokenColors.
Loading...