Kanagawa Paper
Publisher: thesimonhoThemes in package: 2
Remixed Kanagawa colourscheme with muted colors. For VSCode.
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.
- actionBar.toggledBackground#c1b4c1
- activityBar.activeBorder#7e8faf
- activityBar.background#d1cfc5
- activityBar.border#cbc8bc
- activityBar.foreground#7e8faf
- activityBar.inactiveForeground#8e8a80
- activityBarBadge.background#7e8faf
- activityBarBadge.foreground#ecece8
- badge.background#7e8faf
- badge.foreground#ecece8
- button.background#7e8faf
- button.border#00000000
- button.foreground#ecece8
- button.hoverBackground#6b8998
- button.secondaryBackground#e6e6e3
- button.secondaryForeground#73787d
- button.secondaryHoverBackground#cbc8bc
- chat.editedFileForeground#b4a88a
- chat.slashCommandBackground#9ba1bf
- chat.slashCommandForeground#809ba7
- checkbox.background#ecece8
- checkbox.border#aeaea6
- debugToolBar.background#d1cfc5
- descriptionForeground#8e8a80
- diffEditor.insertedTextBackground#7a8c6a33
- dropdown.background#ecece8
- dropdown.border#aeaea6
- dropdown.foreground#73787d
- dropdown.listBackground#e1e1de
- editor.background#e1e1de
- editor.findMatchBackground#a7956a
- editor.findMatchBorder#b4a88a
- editor.findMatchHighlightBackground#9ba1bf80
- editor.foreground#73787d
- editor.inactiveSelectionBackground#d4cdd480
- editor.lineHighlightBackground#d8d8d2
- editor.selectionBackground#d4cdd480
- editor.selectionHighlightBackground#d4cdd480
- editor.selectionHighlightBorder#aeaea6
- editor.wordHighlightBackground#d4cdd44d
- editor.wordHighlightBorder#aeaea6
- editor.wordHighlightStrongBackground#d4cdd44d
- editor.wordHighlightStrongBorder#aeaea6
- editorBracketHighlight.foreground1#c27672
- editorBracketHighlight.foreground2#9e7e98
- editorBracketHighlight.foreground3#809ba7
- editorBracketHighlight.foreground4#a8826a
- editorBracketHighlight.foreground5#7e9579
- editorBracketHighlight.foreground6#637263
- editorBracketHighlight.unexpectedBracket.foreground#c27672
- editorBracketMatch.background#ecece8
- editorBracketMatch.border#aeaea6
- editorBracketPairGuide.activeBackground1#c27672
- editorBracketPairGuide.activeBackground2#9e7e98
- editorBracketPairGuide.activeBackground3#809ba7
- editorBracketPairGuide.activeBackground4#a8826a
- editorBracketPairGuide.activeBackground5#7e9579
- editorBracketPairGuide.activeBackground6#637263
- editorBracketPairGuide.background1#c2767266
- editorBracketPairGuide.background2#9e7e9866
- editorBracketPairGuide.background3#809ba766
- editorBracketPairGuide.background4#a8826a66
- editorBracketPairGuide.background5#7e957966
- editorBracketPairGuide.background6#63726366
- editorCursor.background#e1e1de
- editorCursor.foreground#73787d
- editorError.foreground#c27672
- editorGroup.border#73787d
- editorGroupHeader.tabsBackground#d1cfc5
- editorGroupHeader.tabsBorder#cbc8bc
- editorGutter.addedBackground#7a8c6a
- editorGutter.deletedBackground#c27672
- editorGutter.modifiedBackground#a7956a
- editorHoverWidget.background#e1e1de
- editorHoverWidget.border#cbc8bc
- editorHoverWidget.highlightForeground#7e8faf
- editorIndentGuide.activeBackground1#aeaea6
- editorIndentGuide.background1#d1cfc5
- editorInlayHint.background#ecece8
- editorInlayHint.foreground#8e8a80
- editorLineNumber.activeForeground#73787d
- editorLineNumber.foreground#8e8a80
- editorMarkerNavigation.background#d8d8d2
- editorOverviewRuler.border#d1cfc5
- editorRuler.foreground#d1cfc5
- editorSuggestWidget.background#ecece8
- editorSuggestWidget.border#d1cfc5
- editorSuggestWidget.selectedBackground#d8d8d2
- editorWarning.foreground#a7956a
- editorWhitespace.foreground#d8d8d2
- editorWidget.background#e6e6e3
- errorForeground#c27672
- focusBorder#7e8faf
- foreground#73787d
- gitDecoration.addedResourceForeground#7a8c6a
- gitDecoration.conflictingResourceForeground#a7956a
- gitDecoration.deletedResourceForeground#c27672
- gitDecoration.ignoredResourceForeground#aeaea6
- gitDecoration.modifiedResourceForeground#a7956a
- gitDecoration.untrackedResourceForeground#7a8c6a
- icon.foreground#73787d
- input.background#ecece8
- input.border#aeaea6
- input.foreground#73787d
- input.placeholderForeground#8e8a80
- inputOption.activeBackground#7e8faf
- inputOption.activeBorder#7e8faf
- keybindingLabel.foreground#73787d
- list.activeSelectionBackground#d8d8d2
- list.activeSelectionForeground#73787d
- list.activeSelectionIconForeground#ecece8
- list.dropBackground#d8d8d2
- list.errorForeground#c27672
- list.focusBackground#cbc8bc
- list.focusForeground#73787d
- list.highlightForeground#809ba7
- list.hoverBackground#d8d8d2
- list.hoverForeground#73787d
- list.inactiveSelectionBackground#cbc8bc
- list.inactiveSelectionForeground#73787d
- list.warningForeground#a7956a
- menu.background#e1e1de
- menu.border#aeaea6
- menu.foreground#73787d
- menu.selectionBackground#7e8faf
- menu.selectionForeground#ecece8
- menu.separatorBackground#aeaea6
- minimapGutter.addedBackground#7a8c6a
- minimapGutter.deletedBackground#c27672
- minimapGutter.modifiedBackground#a7956a
- notificationCenterHeader.background#e1e1de
- notificationCenterHeader.foreground#73787d
- notifications.background#e1e1de
- notifications.border#cbc8bc
- notifications.foreground#73787d
- panel.background#d1cfc5
- panel.border#cbc8bc
- panelInput.border#cbc8bc
- panelSectionHeader.background#d1cfc5
- panelTitle.activeBorder#7e8faf
- panelTitle.activeForeground#73787d
- panelTitle.inactiveForeground#8e8a80
- peekView.border#aeaea6
- peekViewEditor.background#e1e1de
- peekViewEditor.matchHighlightBackground#b28d77
- peekViewResult.background#e1e1de
- peekViewResult.matchHighlightBackground#b28d77
- pickerGroup.border#aeaea6
- ports.iconRunningProcessForeground#7a8c6a
- progressBar.background#7e8faf
- quickInput.background#e6e6e3
- quickInput.foreground#73787d
- quickInputList.focusBackground#cbc8bc
- quickInputList.focusForeground#73787d
- quickInputList.focusIconForeground#73787d
- scrollbar.shadow#d1cfc5
- scrollbarSlider.activeBackground#8e8a8080
- scrollbarSlider.background#8e8a8066
- scrollbarSlider.hoverBackground#8e8a8080
- settings.dropdownBackground#ecece8
- settings.dropdownBorder#aeaea6
- settings.focusedRowBackground#d8d8d2
- settings.headerForeground#7e8faf
- settings.modifiedItemIndicator#b28d77
- sideBar.background#d8d8d2
- sideBar.border#cbc8bc
- sideBar.foreground#73787d
- sideBarSectionHeader.background#d8d8d2
- sideBarSectionHeader.border#cbc8bc
- sideBarSectionHeader.foreground#73787d
- sideBarTitle.foreground#73787d
- statusBar.background#d1cfc5
- statusBar.border#cbc8bc
- statusBar.debuggingBackground#7e8faf
- statusBar.debuggingBorder#7880a5
- statusBar.debuggingForeground#ecece8
- statusBar.focusBorder#7e8faf
- statusBar.foreground#73787d
- statusBar.noFolderBackground#e1e1de
- statusBarItem.errorBackground#c27672
- statusBarItem.focusBorder#7e8faf
- statusBarItem.hoverBackground#cbc8bc
- statusBarItem.hoverForeground#73787d
- statusBarItem.prominentBackground#7e8faf
- statusBarItem.prominentForeground#ecece8
- statusBarItem.remoteBackground#7e8faf
- statusBarItem.remoteForeground#ecece8
- statusBarItem.warningBackground#a7956a
- tab.activeBackground#e1e1de
- tab.activeBorder#e1e1de
- tab.activeBorderTop#7e8faf
- tab.activeForeground#73787d
- tab.activeModifiedBorder#a7956a
- tab.border#cbc8bc
- tab.hoverBackground#e1e1de
- tab.inactiveBackground#d1cfc5
- tab.inactiveForeground#73787d
- tab.inactiveModifiedBorder#a7956a
- tab.lastPinnedBorder#73787d
- tab.selectedBackground#e6e6e3
- tab.selectedBorderTop#9ba1bf
- tab.selectedForeground#73787d
- tab.unfocusedActiveBorder#e1e1de
- tab.unfocusedActiveBorderTop#cbc8bc
- tab.unfocusedActiveModifiedBorder#a7956a
- tab.unfocusedHoverBackground#e1e1de
- tab.unfocusedInactiveModifiedBorder#a7956a
- terminal.ansiBlack#8e8a80
- terminal.ansiBlue#809ba7
- terminal.ansiBrightBlack#aeaea6
- terminal.ansiBrightBlue#6b8998
- terminal.ansiBrightCyan#7e8faf
- terminal.ansiBrightGreen#9ba98e
- terminal.ansiBrightMagenta#9e7e98
- terminal.ansiBrightRed#c27672
- terminal.ansiBrightWhite#ecece8
- terminal.ansiBrightYellow#a7956a
- terminal.ansiCyan#7e8faf
- terminal.ansiGreen#7a8c6a
- terminal.ansiMagenta#9e7e98
- terminal.ansiRed#c27672
- terminal.ansiWhite#73787d
- terminal.ansiYellow#a7956a
- terminal.background#e1e1de
- terminal.border#cbc8bc
- terminal.foreground#73787d
- terminal.inactiveSelectionBackground#d4cdd4
- terminal.selectionBackground#d4cdd480
- terminal.tab.activeBorder#7e8faf
- textBlockQuote.background#cbc8bc
- textBlockQuote.border#8e8a80
- textCodeBlock.background#cbc8bc
- textLink.activeForeground#809ba7
- textLink.foreground#809ba7
- textPreformat.background#d1cfc5
- textPreformat.foreground#8e8a80
- textSeparator.foreground#aeaea6
- titleBar.activeBackground#d1cfc5
- titleBar.activeForeground#73787d
- titleBar.border#cbc8bc
- titleBar.inactiveBackground#d1cfc5
- titleBar.inactiveForeground#8e8a80
- walkThrough.embeddedEditorBackground#e1e1de
- welcomePage.progress.foreground#7e8faf
- welcomePage.tileBackground#cbc8bc
- widget.border#aeaea6
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #aeaea6 | italic |
| comment.documentation, comment.block.documentation | #9ba98e | — |
| invalid.illegal | #c27672 | — |
| keyword.operator | #c27672 | — |
| keyword, storage | #9e7e98 | — |
| storage.type, support.type | #7b958e | — |
| constant.language, support.constant, variable.language | #b28d77 | — |
| variable, support.variable | #7b958e | — |
| entity.name.function, support.function | #c27672 | bold |
| entity.name.type, entity.other.inherited-class, support.class | #7b958e | bold |
| entity.name.exception | #c27672 | — |
| entity.name.section | — | bold |
| constant.numeric, constant.character, constant | #9e7e98 | — |
| string | #7e9579 | — |
| constant.character.escape | #8e8a80 | — |
| string.regexp, constant.regexp | #c27672 | — |
| constant.other.symbol | #c27672 | — |
| punctuation | #aeaea6 | — |
| meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html | #aeaea6 | — |
| meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html | #809ba7 | — |
| entity.name.tag | #7880a5 | — |
| meta.tag entity.other.attribute-name, entity.other.attribute-name.html | #809ba7 | italic |
| constant.character.entity, punctuation.definition.entity | #b28d77 | — |
| meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css | #7b958e | — |
| meta.property-name, support.type.property-name | #b28d77 | — |
| meta.property-value, meta.property-value constant.other, support.constant.property-value | #7e9579 | — |
| keyword.other.important | — | bold |
| markup.changed | #a7956a | — |
| markup.deleted | #c27672 | — |
| markup.error | #c27672 | — |
| markup.inserted | #7a8c6a | — |
| meta.link | #7880a5 | — |
| markup.output, markup.raw | #8e8a80 | — |
| markup.prompt | #8e8a80 | — |
| markup.heading | #c27672 | — |
| markup.traceback | #c27672 | — |
| markup.underline | — | underline |
| markup.quote | #9e7e98 | — |
| markup.list | #809ba7 | — |
| markup.bold, markup.italic | #a8826a | — |
| markup.inline.raw | #7e9579 | |
| meta.diff.range, meta.diff.index, meta.separator | #8e8a80 | — |
| meta.diff.header.from-file | #8e8a80 | — |
| meta.diff.header.to-file | #8e8a80 | — |
Shiki preview
TypeScript sample highlighted with this variant's colors and tokenColors.
Loading...