Envy Color Theme

Name: Envy Color Theme
Author: dullptr

Publisher: dullptrThemes in package: 1

A Dark Color theme for Microsft's Visual Studio Code

Open in VS Code GitHub

VS Code preview

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

Envy Color Theme — Envy

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#202020
activityBar.border#202020
activityBar.dropBackground#404040
activityBar.foreground#dddddd
activityBarBadge.background#009688
activityBarBadge.foreground#ffffff
badge.background#009688
badge.foreground#ffffff
button.background#202020
button.foreground#dddddd
button.hoverBackground#009688
descriptionForeground#909090
dropdown.background#202020
dropdown.border#202020
dropdown.foreground#dddddd
dropdown.listBackground#202020
editor.background#090909
editor.findMatchBackground#ffffff1a
editor.findMatchBorder#009687
editor.findMatchHighlightBackground#ffffff1a
editor.findMatchHighlightBorder#40404000
editor.findRangeHighlightBackground#4e4e4e2f
editor.foreground#dddddd
editor.inactiveSelectionBackground#404040
editor.lineHighlightBackground#141414
editor.lineHighlightBorder#141414
editor.rangeHighlightBackground#141414
editor.rangeHighlightBorder#141414
editor.selectionBackground#0096875e
editor.selectionHighlightBackground#ffffff1a
editor.selectionHighlightBorder#404040
editorCursor.background#090909
editorCursor.foreground#dddddd
editorGroup.border#404040
editorGroup.dropBackground#00968788
editorGroup.emptyBackground#202020
editorGroup.focusedEmptyBorder#009688
editorGroupHeader.noTabsBackground#101010
editorGroupHeader.tabsBackground#101010
editorGroupHeader.tabsBorder#101010
editorHoverWidget.background#202020
editorHoverWidget.border#009688
editorLineNumber.activeForeground#009688
editorLineNumber.foreground#404040
editorLink.activeForeground#00ccb8
editorOverviewRuler.modifiedForeground#009688
editorSuggestWidget.background#202020
editorSuggestWidget.border#101010
editorSuggestWidget.foreground#dddddd
editorSuggestWidget.highlightForeground#009688
editorSuggestWidget.selectedBackground#404040
editorWhitespace.foreground#404040
editorWidget.background#101010
editorWidget.border#101010
editorWidget.resizeBorder#009688
errorForeground#ff5555
focusBorder#009688
foreground#ffffff
input.background#202020
input.border#202020
input.foreground#dddddd
input.placeholderForeground#404040
inputOption.activeBorder#009688
inputValidation.errorBackground#aa0000
inputValidation.errorBorder#ff5555
inputValidation.infoBackground#ff0000
inputValidation.infoBorder#ff0000
inputValidation.warningBackground#ff0000
inputValidation.warningBorder#ff0000
list.activeSelectionBackground#202020
list.activeSelectionForeground#ffffff
list.dropBackground#00968788
list.errorForeground#ff5555
list.focusBackground#070707
list.focusForeground#dddddd
list.highlightForeground#dddddd
list.hoverBackground#404040
list.hoverForeground#dddddd
list.inactiveFocusBackground#070707
list.inactiveSelectionBackground#202020
list.inactiveSelectionForeground#dddddd
list.invalidItemForeground#dddddd
list.warningForeground#e4c674
menu.background#202020
menu.foreground#dddd
menu.selectionBackground#404040
menu.selectionBorder#404040
menu.selectionForeground#ffffff
menubar.selectionBackground#404040
menubar.selectionBorder#404040
menubar.selectionForeground#ffffff
notificationCenter.border#101010
notificationCenterHeader.background#101010
notificationCenterHeader.foreground#ffffff
notificationLink.foreground#00ccb8
notifications.background#202020
notifications.border#202020
notifications.foreground#ffffff
notificationToast.border#202020
panel.background#101010
panel.border#202020
panel.dropBackground#00968788
panelTitle.activeBorder#009688
panelTitle.activeForeground#ffffff
panelTitle.inactiveForeground#dddddd
progressBar.background#009688
scrollbar.shadow#090909
scrollbarSlider.activeBackground#009688
scrollbarSlider.background#47474756
scrollbarSlider.hoverBackground#a0a0a056
selection.background#0096875e
settings.checkboxBackground#141414
settings.checkboxBorder#404040
settings.checkboxForeground#dddddd
settings.modifiedItemIndicator#009688
sideBar.background#101010
sideBar.border#202020
sideBar.dropBackground#00968788
sideBar.foreground#dddddd
sideBarSectionHeader.background#202020
sideBarSectionHeader.foreground#ffffff
sideBarTitle.foreground#ffffff
statusBar.background#202020
statusBar.border#202020
statusBar.debuggingBackground#a55b07
statusBar.debuggingBorder#a55b07
statusBar.debuggingForeground#ffffff
statusBar.foreground#ffffff
statusBar.noFolderBackground#009688
statusBar.noFolderBorder#009688
statusBar.noFolderForeground#ffffff
statusBarItem.activeBackground#00574e
statusBarItem.hoverBackground#009688
statusBarItem.prominentBackground#00574e
statusBarItem.prominentHoverBackground#009688
tab.activeBackground#090909
tab.activeBorder#090909
tab.activeBorderTop#009688
tab.activeForeground#dddddd
tab.border#101010
tab.hoverBackground#404040
tab.hoverBorder#404040
tab.inactiveBackground#101010
tab.inactiveForeground#dddddd
tab.unfocusedActiveBorder#101010
tab.unfocusedActiveBorderTop#101010
tab.unfocusedActiveForeground#dddddd
tab.unfocusedHoverBackground#404040
tab.unfocusedHoverBorder#404040
tab.unfocusedInactiveForeground#dddddd
terminal.ansiBlack#101010
terminal.ansiBlue#4040aa
terminal.ansiBrightBlack#505050
terminal.ansiBrightBlue#8888ff
terminal.ansiBrightCyan#88ffff
terminal.ansiBrightGreen#88ff88
terminal.ansiBrightMagenta#ff88ff
terminal.ansiBrightRed#ff8888
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#ffff88
terminal.ansiCyan#40aaaa
terminal.ansiGreen#40aa40
terminal.ansiMagenta#aa40aa
terminal.ansiRed#aa4040
terminal.ansiWhite#cccccc
terminal.ansiYellow#aaaa40
terminal.background#101010
terminal.border#101010
terminal.foreground#cccccc
terminal.selectionBackground#0096875e
terminalCursor.background#101010
terminalCursor.foreground#ffffff
textLink.activeForeground#00ccb8
textLink.foreground#00ccb8
textPreformat.foreground#009688
titleBar.activeBackground#202020
titleBar.activeForeground#ffffff
titleBar.border#202020
titleBar.inactiveBackground#ffffff
titleBar.inactiveForeground#202020

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded	#9cdcfe	—
comment	#009688	—
punctuation.definition.string.begin, punctuation.definition.string.end, string, invalid.illegal.placeholder, constant.other.placeholder	#e4c674	—
constant.numeric, constant.character.escape	#fda86e	—
keyword.control, storage.modifier, storage.type, keyword.operator.new, variable.language.this.cpp, punctuation.definition.directive.c, constant.language, support.type.sys-types, keyword.operator.sizeof	#937d99
entity.name.function	#7393af

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