Sepia for VS Code

Name: Sepia for VS Code
Author: Weevil_Breeder

Publisher: Weevil_BreederThemes in package: 1

Warm beige, eye-friendly light theme with vivid gruvbox-based syntax colors. A VS Code port of Adam Wojszczyk's Sepia theme for JetBrains IDEs.

Open in VS Code GitHub

VS Code preview

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

Sepia for VS Code — Sepia (PyCharm)

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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}!`;
}

Problems1

Output

Debug Console

Terminal

Ports

~/my-project $ pnpm dev
▲ Next.js ready on http://localhost:3000
✓ compiled client and server successfully in 412ms
wait - compiling /theme/vscode...
~/my-project $

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#ebdbb2
activityBar.border#d5c4a1
activityBar.foreground#282828
activityBar.inactiveForeground#7c6f64
activityBarBadge.background#458588
activityBarBadge.foreground#f9f5d7
badge.background#458588
badge.foreground#f9f5d7
breadcrumb.background#f9f5d7
breadcrumb.focusForeground#282828
breadcrumb.foreground#504945
button.background#458588
button.foreground#f9f5d7
button.hoverBackground#076678
button.secondaryBackground#d5c4a1
button.secondaryForeground#282828
button.secondaryHoverBackground#bdae93
checkbox.background#f9f5d7
checkbox.border#d5c4a1
descriptionForeground#665c54
diffEditor.insertedTextBackground#b8bb2640
diffEditor.removedTextBackground#cc241d33
dropdown.background#f9f5d7
dropdown.border#d5c4a1
dropdown.foreground#282828
editor.background#f9f5d7
editor.findMatchBackground#8ec07c
editor.findMatchHighlightBackground#8ec07c80
editor.foreground#282828
editor.inactiveSelectionBackground#afc5bd80
editor.lineHighlightBackground#f2e5bc
editor.selectionBackground#83a59880
editor.selectionHighlightBackground#d5c4a180
editor.wordHighlightBackground#d5c4a1
editor.wordHighlightStrongBackground#d5c4a1
editorBracketMatch.background#d5c4a1
editorBracketMatch.border#a89984
editorCursor.foreground#282828
editorError.foreground#cc241d
editorGroup.border#d5c4a1
editorGroupHeader.border#d5c4a1
editorGroupHeader.tabsBackground#ebdbb2
editorGutter.background#f9f5d7
editorHoverWidget.background#fbf1c7
editorHoverWidget.border#d5c4a1
editorIndentGuide.activeBackground1#a89984
editorIndentGuide.background1#ebdbb2
editorInfo.foreground#458588
editorLineNumber.activeForeground#7c6f64
editorLineNumber.foreground#a89984
editorOverviewRuler.border#00000000
editorRuler.foreground#d5c4a1
editorSuggestWidget.background#f9f5d7
editorSuggestWidget.border#d5c4a1
editorSuggestWidget.selectedBackground#d5c4a1
editorSuggestWidget.selectedForeground#282828
editorWarning.foreground#d65d0e
editorWhitespace.foreground#bdae93
editorWidget.background#fbf1c7
editorWidget.border#d5c4a1
focusBorder#458588
gitDecoration.addedResourceForeground#689d6a
gitDecoration.deletedResourceForeground#9d0006
gitDecoration.ignoredResourceForeground#a89984
gitDecoration.modifiedResourceForeground#076678
gitDecoration.untrackedResourceForeground#98971a
icon.foreground#504945
input.background#f9f5d7
input.border#d5c4a1
input.foreground#282828
input.placeholderForeground#a89984
inputOption.activeBackground#d5c4a1
inputOption.activeBorder#458588
keybindingLabel.background#ebdbb2
keybindingLabel.border#d5c4a1
keybindingLabel.bottomBorder#bdae93
keybindingLabel.foreground#282828
list.activeSelectionBackground#d5c4a1
list.activeSelectionForeground#282828
list.focusBackground#d5c4a1
list.focusForeground#282828
list.highlightForeground#076678
list.hoverBackground#f2e5bc
list.inactiveSelectionBackground#ebdbb2
list.inactiveSelectionForeground#282828
menu.background#fbf1c7
menu.foreground#282828
menu.selectionBackground#d5c4a1
menu.selectionForeground#282828
menu.separatorBackground#d5c4a1
menubar.selectionBackground#d5c4a1
notebook.cellBorderColor#d5c4a1
notebook.cellEditorBackground#f9f5d7
notebook.cellHoverBackground#f6ecc5
notebook.editorBackground#fbf1c7
notebook.focusedCellBorder#458588
notebook.outputContainerBackgroundColor#f9f5d7
notebook.selectedCellBackground#f2e5bc
notebookStatusErrorIcon.foreground#cc241d
notebookStatusSuccessIcon.foreground#98971a
notifications.background#fbf1c7
notifications.border#d5c4a1
notifications.foreground#282828
panel.background#fbf1c7
panel.border#d5c4a1
panelTitle.activeBorder#458588
panelTitle.activeForeground#282828
panelTitle.inactiveForeground#7c6f64
peekView.border#458588
peekViewEditor.background#f9f5d7
peekViewResult.background#fbf1c7
peekViewTitle.background#ebdbb2
pickerGroup.border#d5c4a1
pickerGroup.foreground#076678
progressBar.background#458588
quickInput.background#fbf1c7
quickInput.foreground#282828
quickInputList.focusBackground#d5c4a1
quickInputList.focusForeground#282828
scrollbarSlider.activeBackground#bdae93
scrollbarSlider.background#d5c4a166
scrollbarSlider.hoverBackground#d5c4a1a5
selection.background#83a59880
sideBar.background#fbf1c7
sideBar.border#d5c4a1
sideBar.foreground#282828
sideBarSectionHeader.background#ebdbb2
sideBarSectionHeader.foreground#282828
statusBar.background#ebdbb2
statusBar.border#d5c4a1
statusBar.debuggingBackground#d65d0e
statusBar.debuggingForeground#f9f5d7
statusBar.foreground#282828
statusBar.noFolderBackground#ebdbb2
tab.activeBackground#f9f5d7
tab.activeBorderTop#458588
tab.activeForeground#282828
tab.border#d5c4a1
tab.hoverBackground#f9f5d7
tab.inactiveBackground#ebdbb2
tab.inactiveForeground#504945
terminal.ansiBlack#282828
terminal.ansiBlue#458588
terminal.ansiBrightBlack#7c6f64
terminal.ansiBrightBlue#076678
terminal.ansiBrightCyan#427b58
terminal.ansiBrightGreen#79740e
terminal.ansiBrightMagenta#8f3f71
terminal.ansiBrightRed#9d0006
terminal.ansiBrightWhite#3c3836
terminal.ansiBrightYellow#b57614
terminal.ansiCyan#689d6a
terminal.ansiGreen#98971a
terminal.ansiMagenta#b16286
terminal.ansiRed#cc241d
terminal.ansiWhite#a89984
terminal.ansiYellow#d79921
terminal.background#f9f5d7
terminal.foreground#282828
textBlockQuote.background#f2e5bc
textBlockQuote.border#d5c4a1
textCodeBlock.background#f2e5bc
textLink.activeForeground#458588
textLink.foreground#076678
textPreformat.background#f2e5bc
textPreformat.foreground#282828
titleBar.activeBackground#ebdbb2
titleBar.activeForeground#282828
titleBar.border#d5c4a1
titleBar.inactiveBackground#f2e5bc
titleBar.inactiveForeground#7c6f64
toolbar.activeBackground#d5c4a1
toolbar.hoverBackground#f2e5bc
widget.shadow#bdae9366

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#928374	italic
string.quoted.docstring, string.quoted.docstring punctuation.definition.string	#928374	italic
string, punctuation.definition.string	#689d6a	bold
constant.character.escape, string constant.other.placeholder	#458588	bold
punctuation.definition.interpolation, meta.fstring punctuation.section.embedded	#458588	bold
constant.numeric	#458588	bold
keyword, keyword.control, storage, storage.type, storage.modifier, keyword.operator.logical.python, keyword.operator.new, constant.language	#458588	bold
keyword.operator, punctuation	#282828
entity.name.function, meta.function-call.generic, support.function	#282828
entity.name.type, entity.name.class, entity.other.inherited-class, support.class, support.type	#282828
meta.function.decorator, entity.name.function.decorator, punctuation.definition.decorator, meta.decorator	#98971a
variable, variable.other.readwrite, meta.item-access	#b16286	—
variable.parameter	#b16286	bold
variable.parameter.function-call, meta.function-call.arguments variable.parameter	#b16286
variable.language.special.self, variable.language.special.cls, variable.language.this	#458588	bold
variable.other.constant, constant.other.caps	#6c2f55	bold
variable.other.property, variable.other.object.property, meta.attribute.python	#8f3f71	bold
support.function.builtin.python	#282828
support.function.magic.python, variable.language.special.dunder	#8f3f71
entity.name.tag	#458588	bold
entity.other.attribute-name	#b16286	bold
markup.heading, markup.heading entity.name	#282828	bold
markup.bold	—	bold
markup.italic	—	italic
markup.inline.raw, markup.fenced_code.block	#504945	—
markup.underline.link, string.other.link	#076678	—
invalid, invalid.illegal	#cc241d	—
support.type.property-name.json	#8f3f71