Dusty Light Theme

Name: Dusty Light Theme
Author: dhershman

Publisher: dhershmanThemes in package: 5

Another Light theme that uses easier to read syntax highlighting

Open in VS Code GitHub

Color themes

VS Code preview

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

Dusty Light Theme — Dusty Light MDN

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.ts

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...

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBarBadge.background#e7e7e7
activityBarBadge.foreground#2D3033
bade.background#e7e7e7
badge.foreground#2D3033
button.background#e7e7e7
button.foreground#2D3033
button.hoverBackground#f2f2f2
editor.background#ebebeb
editor.invisibles#DDDDDD
editor.lineHighlightBackground#f5f5f5
editor.rangeHighlightBackground#FDF7DD
editor.selectionBackground#add8e6
editor.selectionHighlightBackground#add8e6
editorBracketMatch.background#add8e6
editorCursor.foreground#333333
editorLineNumber.foreground#000000
editorLink.activeForeground#80A4BE
editorOverviewRuler.wordHighlightStrongForeground#FAEBAF
editorWhitespace.foreground#eeeeee
list.activeSelectionBackground#e7e7e7
list.activeSelectionForeground#000000
list.inactiveSelectionBackground#d0d0d0
panel.background#c5c5c5
peekViewResult.fileForeground#2D3033
peekViewResult.lineForeground#2D3033
sideBar.background#c5c5c5
sideBar.foreground#000000
sideBarTitle.foreground:#000000
statusBar.background#d2d2d2
statusBar.foreground#2D3033
statusBarItem.activeBackground#f2f2f2
statusBarItem.hoverBackground#f2f2f2
tab.activeBorder#80A4BE
tab.inactiveBackground#f7f7f7
terminal.ansiBrightGreen#2cb42c
terminal.background#2D3033
terminal.foreground#ffffff
terminalCursor.foreground#c5c5c5
titleBar.activeBackground#2D3033
titleBar.activeForeground#c5c5c5

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
emphasis	—	italic
strong	—	bold
source	#000000	—
constant.other.symbol.hashkey.ruby, keyword.operator.dereference.java, keyword.operator.navigation.groovy, meta.scope.for-loop.shell punctuation.definition.string.begin, meta.scope.for-loop.shell punctuation.definition.string.end, meta.scope.for-loop.shell string, storage.modifier.import, punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx, punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.separator.list.comma.css, constant.language.empty-list.haskell	#2D3033	—
comment	#006700	italic
punctuation.parens.ellipses.elm	#639999	—
string	#ff3e03	—
string.quoted.double.html	#2da5e3	—
string.regexp, variable, record.name, support.other.variable, string.other.link, support.variable.property, support.type.property-name.json	#2da5e3	—
keyword.operator.class, source.php.embedded.line, constant.type-constructor	#639999	—
record.accessor, support.variable.dom, support.variable.property.dom, variable.other.object, variable.other.object.property, variable.other.property, markup.inline.raw.string.markdown	#2da5e3	—
constant.numeric, constant.language, support.constant, constant.character, variable.parameter, punctuation.section.embedded, keyword.other.unit, support.module	#2da5e3	—
constant.numeric.decimal.js	#648d50	—
keyword.operator, constant.other.color	#000000	—
entity.name.function, meta.function-call, support.function, keyword.other.special-method, meta.block-level	#d81c39	—
keyword, storage, storage.type, declaration.tag, beginning.punctuation.definition.quote.markdown, meta.directive.vue, markup.italic.markdown	#0315b6	—
meta.paragraph.markdown	#0315b6	—
keyword.control.flow.js	#ac52a5	—
keyword.control.conditional.js	#ac52a5	—
entity.name.tag, entity.name.tag.html, markup.heading.markdown	#990055	—
meta.tag.inline.any, meta.tag.any.html, meta.tag.other.html, meta.tag.block.any.html	#8E7808	—
entity.name.type.module, entity.name.type, markup.bold.markdown, meta.at-rule.extend, punctuation.definition.entity.css, entity.other.attribute-name.class, entity.other.attribute-name.html	#006700	—
entity.name.type, keyword.operator.new, variable.language.this	—	bold
meta.separator	#2D3033	—
invalid.deprecated	#D63F37	—
invalid.illegal	#B3362D	—

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