Morning Coffee Theme

Name: Morning Coffee Theme
Author: Nicholas Prieto

Publisher: Nicholas PrietoThemes in package: 1

☕ A light, readable, and community-driven theme for VS Code.

Open in VS Code GitHub

VS Code preview

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

Morning Coffee Theme — Morning Coffee Theme

fetchUser.ts

index.ts

README.md

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#e8e8e8
activityBar.border#e8e8e8
activityBar.foreground#808080
activityBarBadge.background#e8e8e8
activityBarBadge.foreground#000000
badge.background#808080
badge.foreground#e8e8e8
button.background#808080
button.foreground#e8e8e8
button.hoverBackground#a0a0a0
dropdown.background#e8e8e8
dropdown.border#e0e0e0
dropdown.foreground#808080
dropdown.listBackground#e8e8e8
editor.background#e8e8e8
editor.foreground#404040
editor.lineHighlightBackground#eeeeee
editor.selectionBackground#c0c0c080
editor.selectionForeground#000000
editorCursor.background#e8e8e8
editorCursor.foreground#000000
editorGroup.border#e8e8e8
editorGroup.dropBackground#f0f0f0
editorGroup.emptyBackground#e8e8e8
editorGroupHeader.noTabsBackground#e8e8e8
editorGroupHeader.tabsBackground#e8e8e8
editorGroupHeader.tabsBorder#e8e8e8
editorLineNumber.activeForeground#404040
editorLineNumber.foreground#c0c0c0
editorSuggestWidget.selectedBackground#00800015
focusBorder#00000000
input.background#e8e8e8
input.border#e0e0e0
input.foreground#808080
input.placeholderForeground#c0c0c0
inputOption.activeBorder#e0e0e0
list.activeSelectionBackground#eeeeee
list.activeSelectionForeground#000000
list.dropBackground#e8e8e8
list.focusBackground#00800015
list.focusForeground#000000
list.highlightForeground#000000
list.hoverBackground#00800015
list.hoverForeground#000000
list.inactiveFocusBackground#e8e8e8
list.inactiveSelectionBackground#dadada
list.inactiveSelectionForeground#000000
menu.background#f0f0f0
menu.foreground#808080
menu.selectionBackground#f0f0f0
menu.selectionBorder#f0f0f0
menu.selectionForeground#000000
menubar.selectionBackground#e8e8e8
menubar.selectionBorder#e8e8e8
menubar.selectionForeground#000000
notificationCenter.border#e0e0e0
notificationCenterHeader.background#e0e0e0
notificationCenterHeader.foreground#000000
notificationLink.foreground#0451a5
notifications.background#f0f0f0
notifications.border#e0e0e0
notifications.foreground#808080
notificationToast.border#e0e0e0
panel.background#e8e8e8
panel.border#000000
panelTitle.activeBorder#000000
panelTitle.activeForeground#000000
panelTitle.inactiveForeground#808080
peekView.border#e0e0e0
peekViewEditor.background#f0f0f0
peekViewEditor.matchHighlightBackground#00000000
peekViewResult.background#f0f0f0
peekViewResult.fileForeground#808080
peekViewResult.lineForeground#808080
peekViewResult.matchHighlightBackground#f0f0f0
peekViewResult.selectionBackground#f0f0f0
peekViewResult.selectionForeground#808080
peekViewTitle.background#f0f0f0
peekViewTitleDescription.foreground#808080
peekViewTitleLabel.foreground#000000
progressBar.background#808080
scrollbar.shadow#00000000
scrollbarSlider.activeBackground#c0c0c080
scrollbarSlider.background#c0c0c0c0
scrollbarSlider.hoverBackground#c0c0c080
sideBar.background#e8e8e8
sideBar.border#e8e8e8
sideBar.dropBackground#e8e8e8
sideBar.foreground#808080
sideBarSectionHeader.background#e8e8e8
sideBarSectionHeader.foreground#606060
sideBarTitle.foreground#000000
statusBar.background#e8e8e8
statusBar.border#000000
statusBar.debuggingBackground#e8e8e8
statusBar.debuggingForeground#404040
statusBar.foreground#404040
statusBar.noFolderBackground#e8e8e8
statusBar.noFolderForeground#404040
statusBarItem.activeBackground#080808
statusBarItem.hoverBackground#00800015
statusBarItem.prominentBackground#080808
statusBarItem.prominentHoverBackground#000000
tab.activeBackground#e8e8e8
tab.activeBorder#e8e8e8
tab.activeBorderTop#000000
tab.activeForeground#000000
tab.border#e8e8e8
tab.hoverBackground#e8e8e8
tab.hoverBorder#e8e8e8
tab.inactiveBackground#e8e8e8
tab.inactiveForeground#808080
tab.unfocusedActiveBorder#e8e8e8
tab.unfocusedActiveBorderTop#e8e8e8
tab.unfocusedActiveForeground#000000
tab.unfocusedHoverBackground#e8e8e8
tab.unfocusedHoverBorder#e8e8e8
tab.unfocusedInactiveForeground#808080
terminal.ansiBlack#808080
terminal.ansiBlue#0451a5
terminal.ansiBrightBlack#808080
terminal.ansiBrightBlue#0451a5
terminal.ansiBrightCyan#60bfbf
terminal.ansiBrightGreen#008000
terminal.ansiBrightMagenta#f280d0
terminal.ansiBrightRed#a31515
terminal.ansiBrightWhite#f0f0f0
terminal.ansiBrightYellow#bf8b00
terminal.ansiCyan#0451a5
terminal.ansiGreen#008000
terminal.ansiMagenta#f280d0
terminal.ansiRed#a31515
terminal.ansiWhite#f0f0f0
terminal.ansiYellow#bf8b00
terminal.foreground#404040
textLink.activeForeground#000000
textLink.foreground#0451a5
titleBar.activeBackground#e8e8e8
titleBar.activeForeground#808080
titleBar.border#e8e8e8
titleBar.inactiveBackground#e8e8e8
titleBar.inactiveForeground#808080
widget.shadow#00000040

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#C0C0C0	—
punctuation.definition.tag, entity.name.tag, variable.language, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.class, keyword.other.important, storage	#0451A5	—
string, support.constant	#A31515	—
support.type, support.class, support.variable, support.function, markup.underline.link	#008000	—
punctuation.section.embedded, meta.object-literal.key punctuation.separator.key-value	#404040	—
entity, meta.object-literal.key	#BF8B00	—
constant.language, constant.other	#E67E00	—
constant.numeric	#8c08c5	—
punctuation.definition.heading.markdown	#cccccc	—
comment	#A9A9A9	—
punctuation.definition.comment	#A9A9A9	—
entity.name.function	#008000	—
keyword.other.sql, keyword.other.DDL.create.II.sql, keyword.other.alias.sql, keyword.other.DML.sql, constant.character.escape.json, storage.type.sql, support.function.aggregate.sql, support.function.expression.sql	#007ACC	—
source.sql	#404040	—
constant.other.database-name.sql	#008000	—
constant.other.table-name.sql	#008000	—
support.function	#008000	—
entity.name.function.c	#008000	—
punctuation.definition.list.begin.markdown	#008000	—
punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.definition.string.begin, punctuation.separator, punctuation.support.type.property-name.begin.json.comments, punctuation.support.type.property-name.end.json.comments, keyword.operator.assignment.js, punctuation.definition.tag.end.js, punctuation.definition.tag.begin.js, punctuation.terminator.statement.js, punctuation.definition.string.template.begin.js, punctuation.definition.string.template.end.js	#A0A0A0	—
punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.end.js	#007ACC	—
token.info-token	#316BCD	—
token.warn-token	#CD9731	—
token.error-token	#CD3131	—
token.debug-token	#800080	—

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