Comfy Monokai Theme

Name: Comfy Monokai Theme
Author: chase chou

Publisher: chase chouThemes in package: 2

A modern, minimal, and eye-friendly VS Code theme.

Open in VS Code GitHub

Color themes

VS Code preview

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

Comfy Monokai Theme — Comfy Monokai

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#252A32
activityBar.border#161b1e
activityBar.dropBackground#2A2F37bf
activityBar.foreground#AEB4BB
activityBarBadge.background#2D5D9A
activityBarBadge.foreground#DDEFF1
badge.background#2D5D9A
badge.foreground#DDEFF1
button.background#2D5D9A
button.foreground#DDEFF1
button.hoverBackground#2D5D9A
debugToolBar.background#1B1D23
diffEditor.insertedTextBackground#00809B33
dropdown.background#2D5D9A
dropdown.border#DDEFF1
dropdown.foreground#DDEFF1
editor.background#252A32
editor.findMatchBackground#2D5D9A60
editor.findMatchBorder#DDEFF160
editor.findMatchHighlightBackground#254D7560
editor.foreground#DDEFF1
editor.inactiveSelectionBackground#2E6FD644
editor.lineHighlightBackground#3A6A9A33
editor.lineHighlightBorder#3A6A9A44
editor.selectionBackground#254D75
editor.selectionForeground#E06C75
editor.selectionHighlightBackground#3A6A9A2E
editor.selectionHighlightBorder#4284EB88
editor.wordHighlightBackground#61AFEF26
editor.wordHighlightBorder#61AFEF4D
editor.wordHighlightStrongBackground#98C3793A
editor.wordHighlightStrongBorder#98C37966
editorBracketMatch.background#515a6b
editorBracketMatch.border#6B7178
editorCodeLens.foreground#6B7178
editorCursor.background#ffffffc9
editorCursor.foreground#4284EB
editorGroup.background#181A1F
editorGroup.border#181A1F
editorGroup.dropBackground#2A2F37bf
editorGroupHeader.noTabsBackground#2A2F37
editorGroupHeader.tabsBackground#2A2F37
editorHoverWidget.background#2A2F37
editorHoverWidget.border#181A1F
editorIndentGuide.background#3C4049
editorInlayHint.foreground#6B7178
editorLineNumber.foreground#6B7178
editorSuggestWidget.background#2A2F37
editorSuggestWidget.border#181A1F
editorSuggestWidget.selectedBackground#2C313A
editorWhitespace.foreground#3C4049
editorWidget.background#2A2F37
errorForeground#E06C75
extensionButton.prominentBackground#2D5D9A
extensionButton.prominentForeground#DDEFF1
focusBorder#4284EB
foreground#DDEFF1
input.background#254D75B3
input.border#3C4049
input.foreground#DDEFF1
input.placeholderForeground#6B7178
inputOption.activeBorder#6B7178
inputValidation.errorBackground#272C33
inputValidation.errorBorder#E06C75
inputValidation.infoBackground#272C33
inputValidation.infoBorder#2D5D9A
inputValidation.warningBackground#272C33
inputValidation.warningBorder#E6DB74
list.activeSelectionBackground#2A578A
list.activeSelectionForeground#DDEFF1
list.dropBackground#2A2F37bf
list.focusBackground#264F78
list.focusForeground#DDEFF1
list.highlightForeground#DDEFF1
list.hoverBackground#244866
list.hoverForeground#DDEFF1
list.inactiveSelectionBackground#264F78
list.inactiveSelectionForeground#ffed72
notification.background#2A2F37
peekView.border#4284EB
peekViewEditor.background#1B1D23
peekViewResult.background#2A2F37
peekViewResult.selectionBackground#2C313A
peekViewTitle.background#1B1D23
pickerGroup.border#4284EB
pickerGroup.foreground#DDEFF1
progressBar.background#3a4449
scrollbar.shadow#272C33
scrollbarSlider.activeBackground#264F787F
scrollbarSlider.background#264F787F
scrollbarSlider.hoverBackground#264F787F
selection.background#254D75B3
sideBar.background#2A2F37
sideBar.border#161b1e
sideBar.foreground#AEB4BB
sideBarSectionHeader.background#252A32
sideBarSectionHeader.foreground#6b7678
sideBarTitle.foreground#6B7178
statusBar.background#2D5D9A
statusBar.foreground#DDEFF1
tab.activeBackground#254D75
tab.activeBorder#DDEFF199
tab.activeBorderTop#4A83E866
tab.activeForeground#DDEFF1
tab.border#181A1F
tab.hoverBackground#254D7588
tab.hoverBorder#3A6A9A
tab.inactiveBackground#1F2A33
tab.inactiveForeground#AEB4BB
tab.unfocusedActiveBackground#254D75
tab.unfocusedActiveBorder#AEB4BB
tab.unfocusedActiveForeground#B8C4C3
tab.unfocusedInactiveBackground#2A2F37
tab.unfocusedInactiveForeground#AEB4BB
terminal.ansiBlack#3A4449DD
terminal.ansiBlue#3B74D4DD
terminal.ansiBrightBlack#3A4449
terminal.ansiBrightBlue#4284EB
terminal.ansiBrightCyan#61AFEF
terminal.ansiBrightGreen#98C379
terminal.ansiBrightMagenta#baa0f8
terminal.ansiBrightRed#E06C75
terminal.ansiBrightWhite#DDEFF1
terminal.ansiBrightYellow#E6DB74
terminal.ansiCyan#4CA5CBDD
terminal.ansiGreen#98C379DD
terminal.ansiMagenta#baa0f8DD
terminal.ansiRed#E06C75DD
terminal.ansiWhite#DDEFF1DD
terminal.ansiYellow#E6DB74DD
terminal.foreground#DDEFF1
titleBar.activeBackground#2A2F37
titleBar.activeForeground#AEB4BB
titleBar.inactiveBackground#2A2F37
titleBar.inactiveForeground#AEB4BB
walkThrough.embeddedEditorBackground#2A2F37
welcomePage.buttonBackground#1B1D23
welcomePage.buttonHoverBackground#AEB4BB
widget.shadow#161b1e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#eeffffff	—
meta.function-call.php, support.function.builtin.rust, support.function.C99, support.function.core.ruby, support.function.go, support.function.js, support.function.log.rust, support.function.magic.php, support.function.std.rust, support.function.builtin.python	#98C379	—
entity.name.function, meta.function-call.generic, meta.function-call.method, support.function.any-method, support.function.misc, variable.function	#98C379	—
comment	#6B7178	—
string	#E6DB74	—
punctuation.definition.template-expression, punctuation.section.embedded.coffee	#E06C75	—
constant.numeric	#baa0f8	—
constant.language	#baa0f8	—
constant.character, constant.other	#baa0f8	—
variable	—
keyword	#E06C75	—
storage	#E06C75
storage.type	#61AFEF	italic
entity.name.class	#98C379	underline
entity.other.inherited-class	#98C379	italic underline
entity.name.function	#98C379
variable.parameter	#FD971F	italic
entity.name.tag	#E06C75
entity.other.attribute-name	#98C379
support.function	#61AFEF
support.constant	#61AFEF
support.type, support.class	#61AFEF	italic
support.other.variable	—
invalid	#F8F8F0
invalid.deprecated	#F8F8F0	—
meta.structure.dictionary.json string.quoted.double.json	#CFCFC2	—
meta.diff, meta.diff.header	#6B7178	—
markup.deleted	#E06C75	—
markup.inserted	#98C379	—
markup.changed	#E6DB74	—
markup.deleted.git_gutter	#E06C75	—
markup.inserted.git_gutter	#98C379	—
markup.changed.git_gutter	#E6DB74	—
markup.ignored.git_gutter	#6B7178	—
markup.untracked.git_gutter	#6B7178	—
constant.numeric.line-number.find-in-files - match	#baa0f8A0	—
entity.name.filename.find-in-files	#E6DB74	—
markup.quote	#F92672	—
markup.list	#E6DB74	—
markup.bold, markup.italic	#61AFEF	—
markup.inline.raw	#FD971F
markup.heading	#98C379	—
markup.heading.setext	#98C379
token.info-token	#6796e6	—
token.warn-token	#cd9731	—
token.error-token	#f44747	—
token.debug-token	#b267e6	—
variable.language	#FD971F	—

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