Kanso Theme

Name: Kanso Theme
Author: Webhooked

Publisher: WebhookedThemes in package: 4

A dark theme that invites focus, not attention. Inspired by the Kanagawa color theme.

Open in VS Code GitHub

Color themes

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Kanso Theme — Kanso Pearl

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.ts

Problems1

Output

Debug Console

Terminal

Ports

~/my-project $ pnpm dev
▲ Next.js ready on http://localhost:3000
✓ compiled client and server successfully in 412ms
wait - compiling /theme/vscode...

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#f2f1ef
activityBar.foreground#22262D
activityBarBadge.background#5A7785
activityBarBadge.foreground#22262D
badge.background#e2e1df
button.background#e2e1df
button.foreground#22262D
button.hoverBackground#dddddb
button.secondaryBackground#C7D7E0
button.secondaryForeground#22262D
checkbox.border#C7D7E0
commandCenter.background#f2f1ef
debugToolBar.background#e2e1df
descriptionForeground#22262D
diffEditor.insertedTextBackground#B7D0AE80
dropdown.background#e2e1df
dropdown.border#e2e1df
editor.background#f2f1ef
editor.findMatchBackground#B5CBD2
editor.findMatchBorder#E98A00
editor.findMatchHighlightBackground#B5CBD280
editor.foreground#22262D
editor.lineHighlightBackground#e2e1df
editor.matchHighlightBackground#dddddb
editor.selectionBackground#C7D7E0
editor.selectionHighlightBackground#dddddb
editor.selectionHighlightBorder#9F9F99
editor.wordHighlightBackground#dddddb
editor.wordHighlightBorder#9F9F99
editor.wordHighlightStrongBackground#dddddb
editor.wordHighlightStrongBorder#9F9F99
editor.wordHighlightTextBackground#dddddb
editorBracketHighlight.foreground1#624C83
editorBracketHighlight.foreground2#CC6D00
editorBracketHighlight.foreground3#4D699B
editorBracketHighlight.foreground4#B35B79
editorBracketHighlight.foreground5#77713F
editorBracketHighlight.foreground6#597B75
editorBracketHighlight.unexpectedBracket.foreground#D9A594
editorBracketMatch.background#e2e1df
editorBracketMatch.border#9F9F99
editorBracketPairGuide.activeBackground1#624C83
editorBracketPairGuide.activeBackground2#CC6D00
editorBracketPairGuide.activeBackground3#4D699B
editorBracketPairGuide.activeBackground4#B35B79
editorBracketPairGuide.activeBackground5#77713F
editorBracketPairGuide.activeBackground6#597B75
editorCursor.background#f2f1ef
editorCursor.foreground#22262D
editorError.foreground#E82424
editorGroup.border#e2e1df
editorGroup.dropBackground#f2f1ef
editorGroupHeader.tabsBackground#f2f1ef
editorGutter.addedBackground#6E915F
editorGutter.deletedBackground#D7474B
editorGutter.modifiedBackground#DE9800
editorHoverWidget.background#e2e1df
editorHoverWidget.border#e2e1df
editorHoverWidget.highlightForeground#5A7785
editorIndentGuide.activeBackground1#cacac7
editorIndentGuide.background1#dddddb
editorInlayHint.background#e2e1df
editorInlayHint.foreground#6D6D69
editorLineNumber.activeForeground#22262D
editorLineNumber.foreground#9F9F99
editorMarkerNavigation.background#f2f1ef
editorOverviewRuler.border#f2f1ef
editorRuler.foreground#ff0000
editorSuggestWidget.background#C7D7E0
editorSuggestWidget.border#C7D7E0
editorSuggestWidget.selectedBackground#B5CBD2
editorWarning.foreground#E98A00
editorWhitespace.foreground#f2f1ef
editorWidget.background#f2f1ef
focusBorder#C7D7E0
foreground#22262D
gitDecoration.ignoredResourceForeground#6D6D69
input.background#e2e1df
list.activeSelectionBackground#e2e1df
list.activeSelectionForeground#22262D
list.focusBackground#f2f1ef
list.focusForeground#22262D
list.highlightForeground#4D699B
list.hoverBackground#e2e1df
list.hoverForeground#22262D
list.inactiveSelectionBackground#e2e1df
list.inactiveSelectionForeground#22262D
list.warningForeground#E98A00
menu.background#f2f1ef
menu.border#e2e1df
menu.foreground#22262D
menu.selectionBackground#e2e1df
menu.selectionForeground#22262D
menu.separatorBackground#9F9F99
menubar.selectionBackground#e2e1df
menubar.selectionForeground#22262D
minimapGutter.addedBackground#6E915F
minimapGutter.deletedBackground#D7474B
minimapGutter.modifiedBackground#DE9800
panel.border#e2e1df
panelSectionHeader.background#f2f1ef
peekView.border#9F9F99
peekViewEditor.background#f2f1ef
peekViewEditor.matchHighlightBackground#B5CBD2
peekViewResult.background#f2f1ef
scrollbar.shadow#e2e1df
scrollbarSlider.activeBackground#f2f1ef80
scrollbarSlider.background#22262D15
scrollbarSlider.hoverBackground#9F9F9980
selection.background#f2f1ef
settings.focusedRowBackground#f2f1ef
settings.headerForeground#22262D
sideBar.background#f2f1ef
sideBar.border#f2f1ef
sideBar.foreground#22262D
sideBarSectionHeader.background#f2f1ef
sideBarSectionHeader.border#e2e1df
sideBarSectionHeader.foreground#22262D
statusBar.background#e2e1df
statusBar.debuggingBackground#E82424
statusBar.debuggingBorder#624C83
statusBar.debuggingForeground#22262D
statusBar.foreground#43436C
statusBar.noFolderBackground#f2f1ef
statusBarItem.hoverBackground#e2e1df
statusBarItem.remoteBackground#B5CBD2
statusBarItem.remoteForeground#22262D
tab.activeBackground#f2f1ef
tab.activeBorder#f2f1ef
tab.activeBorderTop#22262D
tab.activeForeground#22262D
tab.border#f2f1ef
tab.hoverBackground#f2f1ef
tab.inactiveBackground#f2f1ef
tab.lastPinnedBorder#f2f1ef
tab.unfocusedHoverBackground#f2f1ef
terminal.ansiBlack#1F1F28
terminal.ansiBlue#4D699B
terminal.ansiBrightBlack#6D6D69
terminal.ansiBrightBlue#6693BF
terminal.ansiBrightCyan#5E857A
terminal.ansiBrightGreen#6E915F
terminal.ansiBrightMagenta#624C83
terminal.ansiBrightRed#D7474B
terminal.ansiBrightWhite#43436C
terminal.ansiBrightYellow#836F4A
terminal.ansiCyan#597B75
terminal.ansiGreen#6F894E
terminal.ansiMagenta#B35B79
terminal.ansiRed#C84053
terminal.ansiWhite#22262D
terminal.ansiYellow#77713F
terminal.background#f2f1ef
terminal.border#e2e1df
terminal.foreground#22262D
terminal.selectionBackground#C7D7E0
textBlockQuote.background#f2f1ef
textBlockQuote.border#e2e1df
textLink.foreground#5E857A
textPreformat.foreground#E98A00
titleBar.activeBackground#f2f1ef
titleBar.activeForeground#22262D
titleBar.inactiveBackground#f2f1ef
titleBar.inactiveForeground#22262D
toolbar.hoverBackground#f2f1ef
walkThrough.embeddedEditorBackground#f2f1ef

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#6D6D69	—
variable, string constant.other.placeholder	#22262D	—
constant.other.color	#CC6D00	—
invalid, invalid.illegal	#E82424	—
storage.type	#624C83	—
storage.modifier	#624C83	—
keyword.control.flow, keyword.control.conditional, keyword.control.loop	#624C83	bold
keyword.control, constant.other.color, meta.tag, keyword.other.template, keyword.other.substitution, keyword.other	#624C83	—
keyword.other.definition.ini	#CC6D00	—
keyword.control.trycatch	#CC6D00	bold
keyword.other.unit, keyword.operator	#77713F	—
punctuation, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, meta.brace, keyword.operator.type.annotation, keyword.operator.namespace	#6D6D69	—
entity.name.tag, meta.tag.sgml	#77713F	—
entity.name.function, meta.function-call, variable.function, support.function	#4D699B	—
keyword.other.special-method	#6693BF	—
entity.name.function.macro	#C84053	—
meta.block variable.other	#22262D	—
variable.other.enummember	#CC6D00	—
support.other.variable	#22262D	—
string.other.link	#6693BF	—
constant.numeric, constant.language, support.constant, constant.character, constant.escape	#CC6D00	—
constant.language.boolean	#CC6D00	—
constant.numeric	#B35B79	—
string, punctuation.definition.string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js, markup.inline.raw.string	#6F894E	—
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, support.type.sys-types	#597B75	—
entity.name.type.module, entity.name.namespace	#77713F	—
entity.name.import.go	#6F894E	—
keyword.blade	#624C83	—
variable.other.property	#77713F	—
keyword.control.import, keyword.import, meta.import	#6d6f6e	—
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name	#597B75	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#CC6D00	—
variable.language	#CC6D00	—
entity.name.method.js	#6693BF	—
meta.class-method.js entity.name.function.js, variable.function.constructor	#6693BF	—
entity.other.attribute-name	#624C83	—
entity.other.attribute-name.class	#77713F	—
source.sass keyword.control	#6693BF	—
markup.inserted	#6E915F	—
markup.deleted	#D7474B	—
markup.changed	#DE9800	—
string.regexp	#836F4A	—
constant.character.escape	#6693BF	—
url, link, uri	—	underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#624C83	—
source.js constant.other.object.key.js string.unquoted.label.js	#CC6D00	—
source.json meta.structure.dictionary.json support.type.property-name.json	#B35B79	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#77713F	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#CC6D00	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#CC6D00	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#CC6D00	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#4D699B	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#B35B79	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#624C83	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#6F894E	—
meta.tag JSXNested, meta.jsx.children, text.html, text.log	#22262D	—
text.html.markdown, punctuation.definition.list_item.markdown	#22262D	—
text.html.markdown markup.inline.raw.markdown	#624C83	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#624C83	—
markdown.heading, entity.name.section.markdown, markup.heading.markdown	#4D699B	—
markup.italic	#C84053	italic
markup.bold, markup.bold string	—	bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string	#C84053	bold
markup.underline	#6693BF	underline
markup.quote punctuation.definition.blockquote.markdown	#6D6D69	—
markup.quote	—	italic
string.other.link.title.markdown	#CC6D00	—
string.other.link.description.title.markdown	#624C83	—
constant.other.reference.link.markdown	#77713F	—
markup.raw.block	#624C83	—
markup.raw.block.fenced.markdown	#6D6D69	—
punctuation.definition.fenced.markdown	#6D6D69	—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end	#22262D	—
variable.language.fenced.markdown	#6D6D69	—
meta.separator	#4E8CA2	bold
markup.table	#22262D	—

Shiki preview

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

export interface User {
  id: string;
  name: string;
  role: "admin" | "member";
  tags: string[];
}

/**
 * Fetch user data by ID
 * @param id  
 * @returns User object or null if ID is invalid
 */
export async function fetchUser(id: string): Promise<User | null> {
  if (!id) {
    return null;
  }

  const response = await fetch(`/api/users/${id}`, {
    method: "GET",
    headers: { Accept: "application/json" },
  });

  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }

  return (await response.json()) as User;
}

function greet(user: User): string {
  // Simple greeting function that uses the user's name
  return `Hello, ${user.name}!`;
}