Light Delight

Name: Light Delight
Author: Dimitar Nonov

Publisher: Dimitar NonovThemes in package: 1

Light VS Code theme inspired by Google's Chrome and Visual Studio

Open in VS Code GitHub

VS Code preview

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

Light Delight — Light Delight

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#ddd
activityBar.border#0003
activityBar.foreground#222
activityBarBadge.foreground#eee
badge.background#aaa
contrastBorder#0003
editor.background#fff
editor.foreground#222222
editor.inactiveSelectionBackground#0003
editor.selectionBackground#e5e5e5
editor.selectionHighlightBackground#ea13
editorError.foreground#ff0000
editorGroup.background#ccc
editorGroup.border#0003
editorGroupHeader.noTabsBackground#f9f9f9
editorGroupHeader.tabsBackground#eee
editorGroupHeader.tabsBorder#0003
editorGutter.addedBackground#007c23
editorGutter.background#f9f9f9
editorGutter.deletedBackground#a50000
editorGutter.modifiedBackground#005faf
editorIndentGuide.activeBackground#0006
editorIndentGuide.background#0002
editorInfo.foreground#00437a
editorLightBulb.foreground#cd9731
editorLightBulbAutoFix.foreground#cd9731
editorLineNumber.activeForeground#000
editorLineNumber.foreground#aaa
editorSuggestWidget.background#eee
editorWarning.foreground#cd9731
editorWidget.background#eee
editorWidget.border#0003
input.placeholderForeground#aaa
list.activeSelectionBackground#dddddd
list.activeSelectionForeground#222
list.focusBackground#dddddd
list.highlightForeground#005faf
list.hoverBackground#0001
list.inactiveSelectionBackground#dddddd
list.inactiveSelectionForeground#222
list.invalidItemForeground#b89500
notificationsErrorIcon.foreground#ff0000
notificationsInfoIcon.foreground#cd9731
notificationsWarningIcon.foreground#00437a
notificationToast.border#0003
panel.background#fff
peekViewEditor.background#eee
problemsErrorIcon.foreground#ff0000
problemsInfoIcon.foreground#00437a
problemsWarningIcon.foreground#cd9731
quickInputList.focusBackground#0002
scrollbarSlider.background#0003
sideBar.background#eee
sideBar.border#0003
sideBarTitle.foreground#555
statusBar.background#f9f9f9
statusBar.border#0003
statusBar.debuggingBackground#ea1
statusBar.debuggingForeground#642
statusBar.foreground#555
statusBar.noFolderBackground#f9f9f9
symbolIcon.classForeground#850075
symbolIcon.constructorForeground#00437a
symbolIcon.enumeratorForeground#000080
symbolIcon.enumeratorMemberForeground#000080
symbolIcon.fieldForeground#000080
symbolIcon.functionForeground#00437a
symbolIcon.interfaceForeground#850075
symbolIcon.keywordForeground#222
symbolIcon.methodForeground#00437a
symbolIcon.moduleForeground#850075
symbolIcon.namespaceForeground#850075
symbolIcon.referenceForeground#000080
symbolIcon.snippetForeground#222
symbolIcon.unitForeground#222
symbolIcon.variableForeground#000080
tab.activeBackground#fff
tab.activeForeground#333
tab.border#0003
tab.inactiveBackground#eee
terminal.ansiBlack#222
terminal.ansiBlue#000080
terminal.ansiBrightBlack#525252
terminal.ansiBrightBlue#000080
terminal.ansiBrightCyan#00437a
terminal.ansiBrightGreen#006b1e
terminal.ansiBrightMagenta#850075
terminal.ansiBrightRed#a50000
terminal.ansiBrightWhite#525252
terminal.ansiBrightYellow#cd9731
terminal.ansiCyan#00437a
terminal.ansiGreen#006b1e
terminal.ansiMagenta#850075
terminal.ansiRed#a50000
terminal.ansiWhite#525252
terminal.ansiYellow#cd9731
terminal.background#fff
terminal.foreground#222
titleBar.activeBackground#ddd
titleBar.activeForeground#333
titleBar.border#0003
titleBar.inactiveBackground#f9f9f9
titleBar.inactiveForeground#bbb
widget.shadow#0003

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#333333ff	—
comment, punctuation.definition.comment	#858585	—
comment.block.preprocessor	#858585	—
comment.documentation, comment.block.documentation, string.quoted.docstring.multi.python	#858585	—
invalid.deprecated	—	—
invalid.illegal	#660000	—
keyword.operator, punctuation.separator.pointer-access.c, punctuation.separator.pointer-access.cpp	#000080	—
keyword, storage, keyword.operator.expression.in, keyword.operator.expression.of, keyword.operator.expression.typeof, keyword.operator.expression.instanceof, keyword.operator.logical.python, keyword.operator.new	#000080	—
storage.type, support.type	#000080	—
constant.language, support.constant, variable.language	#000080	—
variable, support.variable	#222222	—
meta.object-literal.key	#00437a	—
entity.name.function, meta.function-call.generic.python, support.function	#00437a	—
meta.return-type, support.class, entity.other.inherited-class, support.type, entity.name.type, entity.name.class, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy	#850075	—
entity.name.exception	#a50000	—
entity.name.section	—	bold
constant	#00437a	—
constant.numeric, constant.character	#006b1e	—
string, punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.definition.string.template.begin, punctuation.definition.string.template.end	#a50000	—
constant.character.escape	#777777	—
string.regexp	#AB6526	—
constant.other.symbol	#AB6526	—
punctuation	#222222	—
string source, text source	—	—
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html	#006b1e	—
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html	#4d4d4d	—
entity.name.tag, support.class.component.js	#006b1e	—
meta.tag entity.other.attribute-name, entity.other.attribute-name.html	#00437a	—
constant.character.entity, punctuation.definition.entity	#a50000	—
meta.selector, meta.selector entity, meta.selector entity punctuation, punctuation.definition.entity.css, entity.name.tag.css	#000080	—
meta.property-name, support.type.property-name	#222222	—
meta.property-value, meta.property-value constant.other, support.constant.property-value	#a50000	—
keyword.other.unit.rem.css, keyword.other.unit.vh.css, keyword.other.unit.px.css, keyword.other.unit.em.css, keyword.other.unit.deg.css, keyword.other.unit.percentage.css	#006b1e	—
keyword.other.important	—	bold
constant.other.color.rgb-value.hex	#006b1e	—
source.js string.template punctuation.definition.template-expression	#00437a	—
punctuation.definition.directive.c, punctuation.definition.directive.cpp	#000080	—
markup.changed	#000000	—
markup.deleted	#000000	—
markup.italic	—	italic
markup.error	#660000	—
markup.inserted	#000000	—
meta.link	#00437a	—
markup.output, markup.raw	#777777	—
markup.prompt	#777777	—
markup.heading	#AA3731	—
markup.bold	—	bold
markup.traceback	#660000	—
markup.underline	—	underline
markup.quote	#7A3E9D	—
markup.list	#000080	—
markup.bold, markup.italic	#006b1e	—
markup.inline.raw	#AB6526
meta.diff.header.git	#000080	—
meta.diff.range, meta.diff.index, meta.separator	#434343	—
meta.diff.header.from-file	#434343	—
meta.diff.header.to-file	#434343	—
punctuation.definition.deleted, markup.deleted.diff	#AA3731	—
punctuation.definition.inserted, markup.inserted.diff	#006b1e	—
punctuation.definition.block.tag.jsdoc, punctuation.definition.inline.tag.jsdoc	#000080	—

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