Tarren's Theme Collection

Name: Tarren's Theme Collection
Author: Tarren

Publisher: TarrenThemes in package: 10

A personal colourscheme collection.

Open in VS Code GitHub

Color themes

VS Code preview

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

Tarren's Theme Collection — Tarren's themes Slime

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

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBackground#152b2d
activityBar.activeBorder#00000000
activityBar.activeFocusBorder#00000000
activityBar.background#152b2d
activityBar.border#00000000
activityBar.dropBorder#66d9ff
activityBar.foreground#ebeefa
activityBar.inactiveForeground#ebeefacc
activityBarBadge.background#66d9ff
activityBarBadge.foreground#ebeefa
badge.background#66d9ff
badge.foreground#ebeefa
breadcrumb.activeSelectionForeground#cce1ff
breadcrumb.background#152b2d
breadcrumb.focusForeground#ebeefa
breadcrumb.foreground#ebeefa
breadcrumbPicker.background#152b2d
button.background#33eeff
button.foreground#ebeefa
button.hoverBackground#66d9ff
button.secondaryBackground#33eeff
button.secondaryForeground#ebeefa
button.secondaryHoverBackground#66d9ff
checkbox.background#213645
checkbox.border#cce1ff
checkbox.foreground#99d5ff
debugExceptionWidget.background#213645
debugExceptionWidget.border#00000000
descriptionForeground#ebeefa
diffEditor.border#00000000
diffEditor.diagonalFill#213645
diffEditor.insertedTextBackground#ffff9940
diffEditor.insertedTextBorder#00000000
diffEditor.removedTextBackground#33eeff40
diffEditor.removedTextBorder#00000000
dropdown.background#152b2d
dropdown.border#66d9ff80
dropdown.foreground#ebeefa
dropdown.listBackground#152b2d
editor.background#152b2d
editor.findMatchBackground#cce1ff80
editor.findMatchBorder#00000000
editor.findMatchHighlightBackground#99d5ff80
editor.findMatchHighlightBorder#00000000
editor.findRangeHighlightBackground#ee99ff40
editor.findRangeHighlightBorder#00000000
editor.foldBackground#21364580
editor.foreground#ebeefa
editor.hoverHighlightBackground#152b2d
editor.inactiveSelectionBackground#cce1ff40
editor.lineHighlightBackground#00000000
editor.lineHighlightBorder#33eeff40
editor.linkedEditingBackground#152b2d
editor.rangeHighlightBackground#33eeff40
editor.rangeHighlightBorder#00000000
editor.selectionBackground#33eeff40
editor.selectionForeground#cc66ff
editor.selectionHighlightBackground#66d9ff40
editor.selectionHighlightBorder#00000000
editor.symbolHighlightBackground#152b2d
editor.symbolHighlightBorder#00000000
editor.wordHighlightBackground#66d9ff80
editor.wordHighlightBorder#00000000
editor.wordHighlightStrongBackground#66d9ff80
editor.wordHighlightStrongBorder#00000000
editorBracketMatch.background#33eeff80
editorBracketMatch.border#00000000
editorCodeLens.foreground#cce1ff80
editorCursor.background#66d9ff
editorCursor.foreground#66d9ff
editorError.background#00000000
editorError.border#00000000
editorError.foreground#ff3333
editorGroup.border#00000000
editorGroup.dropBackground#66d9ff
editorGroup.emptyBackground#152b2d
editorGroup.focusedEmptyBorder#00000000
editorGroupHeader.border#00000000
editorGroupHeader.noTabsBackground#152b2d
editorGroupHeader.tabsBackground#152b2d
editorGroupHeader.tabsBorder#00000000
editorGutter.addedBackground#ffe66680
editorGutter.background#152b2d
editorGutter.commentRangeForeground#213645
editorGutter.deletedBackground#33eeff80
editorGutter.foldingControlForeground#cce1ffcc
editorGutter.modifiedBackground#9933ff80
editorHint.border#00000000
editorHint.foreground#3377ff
editorHoverWidget.background#152b2d
editorHoverWidget.border#33eeff80
editorHoverWidget.foreground#ebeefa
editorHoverWidget.statusBarBackground#1a3037
editorIndentGuide.activeBackground#cce1ff80
editorIndentGuide.background#cce1ff40
editorInfo.background#00000000
editorInfo.border#00000000
editorInfo.foreground#3377ff
editorLightBulb.foreground#cce1ff80
editorLightBulbAutoFix.foreground#cce1ff80
editorLineNumber.activeForeground#cce1ffcc
editorLineNumber.foreground#cce1ff80
editorLink.activeForeground#ee99ff
editorMarkerNavigation.background#152b2d
editorMarkerNavigationError.background#ff3333
editorMarkerNavigationInfo.background#3377ff
editorMarkerNavigationWarning.background#ffdd33
editorOverviewRuler.border#00000000
editorOverviewRuler.commonContentForeground#99d5ff80
editorOverviewRuler.currentContentForeground#ffff99cc
editorOverviewRuler.incomingContentForeground#cc66ffcc
editorPane.background#152b2d
editorRuler.foreground#33eeff80
editorSuggestWidget.background#152b2d
editorSuggestWidget.border#00000000
editorSuggestWidget.foreground#ebeefa
editorSuggestWidget.highlightForeground#cce1ff
editorSuggestWidget.selectedBackground#213645
editorUnnecessaryCode.border#00000000
editorUnnecessaryCode.opacity#00000080
editorWarning.background#00000000
editorWarning.border#00000000
editorWarning.foreground#ffdd33
editorWhitespace.foreground#cce1ff80
editorWidget.background#152b2d
editorWidget.border#213645
editorWidget.foreground#ebeefa
editorWidget.resizeBorder#213645
errorForeground#ff3333
extensionBadge.remoteBackground#9933ff
extensionBadge.remoteForeground#ebeefa
extensionButton.prominentBackground#33eeff
extensionButton.prominentForeground#ebeefa
extensionButton.prominentHoverBackground#99d5ff
extensionIcon.starForeground#cce1ff
focusBorder#00000000
foreground#ebeefa
icon.foreground#ebeefa
imagePreview.border#213645
input.background#152b2d
input.border#66d9ff80
input.foreground#ebeefa
input.placeholderForeground#ebeefacc
inputOption.activeBackground#1a3037
inputOption.activeBorder#66d9ffcc
inputOption.activeForeground#ebeefa
inputValidation.errorBackground#152b2d
inputValidation.errorBorder#ff3333
inputValidation.errorForeground#ff3333
inputValidation.infoBackground#152b2d
inputValidation.infoBorder#33eeff80
inputValidation.infoForeground#3377ff
inputValidation.warningBackground#152b2d
inputValidation.warningBorder#ffdd33
inputValidation.warningForeground#ffdd33
list.activeSelectionBackground#213645
list.activeSelectionForeground#cce1ff
list.deemphasizedForeground#ebeefacc
list.dropBackground#213645
list.errorForeground#ff3333
list.filterMatchBackground#152b2d
list.filterMatchBorder#152b2d
list.focusBackground#213645
list.focusForeground#ebeefa
list.focusOutline#00000000
list.highlightForeground#ebeefa
list.hoverBackground#213645
list.hoverForeground#ebeefa
list.inactiveFocusBackground#213645
list.inactiveFocusOutline#00000000
list.inactiveSelectionBackground#1a3037
list.inactiveSelectionForeground#ebeefa
list.invalidItemForeground#33eeff
list.warningForeground#ffdd33
listFilterWidget.background#152b2d
listFilterWidget.noMatchesOutline#00000000
listFilterWidget.outline#152b2d
menu.background#152b2d
menu.border#00000000
menu.foreground#ebeefacc
menu.selectionBackground#1a3037
menu.selectionBorder#00000000
menu.selectionForeground#ebeefa
menu.separatorBackground#152b2d
menubar.selectionBackground#1a3037
menubar.selectionBorder#00000000
menubar.selectionForeground#ebeefa
merge.border#00000000
merge.commonContentBackground#00000000
merge.commonHeaderBackground#00000000
merge.currentContentBackground#ffff9940
merge.currentHeaderBackground#ffff9980
merge.incomingContentBackground#cc66ff40
merge.incomingHeaderBackground#cc66ff80
minimap.background#152b2d80
minimap.errorHighlight#ff3333
minimap.findMatchHighlight#cc66ff
minimap.selectionHighlight#99d5ff
minimap.warningHighlight#ffdd33
minimapGutter.addedBackground#ffff99
minimapGutter.deletedBackground#33eeff
minimapGutter.modifiedBackground#cc66ff
minimapSlider.activeBackground#1a303780
minimapSlider.background#1a303780
minimapSlider.hoverBackground#1a303780
notebook.focusedRowBorder#33eeff
notebook.rowHoverBackground#1a3037
notificationCenter.border#00000000
notificationCenterHeader.background#213645
notificationCenterHeader.foreground#ebeefa
notificationLink.foreground#66d9ff
notifications.background#1a3037
notifications.border#00000000
notifications.foreground#ebeefa
notificationsErrorIcon.foreground#ff3333
notificationsInfoIcon.foreground#3377ff
notificationsWarningIcon.foreground#ffdd33
notificationToast.border#00000000
panel.background#152b2d
panel.border#00000000
panel.dropBorder#66d9ff
panelInput.border#00000000
panelSection.border#00000000
panelSection.dropBackground#9933ff
panelSectionHeader.background#152b2d
panelSectionHeader.border#00000000
panelSectionHeader.foreground#ebeefa
panelTitle.activeBorder#66d9ff
panelTitle.activeForeground#cce1ff
panelTitle.inactiveForeground#ebeefa
peekView.border#00000000
peekViewEditor.background#1a3037
peekViewEditor.matchHighlightBackground#33eeff40
peekViewEditor.matchHighlightBorder#00000000
peekViewEditorGutter.background#213645
peekViewResult.background#213645
peekViewResult.fileForeground#ebeefa
peekViewResult.matchHighlightBackground#33eeff40
peekViewResult.selectionBackground#66d9ff40
peekViewResult.selectionForeground#ebeefa
peekViewTitle.background#213645
peekViewTitleDescription.foreground#ebeefa
peekViewTitleLabel.foreground#ebeefa
pickerGroup.border#00000000
pickerGroup.foreground#213645
problemsErrorIcon.foreground#ff3333
problemsInfoIcon.foreground#3377ff
problemsWarningIcon.foreground#ffdd33
progressBar.background#66d9ff
quickInput.background#152b2d
quickInput.foreground#ebeefa
quickInputList.focusBackground#213645
quickInputTitle.background#1a3037
sash.hoverBorder#cce1ff
scrollbar.shadow#1a303780
scrollbarSlider.activeBackground#1a3037
scrollbarSlider.background#152b2d
scrollbarSlider.hoverBackground#1a3037
searchEditor.findMatchBackground#152b2d
searchEditor.findMatchBorder#00000000
searchEditor.textInputBorder#33eeff80
selection.background#33eeff40
settings.checkboxBackground#152b2d
settings.checkboxBorder#99d5ff
settings.checkboxForeground#99d5ff
settings.dropdownBackground#152b2d
settings.dropdownBorder#00000000
settings.dropdownForeground#ebeefa
settings.dropdownListBorder#00000000
settings.focusedRowBackground#1a3037
settings.headerForeground#ebeefa
settings.modifiedItemIndicator#33eeff
settings.numberInputBackground#152b2d
settings.numberInputBorder#00000000
settings.numberInputForeground#ebeefa
settings.textInputBackground#152b2d
settings.textInputBorder#33eeff80
settings.textInputForeground#ebeefa
sideBar.background#152b2d
sideBar.border#00000000
sideBar.dropBackground#66d9ff
sideBar.foreground#ebeefa
sideBarSectionHeader.background#1a3037
sideBarSectionHeader.border#00000000
sideBarSectionHeader.foreground#ebeefa
sideBarTitle.foreground#ebeefa
statusBar.background#152b2d
statusBar.border#00000000
statusBar.debuggingBackground#1a3037
statusBar.debuggingBorder#00000000
statusBar.debuggingForeground#ebeefa
statusBar.foreground#ebeefacc
statusBar.noFolderBackground#ebeefacc
statusBar.noFolderBorder#00000000
statusBar.noFolderForeground#1a3037
statusBarItem.activeBackground#1a3037
statusBarItem.errorBackground#ff333380
statusBarItem.errorForeground#ebeefa
statusBarItem.hoverBackground#213645
statusBarItem.prominentBackground#213645
statusBarItem.prominentForeground#ebeefa
statusBarItem.prominentHoverBackground#213645
statusBarItem.remoteBackground#9933ff80
statusBarItem.remoteForeground#ebeefa
symbolIcon.arrayForeground#cc66ff
symbolIcon.booleanForeground#cc66ff
symbolIcon.classForeground#cc66ff
symbolIcon.colorForeground#cc66ff
symbolIcon.constantForeground#99d5ff
symbolIcon.constructorForeground#99d5ff
symbolIcon.enumeratorForeground#66d9ff
symbolIcon.enumeratorMemberForeground#ebeefa
symbolIcon.eventForeground#cc66ff
symbolIcon.fieldForeground#cc66ff
symbolIcon.fileForeground#cce1ff
symbolIcon.folderForeground#99d5ff
symbolIcon.functionForeground#66d9ff
symbolIcon.interfaceForeground#cc66ff
symbolIcon.keyForeground#9933ff
symbolIcon.keywordForeground#ee99ff
symbolIcon.methodForeground#66d9ff
symbolIcon.moduleForeground#ee99ff
symbolIcon.namespaceForeground#ee99ff
symbolIcon.nullForeground#9933ff
symbolIcon.numberForeground#cc66ff
symbolIcon.objectForeground#9933ff
symbolIcon.operatorForeground#cce1ff
symbolIcon.packageForeground#33eeff
symbolIcon.propertyForeground#ebeefa
symbolIcon.referenceForeground#cce1ff
symbolIcon.snippetForeground#ebeefa
symbolIcon.stringForeground#ffe666
symbolIcon.structForeground#cc66ff
symbolIcon.textForeground#ebeefa
symbolIcon.typeParameterForeground#ebeefa
symbolIcon.unitForeground#9933ff
symbolIcon.variableForeground#99d5ff
tab.activeBackground#152b2d
tab.activeBorder#66d9ff
tab.activeBorderTop#00000000
tab.activeForeground#ebeefa
tab.activeModifiedBorder#33eeff
tab.border#00000000
tab.hoverBackground#1a3037
tab.hoverBorder#66d9ff
tab.hoverForeground#ebeefa
tab.inactiveBackground#152b2d
tab.inactiveForeground#ebeefa80
tab.inactiveModifiedBorder#cce1ff
tab.lastPinnedBorder#00000000
tab.unfocusedActiveBackground#152b2d
tab.unfocusedActiveBorder#99d5ff
tab.unfocusedActiveBorderTop#00000000
tab.unfocusedActiveForeground#ebeefa80
tab.unfocusedActiveModifiedBorder#33eeff
tab.unfocusedHoverBackground#1a3037
tab.unfocusedHoverBorder#cce1ff
tab.unfocusedHoverForeground#ebeefa
tab.unfocusedInactiveBackground#152b2d
tab.unfocusedInactiveForeground#ebeefa80
tab.unfocusedInactiveModifiedBorder#cce1ff
textBlockQuote.background#1a3037
textCodeBlock.background#1a3037
textLink.activeForeground#99d5ff
textLink.foreground#33eeff
textSeparator.foreground#cce1ff
titleBar.activeBackground#152b2d
titleBar.activeForeground#ebeefa
titleBar.border#00000000
titleBar.inactiveBackground#152b2d
titleBar.inactiveForeground#ebeefa80
tree.indentGuidesStroke#cce1ff
tree.tableColumnsBorder#cce1ff
widget.shadow#00000000
window.activeBorder#152b2d
window.inactiveBorder#152b2d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#ebeefa80	italic
variable, string constant.other.placeholder	#ebeefa	—
constant.other.color	#ebeefa	—
invalid, invalid.illegal	#FF4040	—
keyword, storage.type, storage.modifier	#66d9ff	—
keyword.control, constant.other.color	#ee99ff	—
punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution	#ffe666	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#33eeff	—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method	#33eeff	—
meta.block variable.other	#ebeefa	—
support.other.variable, string.other.link	#99d5ff	—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other	#9933ff	—
string, constant.other.symbol, constant.other.key, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js	#ffff99	—
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types, entity.other.inherited-class	#cc66ff	—
support.type	#cc66ff	—
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name	#ffff99	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#33eeff	—
variable.language	#ee99ff	italic
entity.name.method.js	#33eeff	italic
meta.class-method.js entity.name.function.js, variable.function.constructor	#33eeff	—
entity.other.attribute-name	#cc66ff	—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name	#cc66ff	italic
entity.other.attribute-name.class	#cc66ff	—
source.sass keyword.control	#9933ff	—
markup.inserted	#ffe666	—
markup.deleted	#33eeff	—
markup.changed	#9933ff	—
string.regexp	#ee99ff	—
constant.character.escape	#ffff99	—
url, link, uri	#ffff99	underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#33eeff	italic
source.js constant.other.object.key.js string.unquoted.label.js	#99d5ff	italic
source.json meta.structure.dictionary.json support.type.property-name.json	#66d9ff	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#ffe666	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#9933ff	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#99d5ff	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#ffff99	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#ee99ff	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#99d5ff	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#9933ff	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#ffe666	—
text.html.markdown, punctuation.definition.list_item.markdown	#ebeefa	—
text.html.markdown markup.inline.raw.markdown	#ebeefa	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#99d5ff	—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown	#33eeff	—
markup.italic	#33eeff	italic
markup.bold, markup.bold string	#33eeff	bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string	#33eeff	bold
markup.underline	#33eeff	underline
markup.quote punctuation.definition.blockquote.markdown	#99d5ff	—
markup.quote	#99d5ff	italic
string.other.link.title.markdown	#66d9ff	—
string.other.link.description.title.markdown	#ebeefa	—
constant.other.reference.link.markdown	#33eeff	—
markup.raw.block	#66d9ff	—
markup.raw.block.fenced.markdown	#00000050	—
punctuation.definition.fenced.markdown	#00000050	—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end	#ebeefa	—
variable.language.fenced.markdown	#66d9ff	—
meta.separator	#99d5ff	bold
markup.table	#99d5ff	—