Claude Warm Light

Name: Claude Warm Light
Author: Nghia SDET

Publisher: Nghia SDETThemes in package: 1

A warm sepia-toned light theme inspired by Claude Code — easy on the eyes with subtle grid aesthetics

GitHub

VS Code preview

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

Claude Warm Light — Claude Warm Light

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.activeBorder#b08a40
activityBar.background#ece7dd
activityBar.border#d5cfc3
activityBar.foreground#6b6352
activityBar.inactiveForeground#9a9080
activityBarBadge.background#b08a40
activityBarBadge.foreground#ffffff
badge.background#b08a40
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#3d3929
breadcrumb.focusForeground#5a5344
breadcrumb.foreground#8a8272
breadcrumbPicker.background#f5f0e8
button.background#b08a40
button.foreground#ffffff
button.hoverBackground#c49a48
button.secondaryBackground#e8e2d8
button.secondaryForeground#3d3929
button.secondaryHoverBackground#ddd7cb
debugExceptionWidget.background#fef0f0
debugExceptionWidget.border#b05050
debugToolBar.background#f5f0e8
diffEditor.insertedLineBackground#5a8a5a10
diffEditor.insertedTextBackground#5a8a5a18
diffEditor.removedLineBackground#b0505010
diffEditor.removedTextBackground#b0505018
dropdown.background#ffffff
dropdown.border#d5cfc3
dropdown.foreground#3d3929
editor.background#faf6f0
editor.findMatchBackground#dbc88860
editor.findMatchHighlightBackground#dbc88840
editor.foreground#3d3929
editor.hoverHighlightBackground#d9cfba20
editor.inactiveSelectionBackground#d9cfba40
editor.lineHighlightBackground#f0ebe2
editor.lineHighlightBorder#e5dfd4
editor.rangeHighlightBackground#f0ebe210
editor.selectionBackground#d9cfba80
editor.selectionHighlightBackground#d9cfba50
editor.wordHighlightBackground#d9cfba40
editor.wordHighlightStrongBackground#d9cfba60
editorBracketHighlight.foreground1#b08a40
editorBracketHighlight.foreground2#5a7a9a
editorBracketHighlight.foreground3#8a5a8a
editorBracketHighlight.foreground4#2e7d7a
editorBracketHighlight.foreground5#9a6030
editorBracketHighlight.foreground6#5a8a5a
editorBracketMatch.background#d9cfba40
editorBracketMatch.border#b08a40
editorCursor.foreground#8b5a2b
editorError.foreground#b05050
editorGroup.border#d5cfc3
editorGroupHeader.tabsBackground#ece7dd
editorGroupHeader.tabsBorder#d5cfc3
editorGutter.addedBackground#5a8a5a
editorGutter.background#f5f0e8
editorGutter.deletedBackground#b05050
editorGutter.modifiedBackground#b08a40
editorHoverWidget.background#f5f0e8
editorHoverWidget.border#d5cfc3
editorIndentGuide.activeBackground#c8c0b0
editorIndentGuide.background#ddd7cb
editorInfo.foreground#5a7a9a
editorLineNumber.activeForeground#6b6352
editorLineNumber.foreground#a09882
editorLink.activeForeground#8b5a2b
editorRuler.foreground#ddd7cb60
editorSuggestWidget.background#f5f0e8
editorSuggestWidget.border#d5cfc3
editorSuggestWidget.highlightForeground#8b5a2b
editorSuggestWidget.selectedBackground#ddd7cb
editorWarning.foreground#b08a40
editorWhitespace.foreground#cdc5b530
editorWidget.background#f5f0e8
editorWidget.border#d5cfc3
editorWidget.foreground#3d3929
focusBorder#b08a4080
gitDecoration.conflictingResourceForeground#c06060
gitDecoration.deletedResourceForeground#b05050
gitDecoration.ignoredResourceForeground#b5ad9d
gitDecoration.modifiedResourceForeground#b08a40
gitDecoration.untrackedResourceForeground#5a8a5a
input.background#ffffff
input.border#d5cfc3
input.foreground#3d3929
input.placeholderForeground#b5ad9d
inputOption.activeBackground#b08a4020
inputOption.activeBorder#b08a40
inputValidation.errorBackground#fef0f0
inputValidation.errorBorder#b05050
inputValidation.infoBackground#f0f4fa
inputValidation.infoBorder#5a7a9a
inputValidation.warningBackground#fef8e8
inputValidation.warningBorder#b08a40
list.activeSelectionBackground#ddd7cb
list.activeSelectionForeground#2d2a1f
list.focusBackground#ddd7cb
list.highlightForeground#8b5a2b
list.hoverBackground#e8e2d810
list.inactiveSelectionBackground#e5dfd4
list.inactiveSelectionForeground#2d2a1f
merge.currentContentBackground#5a8a5a10
merge.currentHeaderBackground#5a8a5a30
merge.incomingContentBackground#5a7a9a10
merge.incomingHeaderBackground#5a7a9a30
minimap.background#f5f0e8
minimapSlider.activeBackground#cdc5b570
minimapSlider.background#cdc5b530
minimapSlider.hoverBackground#cdc5b550
notificationCenter.border#d5cfc3
notifications.background#f5f0e8
notifications.border#d5cfc3
notifications.foreground#3d3929
notificationsErrorIcon.foreground#b05050
notificationsInfoIcon.foreground#5a7a9a
notificationsWarningIcon.foreground#b08a40
panel.background#f5f0e8
panel.border#d5cfc3
panelTitle.activeBorder#b08a40
panelTitle.activeForeground#3d3929
panelTitle.inactiveForeground#9a9080
peekView.border#b08a40
peekViewEditor.background#f5f0e8
peekViewEditor.matchHighlightBackground#dbc88860
peekViewResult.background#ece7dd
peekViewResult.matchHighlightBackground#dbc88860
peekViewTitle.background#e8e2d8
peekViewTitleDescription.foreground#9a9080
peekViewTitleLabel.foreground#3d3929
quickInput.background#f5f0e8
quickInput.foreground#3d3929
quickInputList.focusBackground#ddd7cb
quickInputTitle.background#ece7dd
scrollbar.shadow#3d392910
scrollbarSlider.activeBackground#cdc5b590
scrollbarSlider.background#cdc5b540
scrollbarSlider.hoverBackground#cdc5b570
settings.checkboxBackground#ffffff
settings.dropdownBackground#ffffff
settings.headerForeground#3d3929
settings.modifiedItemIndicator#b08a40
settings.textInputBackground#ffffff
sideBar.background#f0ebe3
sideBar.border#d5cfc3
sideBar.foreground#4a4336
sideBarSectionHeader.background#e8e2d8
sideBarSectionHeader.border#d5cfc3
sideBarSectionHeader.foreground#6b6352
sideBarTitle.foreground#3d3929
statusBar.background#e8e2d8
statusBar.border#d5cfc3
statusBar.debuggingBackground#b08a40
statusBar.debuggingForeground#ffffff
statusBar.foreground#6b6352
statusBar.noFolderBackground#ece7dd
statusBarItem.hoverBackground#d5cfc350
statusBarItem.prominentBackground#d5cfc340
statusBarItem.remoteBackground#b08a40
statusBarItem.remoteForeground#ffffff
tab.activeBackground#faf6f0
tab.activeBorderTop#b08a40
tab.activeForeground#3d3929
tab.border#d5cfc3
tab.hoverBackground#f5f0e8
tab.inactiveBackground#ece7dd
tab.inactiveForeground#7a7262
terminal.ansiBlack#3d3929
terminal.ansiBlue#5a7a9a
terminal.ansiBrightBlack#9a9080
terminal.ansiBrightBlue#6a8aaa
terminal.ansiBrightCyan#3e8d8a
terminal.ansiBrightGreen#6a9a6a
terminal.ansiBrightMagenta#9a6a9a
terminal.ansiBrightRed#c06060
terminal.ansiBrightWhite#faf6f0
terminal.ansiBrightYellow#c09a50
terminal.ansiCyan#2e7d7a
terminal.ansiGreen#5a8a5a
terminal.ansiMagenta#8a5a8a
terminal.ansiRed#b05050
terminal.ansiWhite#e8e2d8
terminal.ansiYellow#b08a40
terminal.background#f5f0e8
terminal.foreground#3d3929
terminal.selectionBackground#d9cfba60
terminalCursor.foreground#8b5a2b
titleBar.activeBackground#e8e2d8
titleBar.activeForeground#3d3929
titleBar.border#d5cfc3
titleBar.inactiveBackground#ede8df
titleBar.inactiveForeground#9a9080
tree.indentGuidesStroke#d5cfc3
walkThrough.embeddedEditorBackground#f5f0e8
welcomePage.background#faf6f0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#8a8272	italic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical, storage, storage.type, storage.modifier	#8b5a2b	bold
keyword.operator, keyword.operator.assignment, punctuation	#7a6a50
string, string.quoted, string.template	#5a7a3a	—
string.regexp	#6a8a5a	—
punctuation.definition.template-expression, string.template punctuation.definition.template-expression	#8b5a2b	—
constant.numeric	#9a6030	—
constant.language, constant.language.boolean, variable.language.this, variable.language.super	#9a5050	italic
entity.name.function, meta.function-call entity.name.function, support.function	#6a5acd	—
entity.name.type, entity.name.class, support.type, support.class, entity.other.inherited-class	#2e7d7a	—
entity.name.type.interface	#2e7d7a	italic
entity.name.type.parameter	#8a5a8a	—
variable, variable.other	#3d3929	—
variable.parameter	#5a5344	italic
variable.other.property, variable.other.object.property, support.variable.property, meta.object-literal.key	#5a6a8a	—
variable.other.enummember, entity.name.type.enum	#9a6030	—
meta.decorator, meta.decorator entity.name.function, punctuation.decorator	#7a5a9a	italic
entity.name.namespace, entity.name.module	#6b6352	—
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as	#8b5a2b
entity.name.tag, punctuation.definition.tag	#8b5a2b	—
entity.other.attribute-name	#9a6030	italic
support.type.property-name.css	#5a6a8a	—
support.constant.property-value.css, constant.other.color.rgb-value.css	#9a6030	—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css	#2e7d7a	—
support.type.property-name.json	#5a6a8a	—
markup.heading, entity.name.section.markdown	#8b5a2b	bold
markup.bold	#3d3929	bold
markup.italic	#3d3929	italic
markup.inline.raw, markup.fenced_code.block	#6a5acd	—
markup.underline.link	#5a7a9a	—
entity.name.tag.yaml	#5a6a8a	—
source.shell variable	#5a6a8a	—
variable.defaultLibrary	#6b6352	—
support.type.builtin	#2e7d7a	—

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