Christmas Theme

Name: Christmas Theme
Author: SATYAM ROY

Publisher: SATYAM ROYThemes in package: 1

Want to decorate your VS-code for Christmas?? Try this out!! And Merry Christmas from India.

Open in VS Code GitHub

VS Code preview

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

Christmas Theme — Christmas Theme

fetchUser.ts

index.ts

README.md

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#140721
activityBar.dropBackground#1abc9c80
activityBar.foreground#ffbe0a
activityBarBadge.background#2f00ff
activityBarBadge.foreground#ffffff
badge.background#1abc9c
badge.foreground#ffffff
breadcrumb.focusForeground#fbff03
breadcrumb.foreground#ff057a
breadcrumbPicker.background#140721
button.background#ff057a
button.foreground#ffffff
button.secondaryBackground#ff057a
debugToolBar.background#1c092e
dropdown.background#200b34
dropdown.border#ff057a
editor.background#140721
editor.foreground#FFFFFF
editor.lineHighlightBorder#FFFFFF1a
editor.rangeHighlightBackground#FFFFFF0d
editor.selectionBackground#212363
editor.selectionHighlightBackground#100666
editorCursor.foreground//#region FFFF33
editorGroup.dropBackground#ff057a
editorGroup.focusedEmptyBorder#1abc9c
editorGroupHeader.tabsBackground#180827
editorHoverWidget.background#180827
editorLineNumber.activeForeground#1abc9c
editorLineNumber.foreground#FFFFFF4d
editorLink.activeForeground#c4ff2e
editorMarkerNavigation.background#180827
editorWidget.background#180827
entity.name.tag#800b36
extensionButton.prominentBackground#ff057a
extensionButton.prominentForeground#000000
focusBorder#fbff03
foreground#FFFFFF
gitDecoration.addedResourceForeground#f5ef4c
input.background#200b34
inputOption.activeBackground#270a4a
inputOption.activeBorder#000000
list.activeSelectionBackground#ff005d
list.activeSelectionForeground#FFFFFF
list.dropBackground#1abc9c80
list.focusBackground#140721
list.focusForeground#FFFFFF
list.highlightForeground#1abc9c
list.hoverBackground#FFFFFF1a
list.inactiveSelectionBackground#FFFFFF33
meta.definition.method entity.name.function#69ff8c
notificationCenterHeader.foreground#ff057a
notifications.background#0e041a
panel.background#140721
panel.border#fbff03
panelTitle.activeBorder#FFFFFF80
panelTitle.activeForeground#ffc800
panelTitle.inactiveForeground#FFFFFF80
peekView.border#1abc9c
peekViewEditor.background#140721
peekViewResult.background#180827
peekViewTitle.background#140721
pickerGroup.border#FFFFFF1a
progressBar.background#ff057a
scrollbar.shadow#1abc9c
scrollbarSlider.hoverBackground#fbff03
selection.background#1abc9c
sideBar.background#0e041a
sideBar.border#270a4a
sideBar.foreground#ffbe0a
sideBarSectionHeader.background#1c092e
statusBar.background#f24e30
statusBar.debuggingBackground#1abc9c
statusBar.debuggingForeground#ffffff
statusBar.noFolderBackground#10051a
statusBarItem.activeBackground#1abc9c80
statusBarItem.hoverBackground#cf7d0a
statusBarItem.remoteBackground#1abc9c
statusBarItem.remoteForeground#ffffff
tab.activeBorder#fbff03
tab.activeModifiedBorder#1abc9c
tab.border#00000033
tab.hoverForeground#beff57
tab.inactiveBackground#1c092e
tab.inactiveModifiedBorder#0f705d
tab.unfocusedActiveModifiedBorder#14967c
tab.unfocusedInactiveModifiedBorder#0f705d
terminal.ansiBlack#000000
terminal.ansiBrightBlue#000000
terminal.background#140721
terminal.foreground#3ac906
titleBar.activeBackground#140721
welcomePage.buttonHoverBackground#ff057a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
Global settings	#FFFFFF	—
string	#f74f4f	—
constant.character.escape, text.html constant.character.entity.named, punctuation.definition.entity.html	#ff7676	—
constant.language.boolean	#4e0ddb	—
constant.numeric	#FFFF33	—
variable, support.variable, support.class, support.constant, meta.definition.variable entity.name.function	#27ffea	—
keyword, modifier, variable.language.this, support.type.object, constant.language	#f70596	—
entity.name.function, support.function	#FFFF33	—
storage.type, storage.modifier	#eb8059	—
support.module, support.node	#27ffea	italic
support.type	#55FF55	—
entity.name.type, entity.other.inherited-class	#55FF55	—
comment	#3c1563	italic
entity.name.type.class	#f065c4	underline
variable.object.property, meta.field.declaration entity.name.function	#55FF55	—
meta.definition.method entity.name.function	#55FF55	—
meta.function entity.name.function	#55FF55	—
template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end	#f70596	—
meta.embedded, source.groovy.embedded, meta.template.expression	#FFFFFF	—
entity.name.tag.yaml	#27ffea	—
modifier	#ff7086	—
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json	#27ffea	—
constant.language.json	#f70596	—
entity.other.attribute-name.class	#1abc9c	—
entity.other.attribute-name.id	#f065c4	—
source.css entity.name.tag	#ffcb7d	—
meta.tag, punctuation.definition.tag	#f70596	—
entity.name.tag	#27ffea	—
entity.other.attribute-name	#FFFF33	—
markup.heading	#f70596	—
text.html.markdown meta.link.inline, meta.link.reference	#27ffea	—
text.html.markdown beginning.punctuation.definition.list	#f70596	—
markup.italic	#27ffea	italic
markup.bold	#27ffea	bold
markup.bold markup.italic, markup.italic markup.bold	#27ffea	italic bold
markup.fenced_code.block.markdown punctuation.definition.markdown	#f74f4f	—
markup.inline.raw.string.markdown	#f74f4f	—
keyword.other.definition.ini	#27ffea	—
entity.name.section.group-title.ini	#f70596	—
source.cs meta.class.identifier storage.type	#f065c4	underline
source.cs meta.method.identifier entity.name.function	#55FF55	—
source.cs meta.method-call meta.method, source.cs entity.name.function	#FFFF33	—
source.cs storage.type	#55FF55	—
source.cs meta.method.return-type	#55FF55	—
source.cs meta.preprocessor	#3c1563	—
source.cs entity.name.type.namespace	#FFFFFF	—
Global settings	#FFFFFF	—

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