brown spot blue spot

Name: brown spot blue spot
Author: tjyies

Publisher: tjyiesThemes in package: 1

dat brown sauce

Open in VS Code GitHub

VS Code preview

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

brown spot blue spot — brown spot blue spot

fetchUser.ts

index.ts

README.md

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#583e32
activityBar.border#1a151260
activityBar.foreground#7ee1ff
activityBarBadge.background#4b79a7
activityBarBadge.foreground#fdff81
breadcrumb.activeSelectionForeground#f0f9ff
breadcrumb.background#634C42
breadcrumb.focusForeground#D6F0FF
breadcrumb.foreground#bdbdbd
breadcrumbPicker.background#634C42
button.background#24639b
button.border#00000025
button.foreground#ffffff
button.hoverBackground#1475ca
checkbox.foreground#ffffff
contrastBorder#0000002c
debugToolBar.background#634C42
descriptionForeground#ebebeb
diffEditor.border#00000054
diffEditor.diagonalFill#3d260ca6
diffEditor.insertedTextBackground#4bff9018
diffEditor.removedTextBackground#ff787828
disabledForeground#888888
dropdown.background#634C42
dropdown.border#FFF2DC10
editor.background#634c42
editor.findMatchBackground#ff005534
editor.findMatchBorder#ffffffb6
editor.findMatchHighlightBackground#ff00551e
editor.findMatchHighlightBorder#ffffff88
editor.foreground#ffffff
editor.lineHighlightBackground#634C4250
editor.lineHighlightBorder#b1a9a450
editor.selectionBackground#ff00553d
editor.selectionHighlightBackground#ff005534
editor.selectionHighlightBorder#ffffffb6
editor.wordHighlightBackground#ff005500
editor.wordHighlightStrongBackground#ff00551c
editorBracketMatch.background#634242
editorBracketMatch.border#cacacab3
editorCursor.foreground#d7d7d7
editorError.foreground#ff5959
editorGhostText.foreground#ffffff9a
editorGroup.border#1d0e0785
editorGroupHeader.tabsBackground#74594e
editorGutter.addedBackground#91ff9193
editorGutter.deletedBackground#f76c6c
editorGutter.modifiedBackground#838bffe5
editorHoverWidget.background#633923
editorHoverWidget.border#D59F54
editorHoverWidget.foreground#D6F0FF
editorIndentGuide.activeBackground#d59f54c9
editorIndentGuide.background#D59F5470
editorInfo.foreground#D59F54
editorLightBulb.foreground#fffb01
editorLineNumber.activeForeground#d6f0fff1
editorLineNumber.foreground#b9b9b9c0
editorLink.activeForeground#ffa526
editorMarkerNavigation.background#D59F5470
editorOverviewRuler.border#352a25dc
editorOverviewRuler.errorForeground#ff1515
editorOverviewRuler.findMatchForeground#ffa5a5
editorOverviewRuler.infoForeground#D59F54
editorOverviewRuler.warningForeground#D59F54
editorRuler.foreground#D59F54
editorSuggestWidget.background#634C42
editorSuggestWidget.border#FFF2DC10
editorSuggestWidget.foreground#D6F0FF
editorSuggestWidget.highlightForeground#000000
editorSuggestWidget.selectedBackground#ff000020
editorWarning.foreground#fffd98e5
editorWhitespace.foreground#cacaca5d
editorWidget.background#9c674f
editorWidget.border#ffe3bbd2
editorWidget.foreground#1c1411
editorWidget.resizeBorder#ffe3bbd2
extensionButton.prominentBackground#00000090
extensionButton.prominentHoverBackground#000000
focusBorder#FFF2DC00
foreground#ffffff
gitDecoration.conflictingResourceForeground#f2ff3e
gitDecoration.deletedResourceForeground#f2ff3e
gitDecoration.ignoredResourceForeground#1c1411
gitDecoration.modifiedResourceForeground#fffd98e5
gitDecoration.untrackedResourceForeground#a2ffb2
icon.foreground#000000
input.background#9c805bd3
input.border#251f1548
input.foreground#000000
input.placeholderForeground#494949de
inputOption.activeBackground#bb5940
inputOption.activeBorder#bb594088
inputValidation.errorBorder#fc1d1d91
inputValidation.infoBorder#d59f54a1
inputValidation.warningBorder#fc1d1d91
keybindingLabel.background#fff9f7f8
keybindingLabel.border#fff9f7f3
keybindingLabel.bottomBorder#fff9f7ee
keybindingLabel.foreground#0f0f0f
list.activeSelectionBackground#cab894f6
list.activeSelectionForeground#ffffff
list.dropBackground#d3bf97f6
list.errorForeground#cf518c
list.focusBackground#a88363ef
list.focusForeground#ffffff
list.highlightForeground#ffffff
list.hoverBackground#c2b8a37e
list.hoverForeground#ffffff
list.inactiveSelectionBackground#c5b594f6
list.inactiveSelectionForeground#ffffff
list.warningForeground#fffd98e5
listFilterWidget.background#ff4d0030
listFilterWidget.noMatchesOutline#634C4230
listFilterWidget.outline#634C4230
menu.background#945a5a
menu.border#000000a3
menu.foreground#D6F0FF
menu.selectionBackground#d97676
menu.selectionBorder#d6f0ffc5
menu.selectionForeground#D6F0FF
menu.separatorBackground#D6F0FF
menubar.selectionBackground#945a5a
menubar.selectionBorder#00000050
menubar.selectionForeground#D6F0FF
merge.currentContentBackground#37fd8331
merge.currentHeaderBackground#37fd8352
merge.incomingContentBackground#3765fd3d
merge.incomingHeaderBackground#3765fd52
minimap.background#634C42
minimapGutter.addedBackground#91ff9193
minimapGutter.deletedBackground#f76c6c
minimapGutter.modifiedBackground#a7acffe5
minimapSlider.activeBackground#cfcfcf13
minimapSlider.background#cfcfcf13
minimapSlider.hoverBackground#cfcfcf25
notificationLink.foreground#945a5a
notifications.background#634C42
notifications.foreground#D6F0FF
panel.background#422b20
panelTitle.activeBorder#92d7ff
panelTitle.activeForeground#92d7ff
panelTitle.inactiveForeground#85a9be
peekView.border#D59F54
peekViewEditor.background#633923
peekViewEditor.matchHighlightBackground#00000050
peekViewEditorGutter.background#633923
peekViewResult.background#633923
peekViewResult.matchHighlightBackground#00000050
peekViewResult.selectionBackground#00000070
peekViewTitle.background#633923
peekViewTitleDescription.foreground#D6F0FF
pickerGroup.border#cfcfcf
pickerGroup.foreground#fffdfd
progressBar.background#000000
quickInput.foreground#cacaca
quickInputList.focusBackground#c2b8a37e
quickInputList.focusForeground#fffdfd
quickInputList.focusIconForeground#fffdfd
quickInputTitle.background#9c674f
scrollbar.shadow#634C4200
scrollbarSlider.activeBackground#9191917e
scrollbarSlider.background#9191913b
scrollbarSlider.hoverBackground#9191915b
selection.background#e7e7e79c
settings.checkboxBackground#634c42
settings.checkboxBorder#e4e4e4fa
settings.checkboxForeground#e4e4e4fa
settings.dropdownBackground#634c42
settings.dropdownBorder#e4e4e4fa
settings.dropdownForeground#e4e4e4fa
settings.dropdownListBorder#e4e4e4fa
settings.focusedRowBackground#e4e4e400
settings.focusedRowBorder#e7e7e7bd
settings.headerBorder#e7e7e7
settings.headerForeground#e4e4e4fa
settings.modifiedItemIndicator#a7acffe5
settings.numberInputBackground#634C42
settings.numberInputBorder#e4e4e4fa
settings.numberInputForeground#e4e4e4fa
settings.rowHoverBackground#e4e4e40c
settings.sashBorder#e7e7e7
settings.textInputBackground#634C42
settings.textInputBorder#e4e4e4fa
settings.textInputForeground#e4e4e4fa
sideBar.background#beb095f6
sideBar.border#1a151260
sideBar.foreground#1c1411
sideBarSectionHeader.background#eee0c4be
sideBarSectionHeader.border#1a151260
sideBarSectionHeader.foreground#181615
sideBarTitle.foreground#000000
statusBar.background#ffffff
statusBar.border#00000079
statusBar.debuggingBackground#ffa136
statusBar.debuggingForeground#ffffff
statusBar.foreground#000000
statusBar.noFolderBackground#634C42
statusBarItem.hoverBackground#00000020
statusBarItem.remoteBackground#000000
statusBarItem.remoteForeground#634C42
tab.activeBackground#634C42
tab.activeForeground#ffffff
tab.border#342722
tab.inactiveBackground#74594e
tab.inactiveForeground#b4b4b4
tab.unfocusedActiveBorder#00000049
terminal.ansiBlack#000000
terminal.ansiBlue#3f5cdd
terminal.ansiBrightBlack#000000
terminal.ansiBrightBlue#3f5cdd
terminal.ansiBrightCyan#2efff5
terminal.ansiBrightGreen#56dc58
terminal.ansiBrightMagenta#bb5074
terminal.ansiBrightRed#ff4242
terminal.ansiBrightWhite#FFF2DC
terminal.ansiBrightYellow#fffa6f
terminal.ansiCyan#2efff5
terminal.ansiGreen#56dc58
terminal.ansiMagenta#bb5074
terminal.ansiRed#ff4242
terminal.ansiWhite#FFF2DC
terminal.ansiYellow#fffa6f
terminalCursor.background#cacaca
terminalCursor.foreground#cacaca
textLink.activeForeground#ace8ff
textLink.foreground#ffffff
textPreformat.foreground#ffffff
textSeparator.foreground#ffffff
titleBar.activeBackground#bd9a7b
titleBar.activeForeground#000000
titleBar.border#634c4279
titleBar.inactiveBackground#af897a
titleBar.inactiveForeground#000000
tree.indentGuidesStroke#392b1ba9
widget.shadow#634C4230

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#a5ff7c	—
punctuation, meta.brace	#ffffff	—
string, punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.definition.string.template.begin, punctuation.definition.string.template.end	#ffb167	—
support.type.primitive.ts	#35f099da	—
storage.type, constant.language.boolean, storage.modifier, variable.language.this.ts	#3cb1ff	—
keyword.control, storage.modifier.async.ts	#f479ffe8	—
constant.numeric	#f6afffef	—
constant.boolean	#FF0000	—
entity.name.function.c	#ffff83	—
variable.other, support.type.property-name.css, entity.other.attribute-name.html	#3cf2ff	—
entity.name.tag.css, entity.other.attribute-name.class.css	#D7BA7D	—
support.constant.property-value.css, support.constant.color.w3c-extended-color-name, support.constant.color.w3c-standard-color-name.css, string.quoted.double.css	#ff976e	—
entity.name.tag.html	#ffff83	—
punctuation.definition.tag.end.html, punctuation.definition.tag.begin.html	#c0c056	—

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