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 Modern

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.

actionBar.toggledBackground#383a49
activityBar.activeBorder#0078D4
activityBar.background#181818
activityBar.border#2B2B2B
activityBar.foreground#D7D7D7
activityBar.inactiveForeground#868686
activityBarBadge.background#0078D4
activityBarBadge.foreground#FFFFFF
badge.background#616161
badge.foreground#F8F8F8
button.background#0078D4
button.border#FFFFFF12
button.foreground#FFFFFF
button.hoverBackground#026EC1
button.secondaryBackground#313131
button.secondaryForeground#CCCCCC
button.secondaryHoverBackground#3C3C3C
chat.editedFileForeground#E2C08D
chat.slashCommandBackground#34414B
chat.slashCommandForeground#40A6FF
checkbox.background#313131
checkbox.border#3C3C3C
debugToolBar.background#181818
descriptionForeground#9D9D9D
dropdown.background#313131
dropdown.border#3C3C3C
dropdown.foreground#CCCCCC
dropdown.listBackground#1F1F1F
editor.background#1F1F1F
editor.findMatchBackground#9E6A03
editor.foreground#CCCCCC
editor.inactiveSelectionBackground#3A3D41
editor.selectionHighlightBackground#ADD6FF26
editorGroup.border#FFFFFF17
editorGroupHeader.tabsBackground#181818
editorGroupHeader.tabsBorder#2B2B2B
editorGutter.addedBackground#2EA043
editorGutter.deletedBackground#F85149
editorGutter.modifiedBackground#0078D4
editorIndentGuide.activeBackground1#707070
editorIndentGuide.background1#404040
editorLineNumber.activeForeground#CCCCCC
editorLineNumber.foreground#6E7681
editorOverviewRuler.border#010409
editorWidget.background#202020
errorForeground#F85149
focusBorder#0078D4
foreground#CCCCCC
icon.foreground#CCCCCC
input.background#313131
input.border#3C3C3C
input.foreground#CCCCCC
input.placeholderForeground#989898
inputOption.activeBackground#2489DB82
inputOption.activeBorder#2488DB
keybindingLabel.foreground#CCCCCC
list.activeSelectionIconForeground#FFF
list.dropBackground#383B3D
menu.background#1F1F1F
menu.border#454545
menu.foreground#CCCCCC
menu.selectionBackground#0078d4
menu.separatorBackground#454545
notificationCenterHeader.background#1F1F1F
notificationCenterHeader.foreground#CCCCCC
notifications.background#1F1F1F
notifications.border#2B2B2B
notifications.foreground#CCCCCC
panel.background#181818
panel.border#2B2B2B
panelInput.border#2B2B2B
panelTitle.activeBorder#0078D4
panelTitle.activeForeground#CCCCCC
panelTitle.inactiveForeground#9D9D9D
peekViewEditor.background#1F1F1F
peekViewEditor.matchHighlightBackground#BB800966
peekViewResult.background#1F1F1F
peekViewResult.matchHighlightBackground#BB800966
pickerGroup.border#3C3C3C
ports.iconRunningProcessForeground#369432
progressBar.background#0078D4
quickInput.background#222222
quickInput.foreground#CCCCCC
settings.dropdownBackground#313131
settings.dropdownBorder#3C3C3C
settings.headerForeground#FFFFFF
settings.modifiedItemIndicator#BB800966
sideBar.background#181818
sideBar.border#2B2B2B
sideBar.foreground#CCCCCC
sideBarSectionHeader.background#181818
sideBarSectionHeader.border#2B2B2B
sideBarSectionHeader.foreground#CCCCCC
sideBarTitle.foreground#CCCCCC
statusBar.background#181818
statusBar.border#2B2B2B
statusBar.debuggingBackground#0078D4
statusBar.debuggingForeground#FFFFFF
statusBar.focusBorder#0078D4
statusBar.foreground#CCCCCC
statusBar.noFolderBackground#1F1F1F
statusBarItem.focusBorder#0078D4
statusBarItem.prominentBackground#6E768166
statusBarItem.remoteBackground#0078D4
statusBarItem.remoteForeground#FFFFFF
tab.activeBackground#1F1F1F
tab.activeBorder#1F1F1F
tab.activeBorderTop#0078D4
tab.activeForeground#FFFFFF
tab.border#2B2B2B
tab.hoverBackground#1F1F1F
tab.inactiveBackground#181818
tab.inactiveForeground#9D9D9D
tab.lastPinnedBorder#ccc3
tab.selectedBackground#222222
tab.selectedBorderTop#6caddf
tab.selectedForeground#ffffffa0
tab.unfocusedActiveBorder#1F1F1F
tab.unfocusedActiveBorderTop#2B2B2B
tab.unfocusedHoverBackground#1F1F1F
terminal.foreground#CCCCCC
terminal.inactiveSelectionBackground#3A3D41
terminal.tab.activeBorder#0078D4
textBlockQuote.background#2B2B2B
textBlockQuote.border#616161
textCodeBlock.background#2B2B2B
textLink.activeForeground#4daafc
textLink.foreground#4daafc
textPreformat.background#3C3C3C
textPreformat.foreground#D0D0D0
textSeparator.foreground#21262D
titleBar.activeBackground#181818
titleBar.activeForeground#CCCCCC
titleBar.border#2B2B2B
titleBar.inactiveBackground#1F1F1F
titleBar.inactiveForeground#9D9D9D
welcomePage.progress.foreground#0078D4
welcomePage.tileBackground#2B2B2B
widget.border#313131

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