Coca-Cola Christmas Theme

Name: Coca-Cola Christmas Theme
Author: holiday-themes

Publisher: holiday-themesThemes in package: 2

A festive VS Code theme inspired by classic Coca-Cola Christmas aesthetics - deep winter nights, snow-white text, and warm holiday red accents

Open in VS Code GitHub

Color themes

VS Code preview

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

Coca-Cola Christmas Theme — Coca-Cola Christmas

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.activeBackground#ec1c2420
activityBar.activeBorder#ec1c24
activityBar.background#080808
activityBar.foreground#ffffff
activityBar.inactiveForeground#d0d0d0
activityBarBadge.background#ec1c24
activityBarBadge.foreground#ffffff
badge.background#ec1c24
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#ec1c24
breadcrumb.background#1a1a1a
breadcrumb.focusForeground#ffffff
breadcrumb.foreground#d0d0d0
breadcrumbPicker.background#1a1a1a
button.background#ec1c24
button.foreground#ffffff
button.hoverBackground#ff3333
button.secondaryBackground#1a1a1a
button.secondaryForeground#f2f2f2
button.secondaryHoverBackground#2a2a2a
diffEditor.insertedTextBackground#00640020
diffEditor.removedTextBackground#ec1c2420
dropdown.background#1a1a1a
dropdown.border#ec1c24
dropdown.foreground#ffffff
editor.background#0d0d0d
editor.findMatchBackground#ec1c2460
editor.findMatchHighlightBackground#ec1c2430
editor.findRangeHighlightBackground#ec1c2420
editor.foldBackground#1a1a1a40
editor.foreground#ffffff
editor.hoverHighlightBackground#1a1a1a40
editor.lineHighlightBorder#1a1a1a
editor.rangeHighlightBackground#ec1c2420
editor.selectionBackground#ec1c2430
editor.selectionHighlightBackground#ec1c2420
editor.wordHighlightBackground#ffd70030
editor.wordHighlightStrongBackground#ffd70050
editorBracketHighlight.foreground1#ec1c24
editorBracketHighlight.foreground2#ffd700
editorBracketHighlight.foreground3#006400
editorBracketHighlight.foreground4#e6f0ff
editorBracketHighlight.foreground5#ffffff
editorBracketHighlight.foreground6#f2f2f2
editorBracketHighlight.unexpectedBracket.foreground#ec1c24
editorError.foreground#ec1c24
editorGroup.border#ec1c24
editorGroup.dropBackground#ec1c2420
editorGroupHeader.tabsBackground#080808
editorGutter.addedBackground#006400
editorGutter.deletedBackground#ec1c24
editorGutter.modifiedBackground#ffd700
editorHoverWidget.background#1a1a1a
editorHoverWidget.border#ec1c24
editorInfo.foreground#e6f0ff
editorLineNumber.activeForeground#ec1c24
editorLineNumber.foreground#d0d0d0
editorLink.activeForeground#e6f0ff
editorOverviewRuler.addedForeground#006400
editorOverviewRuler.border#080808
editorOverviewRuler.deletedForeground#ec1c24
editorOverviewRuler.errorForeground#ec1c24
editorOverviewRuler.infoForeground#e6f0ff
editorOverviewRuler.modifiedForeground#ffd700
editorOverviewRuler.selectionHighlightForeground#ec1c2460
editorOverviewRuler.warningForeground#ffd700
editorOverviewRuler.wordHighlightForeground#ffd70060
editorOverviewRuler.wordHighlightStrongForeground#ffd70080
editorSuggestWidget.background#1a1a1a
editorSuggestWidget.foreground#ffffff
editorSuggestWidget.selectedBackground#ec1c2430
editorWarning.foreground#ffd700
editorWidget.background#1a1a1a
editorWidget.border#ec1c24
errorForeground#ec1c24
focusBorder#ec1c24
foreground#ffffff
gitDecoration.conflictingResourceForeground#ec1c24
gitDecoration.deletedResourceForeground#ec1c24
gitDecoration.ignoredResourceForeground#d0d0d0
gitDecoration.modifiedResourceForeground#ffd700
gitDecoration.untrackedResourceForeground#006400
input.background#1a1a1a
input.border#ec1c24
input.foreground#ffffff
input.placeholderForeground#d0d0d0
inputOption.activeBorder#ffd700
inputValidation.errorBorder#ec1c24
inputValidation.infoBorder#e6f0ff
inputValidation.warningBorder#ffd700
list.activeSelectionBackground#ec1c2430
list.activeSelectionForeground#ffffff
list.dropBackground#ec1c2420
list.errorForeground#ec1c24
list.focusBackground#ec1c2420
list.highlightForeground#ec1c24
list.hoverBackground#1a1a1a
list.inactiveSelectionBackground#1a1a1a
list.warningForeground#ffd700
panel.background#1a1a1a
panel.border#ec1c24
panelTitle.activeBorder#ec1c24
panelTitle.activeForeground#ffffff
panelTitle.inactiveForeground#d0d0d0
progressBar.background#ec1c24
selection.background#ec1c2440
settings.checkboxBackground#1a1a1a
settings.checkboxBorder#ec1c24
settings.checkboxForeground#ffffff
settings.dropdownBackground#1a1a1a
settings.dropdownBorder#ec1c24
settings.dropdownForeground#ffffff
settings.headerForeground#ffffff
settings.modifiedItemIndicator#ec1c24
settings.numberInputBackground#1a1a1a
settings.numberInputBorder#ec1c24
settings.numberInputForeground#ffffff
settings.textInputBackground#1a1a1a
settings.textInputBorder#ec1c24
settings.textInputForeground#ffffff
sideBar.background#1a1a1a
sideBarSectionHeader.background#080808
sideBarSectionHeader.border#ec1c24
sideBarTitle.foreground#ffffff
statusBar.background#080808
statusBar.debuggingBackground#ec1c24
statusBar.debuggingForeground#ffffff
statusBar.foreground#ffffff
statusBar.noFolderBackground#080808
statusBar.noFolderForeground#d0d0d0
statusBarItem.prominentBackground#ec1c24
statusBarItem.prominentHoverBackground#ff3333
statusBarItem.remoteBackground#006400
statusBarItem.remoteForeground#ffffff
tab.activeBackground#0d0d0d
tab.activeBorderTop#ec1c24
tab.activeForeground#ffffff
tab.border#080808
tab.inactiveBackground#1a1a1a
tab.inactiveForeground#d0d0d0
terminal.ansiBlack#080808
terminal.ansiBlue#e6f0ff
terminal.ansiBrightBlack#1a1a1a
terminal.ansiBrightBlue#f0f8ff
terminal.ansiBrightCyan#f0f8ff
terminal.ansiBrightGreen#228b22
terminal.ansiBrightMagenta#ff4d4d
terminal.ansiBrightRed#ff3333
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#ffed4e
terminal.ansiCyan#e6f0ff
terminal.ansiGreen#006400
terminal.ansiMagenta#ec1c24
terminal.ansiRed#ec1c24
terminal.ansiWhite#ffffff
terminal.ansiYellow#ffd700
terminal.background#0d0d0d
terminal.foreground#ffffff
titleBar.activeBackground#080808
titleBar.activeForeground#ffffff
titleBar.inactiveBackground#1a1a1a
titleBar.inactiveForeground#d0d0d0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
emphasis	—	italic
strong	—	bold
header	#ec1c24	bold
comment, punctuation.definition.comment	#d0d0d0	italic
comment keyword.codetag.notation, comment.block.documentation keyword	#ffd700	italic
string	#006400	—
punctuation.definition.string.begin, punctuation.definition.string.end	#228b22	—
constant, variable.other.constant	#ffd700	—
constant.numeric	#ffed4e	—
keyword, storage.type, storage.modifier	#ec1c24	bold
entity.name.function, meta.function-call	#e6f0ff	—
variable.parameter	#f2f2f2	italic
entity.name.type.class, entity.name.class	#ffd700	bold
entity.name.type, storage.type	#e6f0ff	italic
variable	#ffffff	—
variable.language	#ec1c24	italic
entity.name.tag	#ec1c24	—
entity.other.attribute-name	#ffd700	italic
meta.selector	#ec1c24	—
support.type.property-name	#e6f0ff	—
keyword.operator	#ec1c24	—
punctuation	#f2f2f2	—
string.regexp	#006400	—
markup.heading	#ec1c24	bold
markup.bold	#ffffff	bold
markup.italic	#f2f2f2	italic
markup.underline.link	#e6f0ff	—
markup.inline.raw	#006400	—
invalid	#ec1c24	underline
invalid.deprecated	#d0d0d0	strikethrough

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