Nushu

Name: Nushu
Author: wheredoesyourmindgo

Publisher: wheredoesyourmindgoThemes in package: 3

A theme that will continue to fade with time

GitHub

Color themes

VS Code preview

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

Nushu — Nushu Classic

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.activeBorder#b08800
activityBar.background#F8F6F1
activityBar.border#e1e4e8
activityBar.foreground#24292e
activityBar.inactiveForeground#959da5
activityBarBadge.background#2188ff
activityBarBadge.foreground#F8F6F1
badge.background#F8F6F1
badge.foreground#2188ff
breadcrumb.activeSelectionForeground#586069
breadcrumb.focusForeground#24292e
breadcrumb.foreground#6a737d
breadcrumbPicker.background#F3F0E8
button.background#159739
button.foreground#F8F6F1
button.hoverBackground#138934
checkbox.background#fafbfc
checkbox.border#d1d5da
debugToolBar.background#F8F6F1
descriptionForeground#6a737d
diffEditor.insertedTextBackground#34d05822
diffEditor.removedTextBackground#d73a4922
dropdown.background#F3F0E8
dropdown.border#e1e4e8
dropdown.foreground#24292e
dropdown.listBackground#F8F6F1
editor.background#F8F6F1
editor.findMatchBackground#ffdf5d
editor.findMatchHighlightBackground#ffdf5d66
editor.focusedStackFrameHighlightBackground#fff5b1
editor.foldBackground#F3F0E8
editor.foreground#24292e
editor.inactiveSelectionBackground#dbab0911
editor.lineHighlightBackground#EFEBE0
editor.selectionBackground#dbab0925
editor.stackFrameHighlightBackground#fffbdd
editor.wordHighlightBackground#dbab0922
editorBracketMatch.background#c8e1ff
editorBracketMatch.border#c8e1ff
editorCursor.foreground#044289
editorGroup.border#e1e4e8
editorGroupHeader.tabsBackground#EFEBE0
editorGroupHeader.tabsBorder#e1e4e8
editorGutter.addedBackground#28a745
editorGutter.deletedBackground#d73a49
editorGutter.modifiedBackground#2188ff
editorIndentGuide.activeBackground#d7dbe0
editorIndentGuide.background#eff2f6
editorLineNumber.activeForeground#24292e
editorLineNumber.foreground#1b1f234d
editorOverviewRuler.border#F8F6F1
editorWhitespace.foreground#959da5
errorForeground#cb2431
focusBorder#735c0f59
foreground#444d56
gitDecoration.addedResourceForeground#28a745
gitDecoration.conflictingResourceForeground#e36209
gitDecoration.deletedResourceForeground#d73a49
gitDecoration.ignoredResourceForeground#959da5
gitDecoration.modifiedResourceForeground#005cc5
gitDecoration.submoduleResourceForeground#959da5
gitDecoration.untrackedResourceForeground#28a745
input.background#F8F6F1
input.border#e1e4e8
input.foreground#24292e
input.placeholderForeground#959da5
list.activeSelectionBackground#e2e5e9F2
list.activeSelectionForeground#24292e
list.focusBackground#dbedffF2
list.hoverBackground#ebf0f4E6
list.hoverForeground#24292e
list.inactiveFocusBackground#dbedff
list.inactiveSelectionBackground#E7E1D0F2
list.inactiveSelectionForeground#24292e
notificationCenterHeader.background#F3F0E8
panel.background#EFEBE0
panel.border#e1e4e8
panelInput.border#e1e4e8
panelTitle.activeBorder#b08800
panelTitle.activeForeground#24292e
panelTitle.inactiveForeground#6a737d
pickerGroup.border#e1e4e8
pickerGroup.foreground#24292e
progressBar.background#2188ff
quickInput.background#F3F0E8
quickInput.foreground#24292e
scrollbar.shadow#6a737d33
scrollbarSlider.activeBackground#959da588
scrollbarSlider.background#959da533
scrollbarSlider.hoverBackground#959da544
settings.headerForeground#24292e
settings.modifiedItemIndicator#2188ff
sideBar.background#EFEBE0
sideBar.border#e1e4e8
sideBar.foreground#444d56
sideBarSectionHeader.background#EFEBE0
sideBarSectionHeader.border#e1e4e8
sideBarSectionHeader.foreground#24292e
sideBarTitle.foreground#24292e
statusBar.background#F8F6F1
statusBar.border#e1e4e8
statusBar.debuggingBackground#F8F6F1
statusBar.debuggingBorder#e1e4e8
statusBar.debuggingForeground#586069
statusBar.foreground#586069
statusBar.noFolderBackground#F8F6F1
statusBar.noFolderBorder#e1e4e8
statusBar.noFolderForeground#586069
tab.activeBackground#F8F6F1
tab.activeBorder#F8F6F1
tab.activeBorderTop#b08800
tab.activeForeground#24292e
tab.border#e1e4e8
tab.hoverBackground#F8F6F1
tab.inactiveBackground#EFEBE0
tab.inactiveForeground#6a737d
tab.unfocusedActiveBorder#F8F6F1
tab.unfocusedActiveBorderTop#e1e4e8
tab.unfocusedHoverBackground#F8F6F1
terminal.ansiBlack#d1d5da
terminal.ansiBlue#3a1d6e
terminal.ansiBrightBlack#6a737d
terminal.ansiBrightBlue#4c2889
terminal.ansiBrightCyan#044289
terminal.ansiBrightGreen#176f2c
terminal.ansiBrightMagenta#b93a86
terminal.ansiBrightRed#b31d28
terminal.ansiBrightWhite#e1e4e8
terminal.ansiBrightYellow#dbab09
terminal.ansiCyan#032f62
terminal.ansiGreen#165c26
terminal.ansiMagenta#99306f
terminal.ansiRed#9e1c23
terminal.ansiWhite#444d56
terminal.ansiYellow#b08800
terminal.background#f6f3ed
terminal.foreground#586069
textBlockQuote.background#F3F0E8
textBlockQuote.border#e1e4e8
textCodeBlock.background#EFEBE0
textLink.activeForeground#005cc5
textLink.foreground#0366d6
textPreformat.foreground#586069
textSeparator.foreground#d1d5da
titleBar.activeBackground#F8F6F1
titleBar.activeForeground#24292e
titleBar.border#e1e4e8
titleBar.inactiveBackground#EFEBE0
titleBar.inactiveForeground#6a737d
tree.indentGuidesStroke#e1e4e8
welcomePage.buttonBackground#EFEBE0
welcomePage.buttonHoverBackground#e1e4e8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment, string.comment	#6a737d	—
constant, entity.name.constant, variable.other.constant, variable.language, variable.other.normal	#005cc5	—
constant.language	#d15704	—
entity, entity.name	#6f42c1	—
variable.parameter.function	#24292e	—
entity.name.tag	#d15704	—
keyword	#735c0f	—
storage, storage.type	#735c0f	—
storage.modifier.package, storage.modifier.import, storage.type.java	#24292e	—
string, punctuation.definition.string, string punctuation.section.embedded source	#032f62	—
support	#005cc5	—
source.yaml entity.name.tag	#005cc5	—
meta.property-name	#005cc5	—
variable	#044289	—
variable.other	#24292e	—
invalid.broken	#b31d28	italic
invalid.deprecated	#b31d28	italic
invalid.illegal	#b31d28	italic
invalid.unimplemented	#b31d28	italic
carriage-return	#F3F0E8	italic underline
message.error	#b31d28	—
string source	#24292e	—
string variable	#005cc5	—
source.regexp, string.regexp	#032f62	—
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition	#032f62	—
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class.css punctuation.definition.entity.css, entity.other.attribute-name.pseudo-element.css punctuation.definition.entity.css	#735c0f	—
entity.other.attribute-name.id, entity.other.attribute-name.id punctuation.definition.entity	#24292e	—
string.regexp constant.character.escape	#d15704	bold
support.constant	#005cc5	—
support.variable	#005cc5	—
meta.module-reference	#005cc5	—
markup.list	#735c0f	—
markup.heading, markup.heading entity.name	#005cc5	bold
markup.quote	#d15704	—
markup.italic	#24292e	italic
markup.bold	#24292e	bold
markup.raw	#005cc5	—
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted	#b31d28	—
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted	#22863a	—
markup.changed, punctuation.definition.changed	#e36209	—
markup.ignored, markup.untracked	#EFEBE0	—
meta.diff.range	#6f42c1	bold
meta.diff.header	#005cc5	—
meta.separator	#005cc5	bold
meta.output	#005cc5	—
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote	#586069	—
brackethighlighter.unmatched	#b31d28	—
constant.other.reference.link, string.other.link	#032f62	underline
comment, storage.modifier, punctuation.definition.comment, entity.other, variable.language, support.type.vendored, support.constant.vendored, markup.quote, markup.italic, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js, keyword.control.clojure, source.clojure meta.symbol.dynamic, keyword.other.this.cs, keyword.other.base.cs, variable.other.member.c, support.type.core.rust, variable.other.object.property, variable.other.property, source.r meta.function.r keyword.control.r, comment.line.roxygen.r keyword, comment.line.roxygen.r variable.parameter.r, keyword.control.inheritance.coffee, comment.block.documentation.phpdoc.php keyword, keyword.other.array.phpdoc.php, storage.type.modifier, comment.block.javadoc.java keyword, comment.block.javadoc.java variable.parameter.java, keyword.operator.documentation.powershell, variable.other.table.property.lua, storage.type.scala, variable.parameter.function.language.special, comment.block.documentation.scala keyword, comment.block.documentation.scala variable.parameter, support.function.builtin.go, constant.other.symbol.hashkey.ruby, constant.other.symbol.hashkey.ruby punctuation.definition.constant.ruby, constant.other.symbol.ruby, source.vala storage.type.generic, constant.other.table-name, constant.other.placeholder, variable.other.field, keyword.function.go, entity.alias.import.go, source.swift keyword.other.declaration-specifier, support.variable.swift, keyword.other.capture-specifier, text.tex support.function.emph, constant.other.math, support.function.textit, entity.name.footnote, entity.name.function.directive.graphql, source.graphql support.type.enum, source.ocaml entity.name.filename, source.reason entity.name.filename, abstract.definition.fsharp keyword, abstract.definition.fsharp entity, function.anonymous keyword, entity.name.record.field.accessor.elm, support.type.primitive, support.type.builtin, keyword.type.cs, storage.type.built-in, storage.type.primitive, source.python support.type.python, storage.type.core.rust, source.swift support.type, source.go storage.type, storage.type.php, storage.type.function.kotlin, entity.name.type.kotlin, support.type.julia, variable.other.member, keyword.other.import, keyword.package, keyword.import, source.wsd keyword.control.diagram, keyword.language.gherkin.feature.step, source.hlsl storage.type.basic, source.apex keyword.type, sharing.modifier, source.nim storage.type.concrete, meta.preprocessor.pragma.nim, storage.type.integral, entity.name.scope-resolution.function.call, support.class.builtin, comment.block.documentation storage.type.class, source.tf meta.keyword.string, source.tf meta.keyword.number, source.scala entity.name.class, meta.import keyword.control, keyword.control.export, meta.tag.attributes entity.other.attribute-name, text.html entity.other.attribute-name, meta.attribute-selector entity.other.attribute-name	—	italic
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, text.html punctuation.section.embedded, variable.other.c, storage.modifier.lifetime.rust, entity.name.lifetime.rust, source.rust meta.attribute.rust, meta.attribute.id entity.other.attribute-name, keyword.other.fn.rust, source.ocaml punctuation.definition.tag emphasis, source.tf entity.name, comment.block.documentation variable.other	—	italic
keyword.begin.tag.ejs, source.python meta.function.decorator.python support.type.python, source.cs keyword.other, keyword.other.var.cs, source.go keyword, storage.modifier.static.rust, variable.parameter.r, variable.parameter.handlebars, storage.modifier.import, storage.modifier.package, meta.class.identifier storage.modifier, keyword.operator.other.powershell, source.lua storage.type.function, source.css variable.parameter, string.interpolated variable.parameter, source.apacheconf keyword, keyword.other.julia, storage.modifier.using.vala, source.objc keyword.other.property.attribute, source.sql keyword.other, keyword.other.using.vala, keyword.operator.function.infix, keyword.control.directive, keyword.other.rust, keyword.other.declaration-specifier.swift, entity.name.function.swift, keyword.control.function-end.lua, keyword.control.class, keyword.control.def, punctuation.definition.variable, entity.name.section.latex, source.ocaml keyword markup.underline, source.ocaml constant.language constant.numeric entity.other.attribute-name.id.css, source.reason entity.other.attribute-name constant.language constant.numeric, keyword.format.specifier.fsharp, entity.name.section.fsharp, binding.fsharp keyword, binding.fsharp keyword.symbol, record.fsharp keyword, keyword.symbol.fsharp, entity.name.section.fsharp keyword, namespace.open.fsharp keyword, namespace.open.fsharp entity, storage.type, source.cpp keyword.other, source.c keyword.other, keyword.other.unit, storage.modifier.array.bracket, keyword.control.default, meta.import.haskell keyword, keyword.declaration.dart, source.wsd keyword.other, keyword.other.skinparam, source.css keyword.control, source.css keyword.operator, keyword.language.gherkin.feature.scenario, keyword.control.cucumber.table, source.toml entity.other.attribute-name, source.toml keyword, keyword.other.nim, source.nim keyword.other.common.function, source.nim keyword.other, source.scala keyword.declaration, source.scala entity.name.class.declaration, entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class.css punctuation.definition.entity.css, entity.other.attribute-name.pseudo-element.css punctuation.definition.entity.css	—

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}!`;
}