Shimmer Theme

Name: Shimmer Theme
Author: Nian

Publisher: NianThemes in package: 17

A theme may be comfortable

GitHub

Color themes

VS Code preview

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

Shimmer Theme — Shimmer Theme Dark Melancholy

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

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...
~/my-project

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#2a2b2a
activityBar.dropBorder#4a4b4a99
activityBar.foreground#9a77ff
activityBar.inactiveForeground#9a9b9a
activityBarBadge.background#8565ff
activityBarBadge.foreground#ffe7ff
activityBarTop.activeBorder#8565ff
activityBarTop.dropBorder#4a4b4a99
activityBarTop.foreground#9a77ff
activityBarTop.inactiveForeground#9a9b9a
badge.background#8565ff
badge.foreground#ffe7ff
breadcrumb.focusForeground#a581ff
button.background#8565ff
button.border#00000000
button.foreground#ffe7ff
button.hoverBackground#7759f1
button.secondaryBackground#5a5b5a
button.secondaryForeground#babbba
contrastActiveBorder#00000000
contrastBorder#3a3b3a
debugToolBar.background#3a3b3a
dropdown.foreground#aaabaa
dropdown.listBackground#3a3b3a
editor.background#2a2b2a
editor.foreground#aaabaa
editor.lineHighlightBorder#00000000
editor.selectionBackground#aaabaa4d
editor.selectionHighlightBackground#aaabaa33
editor.wordHighlightStrongBackground#aaabaa4d
editorCursor.foreground#aaabaa
editorGroup.dropBackground#4a4b4a5c
editorGroupHeader.tabsBackground#2a2b2a
editorGroupHeader.tabsBorder#3a3b3a
editorLineNumber.activeForeground#9a9b9a
editorLineNumber.foreground#5a5b5a
editorSuggestWidget.focusHighlightForeground#aa85ff
editorSuggestWidget.highlightForeground#8565ff
editorSuggestWidget.selectedForeground#cacbca
editorWidget.background#3a3b3a
editorWidget.border#4a4b4a
focusBorder#00000000
foreground#aaabaa
icon.foreground#aaabaa
input.background#4a4b4a
input.foreground#babbba
input.placeholderForeground#9a9b9a
inputOption.activeBackground#8565ff
inputOption.activeBorder#00000000
inputOption.activeForeground#ffe7ff
inputOption.hoverBackground#6a6b6a
keybindingLabel.background#4a4b4a
keybindingLabel.border#00000000
keybindingLabel.bottomBorder#00000000
keybindingLabel.foreground#aaabaa
list.activeSelectionBackground#4a4b4a
list.activeSelectionForeground#aaabaa
list.dropBackground#4a4b4a99
list.dropBetweenBackground#5a5b5a
list.hoverBackground#4a4b4a99
list.inactiveSelectionBackground#4a4b4a99
menu.background#3a3b3a
menu.border#4a4b4a
menu.foreground#aaabaa
menu.selectionBackground#4a4b4a
menu.separatorBackground#4a4b4a
notifications.background#3a3b3a
panel.background#2a2b2a
panel.border#3a3b3a
panel.dropBorder#5a5b5a
panelTitle.activeBorder#9a77ff
panelTitle.activeForeground#9a77ff
panelTitle.inactiveForeground#aaabaa
peekView.border#4a4b4a
peekViewEditor.background#3a3b3a
peekViewResult.background#3a3b3a
peekViewResult.fileForeground#aaabaa
peekViewResult.selectionBackground#4a4b4a
peekViewResult.selectionForeground#aaabaa
peekViewTitle.background#3a3b3a
peekViewTitleLabel.foreground#8565ff
progressBar.background#8565ff
scrollbar.shadow#00000000
scrollbarSlider.activeBackground#5a5b5a
scrollbarSlider.background#4a4b4a
scrollbarSlider.hoverBackground#5a5b5a
selection.background#6a6b6a
settings.checkboxBackground#4a4b4a
settings.dropdownBackground#4a4b4a
settings.dropdownBorder#4a4b4a
settings.focusedRowBackground#3a3b3a
settings.headerForeground#babbba
settings.rowHoverBackground#3a3b3a99
sideBar.background#2a2b2a
sideBarActivityBarTop.border#3a3b3a
sideBarSectionHeader.background#3a3b3a
sideBarSectionHeader.border#4a4b4a
statusBar.background#2a2b2a
statusBar.debuggingBackground#2a2b2a
statusBar.debuggingForeground#aaabaa
statusBar.focusBorder#3a3b3a
statusBar.foreground#aaabaa
statusBar.noFolderBackground#2a2b2a
statusBar.noFolderForeground#aaabaa
statusBarItem.hoverBackground#4a4b4a99
statusBarItem.prominentBackground#4a4b4a99
statusBarItem.remoteHoverBackground#7a5cf4
statusBarItem.remoteHoverForeground#ffe7ff
tab.activeBackground#8565ff14
tab.activeBorderTop#8565ff
tab.activeForeground#aaabaa
tab.border#3a3b3a
tab.dragAndDropBorder#5a5b5a
tab.inactiveBackground#00000000
tab.inactiveForeground#9a9b9a
terminal.foreground#aaabaa
titleBar.activeBackground#2a2b2a
titleBar.activeForeground#aaabaa
titleBar.border#3a3b3a
toolbar.hoverBackground#4a4b4a99
widget.border#4a4b4a
widget.shadow#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment, variable.other.link.underline.jsdoc	#6a6b6a	—
string, meta.embedded.assembly, constant.other.color.rgb-value, support.constant.font-name, variable.parameter.url, source.python string.quoted.docstring.multi.python keyword.control.flow.python, meta.attribute-selector.scss, meta.at-rule.include.scss support.constant.mathematical-symbols.scss, meta.at-rule.include.scss keyword.operator.scss, meta.at-rule.include.scss, meta.at-rule.each.scss, meta.at-rule.each.scss keyword.operator.css, meta.at-rule.each.scss support.constant.mathematical-symbols.scss, meta.property-name.scss, source.rust entity.name.type.primitive.rust	#1aa38f	—
keyword - keyword.operator, keyword.control, storage, storage.type, source.c keyword.other.typedef.c, source.cpp keyword.other.using.directive.cpp, source.cpp keyword.other.typedef.cpp, source.cpp keyword.operator.sizeof.cpp, keyword.operator.logical.and.media, keyword.other.important, keyword.other.important punctuation.separator, keyword.operator.gradient, invalid.deprecated.function, source.go keyword, source.go keyword, constant.language, keyword.operator.expression, keyword.operator.new, meta.class meta.method.declaration entity.name.type.module, meta.class meta.method.declaration support.type.builtin, entity.name.label, keyword.operator.logic.media.less, text.html.markdown constant.character.escape.markdown, text.html.markdown punctuation.definition.math, source.python keyword.operator.logical, meta.at-rule.mixin.scss, meta.at-rule.if.scss, keyword.other.default.scss	#c27cb3	—
constant.numeric, source.cpp keyword.other.unit, constant.language.infinity, constant.language.nan, text.html.markdown punctuation.definition.list.begin.markdown, text.html.markdown constant.other.reference.link.markdown, meta.at-rule.keyframes.scss entity.other.attribute-name.scss, support.constant.vendored.property-value.scss, source.rust entity.name.type.numeric.rust	#62a193	—
entity.name.function, support.function, meta.function.gradient.invalid.deprecated.gradient, source.python meta.function-call.generic.python	#8d85f0	—
variable, entity.name.variable, entity.other.attribute-name.class, entity.other.attribute-name.id, entity.other.attribute-name.placeholder, entity.other.attribute-name.parent-selector-suffix punctuation.definition.entity, support.type.object.module, text.html.markdown punctuation.definition.raw.markdown, text.html.markdown markup.inline.raw.string.markdown, source.python support.variable.magic.python, source.python meta.indexed-name.python, source.css.scss entity.other.attribute-name.parent-selector-suffix.css punctuation.definition.entity.css	#a980cd	—
punctuation, meta.brace, keyword.operator, storage.type.function.arrow, constant.language.import-export-all, entity.name.function.operator.member.cpp, entity.name.function.operator.cpp, source.cpp storage.modifier.reference.cpp, source.cpp storage.modifier.pointer.cpp, punctuation.definition.entity.css, punctuation.definition.entity.begin.bracket.square.css, punctuation.definition.entity.end.bracket.square.css, entity.other.attribute-name.attribute.css, variable.parameter.misc.css, entity.other.attribute-name, invalid.illegal.character-not-allowed-here.html, invalid.deprecated.entity.other.attribute-name.html, punctuation.definition.entity.less, source.python constant.other.ellipsis.python, source.python constant.character.format.placeholder.other.python, entity.name.tag.reference.scss, meta.property-list.scss, source.dart	#8a8b8a	—
source.c, source.cpp, source.css, source.go, text.html.derivative, meta.jsx.children, source.css.less, text.html.markdown, meta.paragraph.markdown, source.python, source.css.scss, source.rust	#9a9b9a	—
source.c keyword.operator.sizeof.c, source.c storage.type.class.doxygen.c, support.constant.media, variable.parameter.keyframe-list, storage.type.class.jsdoc, support.constant.media.less, text.html.markdown punctuation.definition.markdown, text.html.markdown fenced_code.block.language.markdown, text.html.markdown fenced_code.block.language, meta.at-rule.extend.scss, source.rust entity.name.namespace.rust	#c28455	—
source.c constant.character.escape.line-continuation.c, meta.at-rule.keyframes.body, meta.attribute-selector entity.other.attribute-name, punctuation.definition.entity, constant.character.entity, text.html.markdown meta.separator.markdown, source.python constant.character.escape.python	#80a341	—
source.c meta.parens.block.c, source.cpp keyword.operator.cast, meta.at-rule.header, meta.at-rule.import, meta.at-rule.else, text.html.markdown markup.underline.link.markdown, text.html.markdown markup.underline.link.image.markdown	#389fad	—
support.type.property-name, support.type.property-name.media, meta.at-rule.media.header, meta.property-name, variable.other.property, variable.other.object.property, support.variable.property, meta.object-literal.key, support.type.property-name.json, text.html.markdown punctuation.definition.quote.begin.markdown, text.html.markdown markup.quote.markdown meta.paragraph.markdown, source.python meta.attribute.python, meta.at-rule.media.scss, meta.definition.variable.scss, source.rust meta.function.call.rust	#689fc8	—
support.constant.color.w3c-standard-color-name.css, support.constant.property-value, meta.property-value, source.go variable.parameter.go, variable.other.jsdoc, support.constant.color.w3c-special-color-keyword.less	#ba9959	—
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class, source.go storage.type, source.go entity.name.type.any.go, entity.name.type.instance.jsdoc, support.constant.mathematical-symbols.scss, meta.property-value.scss, support.type.builtin.ts, support.type.primitive.ts, support.type.ts, meta.type.annotation.ts, meta.type.parameters.ts, meta.return.type.ts, meta.type.function.return.ts, entity.name.type.ts, entity.name.type.alias.ts, entity.name.type.module.ts, support.type.builtin.tsx, support.type.primitive.tsx, meta.type.parameters.tsx, entity.name.type.tsx, entity.other.inherited-class.tsx, entity.name.type.module.tsx, source.rust entity.name.type.rust	#bf8286	—
support.constant.parity, text.html.markdown meta.embedded.math.markdown, source.python support.type.metaclass.python, support.class.ts, entity.other.inherited-class.ts, entity.name.type.class.ts, entity.name.type.class.tsx, entity.other.inherited-class.tsx, source.rust constant.other.caps.rust, support.class.dart	#4495eb	—
variable.argument.css, variable.css, source.go entity.name.type.go, support.other.variable.less, text.html.markdown punctuation.definition.link.description, text.html.markdown punctuation.definition.metadata.markdown, text.html.markdown punctuation.definition.link.title, text.html.markdown meta.link.reference.def.markdown punctuation.definition.constant.markdown, text.html.markdown punctuation.definition.link.markdown, text.html.markdown punctuation.definition.constant, variable.scss	#6ca371	—
source.go entity.name.type.package.go, text.html.derivative meta.tag, entity.name.tag, source.rust entity.name.type.lifetime.rust	#d97189	—
support.class.component	#149eca	—
text.html.markdown punctuation.definition.heading.markdown, text.html.markdown entity.name.section.markdown	#8d85f0	bold
text.html.markdown punctuation.definition.bold.markdown, text.html.markdown markup.bold.markdown	#ba9959	bold
text.html.markdown punctuation.definition.italic.markdown, text.html.markdown markup.italic.markdown	#bf8286	italic
text.html.markdown punctuation.definition.strikethrough.markdown, text.html.markdown markup.strikethrough.markdown	#7a7b7a	strikethrough
text.html.markdown punctuation.separator.table.markdown, text.html.markdown punctuation.definition.table.markdown, support.class.component.vue	#5aab81	—

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