Dragon Beige

Name: Dragon Beige
Author: Karl Loza

Publisher: Karl LozaThemes in package: 1

A smooth beige theme with brown and green touches, optimized for Python and Rust.

Open in VS Code GitHub

VS Code preview

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

Dragon Beige — Dragon Beige

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#E6DBCE
activityBar.foreground#5C3A21
activityBar.inactiveForeground#A3978A
button.background#775a45
button.foreground#F5F0E6
button.hoverBackground#8b5631
editor.background#F5F0E6
editor.foreground#4A3B32
editor.lineHighlightBackground#E6DBCE
editor.selectionBackground#b9a5cd
editor.selectionHighlightBackground#d99fee6c
editorBracketHighlight.foreground1#783E19
editorBracketHighlight.foreground2#9C5D27
editorBracketHighlight.foreground3#B35C30
editorBracketHighlight.foreground4#94422E
editorBracketHighlight.foreground5#5A7247
editorBracketHighlight.unexpectedBracket.foreground#0501ff
editorCursor.foreground#8B5A2B
editorError.foreground#0501ff
editorGroupHeader.tabsBackground#E6DBCE
editorGutter.addedBackground#4bc226
editorGutter.deletedBackground#19f1ed
editorGutter.modifiedBackground#cf2acf
editorInfo.foreground#4bc226
editorLineNumber.activeForeground#8B5A2B
editorLineNumber.foreground#C8BCAF
editorUnnecessaryCode.opacity#0000004a
editorWarning.foreground#FF7700
focusBorder#8B5A2B
gitDecoration.addedResourceForeground#5c8a36
gitDecoration.conflictingResourceForeground#FF7700
gitDecoration.deletedResourceForeground#e60000
gitDecoration.ignoredResourceForeground#a2a2a2
gitDecoration.modifiedResourceForeground#cf2acf
gitDecoration.renamedResourceForeground#9C5D27
gitDecoration.stageDeletedResourceForeground#E60000
gitDecoration.stageModifiedResourceForeground#A0522D
gitDecoration.submoduleResourceForeground#7A4C65
gitDecoration.untrackedResourceForeground#4bc226
list.activeSelectionBackground#8B5A2B
list.activeSelectionForeground#F5F0E6
list.hoverBackground#E6DBCE
list.inactiveSelectionBackground#D5C8B8
pickerGroup.border#E6DBCE
pickerGroup.foreground#8B5A2B
quickInput.background#F5F0E6
quickInput.foreground#4A3B32
quickInputList.focusBackground#8B5A2B
quickInputList.focusForeground#F5F0E6
sideBar.background#EFE8DC
sideBar.foreground#5C3A21
sideBarSectionHeader.background#E6DBCE
statusBar.background#8B5A2B
statusBar.foreground#F5F0E6
statusBar.noFolderBackground#E6DBCE
statusBar.noFolderForeground#5C3A21
statusBarItem.remoteBackground#5A7247
statusBarItem.remoteForeground#F5F0E6
tab.activeBorderTop#1b9b6e79
tab.activeForeground#1b9b6e
tab.border#C4B5A3
tab.inactiveBackground#D5C8B8
tab.inactiveForeground#5C4A3D
tab.unfocusedActiveBackground#8B5A2B
tab.unfocusedActiveForeground#F5F0E6
terminal.ansiBlack#4A3B32
terminal.ansiBlue#783E19
terminal.ansiBrightBlack#9A8C7E
terminal.ansiBrightBlue#8B5A2B
terminal.ansiBrightCyan#C86A39
terminal.ansiBrightGreen#6B8854
terminal.ansiBrightMagenta#9B6384
terminal.ansiBrightRed#B35C30
terminal.ansiBrightWhite#F5F0E6
terminal.ansiBrightYellow#B35900
terminal.ansiCyan#B35C30
terminal.ansiGreen#5A7247
terminal.ansiMagenta#7A4C65
terminal.ansiRed#94422E
terminal.ansiWhite#E6DBCE
terminal.ansiYellow#9C5D27
terminal.background#F5F0E6
terminal.foreground#4A3B32
titleBar.activeBackground#E6DBCE
titleBar.activeForeground#4A3B32

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
keyword.control.import, keyword.control.import.python	#1b9b6e	bold italic
entity.name.namespace, entity.name.type.module	#715130	italic bold
comment, punctuation.definition.comment	#9A8C7E	italic
keyword, storage.type, storage.modifier	#9C5D27	bold
keyword.operator	#9C5D27	—
keyword.control, keyword.control.flow, keyword.control.return, keyword.operator.logical.python, keyword.operator.word.python	#B35C30	bold italic
string, punctuation.definition.string	#5A7247	—
entity.name.class, entity.name.type	#5A7247	bold
entity.name.function, meta.function-call, support.function, support.function.builtin	#94422E	—
support.function.magic, support.variable.magic, entity.name.function.macro, support.macro	#794e66	italic
variable	#4A3B32	—
variable.parameter, variable.language.special.self.python, variable.parameter.function.language.special.self.python	#715130	italic
constant.numeric, constant.language	#7A4C65	—
constant.character.escape	#B35900	bold
entity.name.type.lifetime, punctuation.definition.lifetime	#7A4C65	italic
entity.name.function.decorator.python, meta.function.decorator.python, punctuation.definition.decorator.python	#a17949	bold
markup.heading, punctuation.definition.heading.markdown	#94422E	bold
markup.bold, punctuation.definition.bold.markdown	#783E19	bold
markup.italic, punctuation.definition.italic.markdown	#B35C30	italic
markup.inline.raw.string.markdown, punctuation.definition.raw.markdown	#5A7247	—
markup.list, punctuation.definition.list.begin.markdown	#9C5D27	bold
markup.quote, punctuation.definition.quote.begin.markdown	#9A8C7E	italic
string.other.link.title.markdown, string.other.link.description.markdown	#783E19	bold
markup.underline.link.markdown	#7A4C65	underline
keyword.key.toml, support.type.property-name.toml, support.type.property-name.array.toml, variable.key.toml, meta.key.toml	#9C5D27	—
meta.tag.table.toml, entity.name.section.toml, entity.name.section.table.toml, entity.name.section.array.toml, entity.other.attribute-name.table.toml, entity.other.attribute-name.array.toml, support.type.property-name.table.toml, support.type.property-name.dictionary.toml, punctuation.definition.table.toml, punctuation.definition.table.array.toml	#94422E	bold