DS Temas

Name: DS Temas
Author: FelipeSantos92Dev

Publisher: FelipeSantos92DevThemes in package: 10

Temas desenvolvidos com base nas cores preferenciais dos alunos do curso de Desenvolvimento de Sistemas de Valinhos

Open in VS Code GitHub

Color themes

VS Code preview

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

DS Temas — Jennifer SPFC

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

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#c62f5226
activityBar.activeBorder#c62f52
activityBar.background#21161b
activityBar.border#150e12
activityBar.dropBorder#c496ad33
activityBar.foreground#c62f52
activityBar.inactiveForeground#c496adb3
activityBarBadge.background#c62f52
activityBarBadge.foreground#21161b
badge.background#c62f52
badge.foreground#21161b
breadcrumb.activeSelectionForeground#c62f52
breadcrumb.background#281a21
breadcrumb.focusForeground#c62f52
breadcrumb.foreground#c496ad
breadcrumbPicker.background#281a21
button.background#c62f5275
button.border#c62f5275
button.foreground#d8cfd3
button.hoverBackground#c62f5290
button.secondaryBackground#c62f5220
button.secondaryForeground#d8cfd3
button.secondaryHoverBackground#c62f5235
charts.blue#c496ad
charts.foreground#d8cfd3
charts.green#d8cfd3
charts.lines#d8cfd3
charts.orange#c62f52
charts.purple#a85991
charts.red#e35535
charts.yellow#c62f52
commandCenter.activeBackground#37242e60
commandCenter.activeForeground#c2b2ba90
commandCenter.background#281a21
commandCenter.border#150e12
commandCenter.foreground#c496ad
contrastActiveBorder#00000000
contrastBorder#00000000
descriptionForeground#c2b2ba
diffEditor.border#150e12
diffEditor.diagonalFill#150e1280
diffEditor.insertedLineBackground#d8cfd320
diffEditor.insertedTextBackground#d8cfd320
diffEditor.insertedTextBorder#00000000
diffEditor.removedLineBackground#e3553525
diffEditor.removedTextBackground#e3553525
diffEditor.removedTextBorder#00000000
diffEditorGutter.insertedLineBackground#00000000
diffEditorGutter.removedLineBackground#00000000
diffEditorOverview.insertedForeground#d8cfd325
diffEditorOverview.removedForeground#e3553530
disabledForeground#c2b2ba4d
dropdown.background#2e1e26
dropdown.border#44313a
dropdown.foreground#d8cfd3
dropdown.listBackground#2e1e26
editor.background#281a21
editor.findMatchBackground#c62f5230
editor.findMatchBorder#c62f5260
editor.findMatchHighlightBackground#c62f5233
editor.findMatchHighlightBorder#c62f524d
editor.findRangeHighlightBackground#c62f5233
editor.foldBackground#21161b
editor.foreground#d8cfd3
editor.hoverHighlightBackground#c62f5240
editor.inactiveSelectionBackground#c62f5240
editor.lineHighlightBackground#c62f520d
editor.lineHighlightBorder#c62f5220
editor.linkedEditingBackground#c62f5233
editor.rangeHighlightBackground#c62f5233
editor.selectionBackground#c62f5240
editor.selectionForeground#d8cfd3
editor.selectionHighlightBackground#c62f5215
editor.selectionHighlightBorder#c62f5240
editor.wordHighlightBackground#c62f5220
editor.wordHighlightBorder#c62f524d
editor.wordHighlightStrongBackground#c62f5240
editorBracketHighlight.foreground1#c62f52
editorBracketHighlight.foreground2#d8cfd3
editorBracketHighlight.foreground3#c496ad
editorBracketHighlight.foreground4#a85991
editorBracketHighlight.foreground5#e8dde1
editorBracketHighlight.foreground6#c62f52
editorBracketHighlight.unexpectedBracket.foreground#e35535
editorBracketMatch.background#c62f5240
editorBracketMatch.border#c62f5260
editorCodeLens.foreground#c2b2ba80
editorCursor.background#c62f52
editorCursor.foreground#e8dde1
editorError.border#00000000
editorError.foreground#e35535
editorGhostText.border#00000000
editorGhostText.foreground#d8cfd370
editorGroup.border#150e12
editorGroup.dropBackground#c62f5215
editorGroupHeader.border#00000000
editorGroupHeader.noTabsBackground#281a21
editorGroupHeader.tabsBackground#21161b
editorGroupHeader.tabsBorder#150e12
editorGutter.addedBackground#d8cfd3
editorGutter.background#281a21
editorGutter.commentRangeForeground#37242e
editorGutter.deletedBackground#e35535
editorGutter.modifiedBackground#c496ad
editorHoverWidget.background#37242e
editorHoverWidget.border#150e12
editorIndentGuide.activeBackground1#c496adcc
editorIndentGuide.background1#c496ad33
editorInfo.border#00000000
editorInfo.foreground#c496ad
editorInlayHint.background#c2b2ba20
editorInlayHint.foreground#c2b2ba90
editorInlayHint.typeBackground#a85991
editorInlayHint.typeForeground#a85991aa
editorLineNumber.activeForeground#ac8f9e
editorLineNumber.foreground#4e3a44
editorLink.activeForeground#d8cfd3
editorMarkerNavigation.background#21161b
editorMarkerNavigationError.background#e3553590
editorMarkerNavigationInfo.background#c496ad90
editorMarkerNavigationWarning.background#c62f5290
editorOverviewRuler.addedForeground#d8cfd3
editorOverviewRuler.border#150e12
editorOverviewRuler.deletedForeground#e35535
editorOverviewRuler.errorForeground#e35535
editorOverviewRuler.findMatchForeground#c62f52
editorOverviewRuler.infoForeground#c496ad
editorOverviewRuler.modifiedForeground#c496ad
editorOverviewRuler.rangeHighlightForeground#c62f5240
editorOverviewRuler.selectionHighlightForeground#c62f5240
editorOverviewRuler.warningForeground#c62f52
editorOverviewRuler.wordHighlightForeground#c62f5240
editorOverviewRuler.wordHighlightStrongForeground#c62f5260
editorRuler.foreground#c496ad33
editorStickyScrollHover.background#3b2630
editorSuggestWidget.background#281a21
editorSuggestWidget.border#150e12
editorSuggestWidget.foreground#c2b2ba
editorSuggestWidget.highlightForeground#c62f52
editorSuggestWidget.selectedBackground#c62f524d
editorUnnecessaryCode.border#00000000
editorUnnecessaryCode.opacity#000000aa
editorWarning.border#00000000
editorWarning.foreground#c62f52
editorWhitespace.foreground#c496ad60
editorWidget.background#37242e
editorWidget.border#150e12
editorWidget.foreground#d8cfd3
editorWidget.resizeBorder#c62f5250
errorForeground#e35535
errorLens.errorForeground#e3553599
errorLens.hintForeground#c496ad99
errorLens.infoForeground#c496ad99
errorLens.warningForeground#c62f5299
extensionButton.background#c62f5260
extensionButton.foreground#d8cfd3
extensionButton.hoverBackground#c62f5290
extensionButton.prominentBackground#c62f529d
extensionButton.prominentForeground#d8cfd3
extensionButton.prominentHoverBackground#c62f52
focusBorder#c62f5280
foreground#d8cfd3
gitDecoration.addedResourceForeground#d8cfd3
gitDecoration.conflictingResourceForeground#c62f52
gitDecoration.deletedResourceForeground#e35535
gitDecoration.ignoredResourceForeground#c496ad
gitDecoration.modifiedResourceForeground#c496ad
gitDecoration.untrackedResourceForeground#d8cfd3
icon.foreground#c2b2baAA
input.background#2e1e26
input.border#44313a
input.foreground#d8cfd3
input.placeholderForeground#7f5c6e
inputValidation.errorBackground#37242e
inputValidation.errorBorder#e35535
inputValidation.infoBackground#37242e
inputValidation.infoBorder#c62f52
inputValidation.warningBackground#37242e
inputValidation.warningBorder#c62f52
keybindingLabel.background#37242e
keybindingLabel.border#6b5661
keybindingLabel.bottomBorder#6b5661
keybindingLabel.foreground#9f8894
list.activeSelectionBackground#56384873
list.activeSelectionForeground#d8cfd3
list.dropBackground#c62f5215
list.errorForeground#e35535
list.focusBackground#c62f5240
list.focusForeground#c2b2ba
list.highlightForeground#c62f52
list.hoverBackground#462e3b33
list.hoverForeground#e3dde0
list.inactiveSelectionBackground#56384840
list.inactiveSelectionForeground#d8cfd3
list.warningForeground#c62f52
menu.background#37242e
menu.border#150e12
menu.foreground#b6a4ad
menu.selectionForeground#faf9fa
menu.separatorBackground#150e1265
menubar.selectionBackground#37242e
menubar.selectionForeground#c2b2ba
merge.border#150e12
merge.commonContentBackground#c62f5230
merge.commonHeaderBackground#c62f5280
merge.currentContentBackground#d8cfd330
merge.currentHeaderBackground#d8cfd380
merge.incomingContentBackground#c496ad30
merge.incomingHeaderBackground#c496ad80
notificationCenterHeader.background#37242e
notificationCenterHeader.foreground#d8cfd3
notificationLink.foreground#c62f52
notifications.background#37242e
notifications.border#150e12
notifications.foreground#c2b2ba
notificationsErrorIcon.foreground#e35535
notificationsInfoIcon.foreground#c496ad
notificationsWarningIcon.foreground#c62f52
panel.background#24181e
panel.border#150e12
panel.dropBorder#c496ad80
panelInput.border#472e3b
panelSection.border#150e12
panelSectionHeader.background#2d1e26
panelSectionHeader.border#150e12
panelSectionHeader.foreground#d8cfd3
panelTitle.activeBorder#c62f52
panelTitle.activeForeground#c62f52
panelTitle.inactiveForeground#c496ad
peekView.border#150e12
peekViewEditor.background#34222b
peekViewEditor.matchHighlightBackground#37242e40
peekViewEditor.matchHighlightBorder#00000000
peekViewEditorGutter.background#34222b
peekViewEditorStickyScroll.background#34222b
peekViewResult.background#301f27
peekViewResult.fileForeground#d8cfd3
peekViewResult.lineForeground#c2b2ba
peekViewResult.matchHighlightBackground#c62f5280
peekViewResult.selectionBackground#c62f5233
peekViewResult.selectionForeground#d8cfd3
peekViewTitle.background#37242e
peekViewTitleDescription.foreground#d8cfd3
peekViewTitleLabel.foreground#d8cfd3
profileBadge.background#c62f52
profileBadge.foreground#281a21
progressBar.background#c62f52
quickInput.background#312029
quickInput.foreground#d8cfd3b3
quickInputList.focusBackground#754c6273
quickInputList.focusForeground#faf9fa
quickInputList.focusIconForeground#c496ad
quickInputTitle.background#21161b
sash.hoverBorder#c62f5250
scrollbar.shadow#00000000
scrollbarSlider.activeBackground#c62f5240
scrollbarSlider.background#c62f5220
scrollbarSlider.hoverBackground#c62f5230
selection.background#c62f5260
settings.headerForeground#c62f52
settings.modifiedItemIndicator#c62f52
sideBar.background#21161b
sideBar.border#150e12
sideBar.dropBackground#c62f5215
sideBar.foreground#c2b2baCC
sideBarSectionHeader.background#21161b
sideBarSectionHeader.border#150e12
sideBarSectionHeader.foreground#d8cfd3
sideBarTitle.foreground#c496ad
statusBar.background#21161b
statusBar.border#150e12
statusBar.debuggingBackground#000000
statusBar.debuggingForeground#c2b2ba
statusBar.foreground#c2b2ba80
statusBar.noFolderBackground#21161b
statusBar.noFolderBorder#150e12
statusBar.noFolderForeground#c2b2bacc
statusBarItem.activeBackground#37242e
statusBarItem.errorBackground#e35535
statusBarItem.errorForeground#160703
statusBarItem.errorHoverBackground#e6684b
statusBarItem.hoverBackground#c2b2ba1a
statusBarItem.offlineBackground#c496ad
statusBarItem.offlineForeground#21161b
statusBarItem.offlineHoverBackground#d8cfd3
statusBarItem.prominentBackground#c62f52
statusBarItem.prominentForeground#000000
statusBarItem.prominentHoverBackground#d13d60
statusBarItem.remoteBackground#c62f52
statusBarItem.remoteForeground#000000
statusBarItem.remoteHoverBackground#d13d60
statusBarItem.warningBackground#c62f52
statusBarItem.warningForeground#000000
statusBarItem.warningHoverBackground#d13d60
tab.activeBackground#281a21
tab.activeBorder#281a21
tab.activeBorderTop#c62f52
tab.activeForeground#c62f52
tab.border#150e12
tab.hoverBackground#281a21
tab.inactiveBackground#21161b
tab.inactiveForeground#c496ad
tab.lastPinnedBorder#150e12
tab.unfocusedActiveBorder#281a21
tab.unfocusedActiveForeground#c62f52
tab.unfocusedHoverBackground#281a21
tab.unfocusedInactiveForeground#c496ad
terminal.ansiBlack#281a21
terminal.ansiBlue#c496ad
terminal.ansiBrightBlack#4e3a44
terminal.ansiBrightBlue#d8cfd3
terminal.ansiBrightCyan#e8dde1
terminal.ansiBrightGreen#f0e6ea
terminal.ansiBrightMagenta#c496ad
terminal.ansiBrightRed#e35535
terminal.ansiBrightWhite#faf9fa
terminal.ansiBrightYellow#faf9fa
terminal.ansiCyan#c2b2ba
terminal.ansiGreen#d8cfd3
terminal.ansiMagenta#a85991
terminal.ansiRed#c62f52
terminal.ansiWhite#d8cfd3
terminal.ansiYellow#e8dde1
terminal.background#24181e
terminal.foreground#d8cfd3
terminal.selectionBackground#c62f5240
terminal.selectionForeground#d8cfd3
terminalCursor.background#281a21
terminalCursor.foreground#c62f52
textBlockQuote.background#37242e
textBlockQuote.border#c62f52
textCodeBlock.background#37242e
textLink.activeForeground#d13d60
textLink.foreground#c62f52
textPreformat.foreground#c62f52
textSeparator.foreground#c62f52
titleBar.activeBackground#21161b
titleBar.activeForeground#c496ad
titleBar.border#150e12
titleBar.inactiveBackground#150e12
titleBar.inactiveForeground#c496ad
toolbar.hoverBackground#c496ad60
tree.indentGuidesStroke#c496ad70
welcomePage.progress.background#37242e
welcomePage.progress.foreground#c62f52
welcomePage.tileBackground#c2b2ba10
welcomePage.tileBorder#c2b2ba20
welcomePage.tileHoverBackground#c2b2ba20
widget.shadow#150e1230
window.activeBorder#c62f52
window.inactiveBorder#150e12

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, meta.var.expr storage.type, keyword.control.flow, keyword.control.return, meta.directive.vue punctuation.separator.key-value.html, meta.directive.vue entity.other.attribute-name.html, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js, storage.modifier, string.quoted.docstring.multi, string.quoted.docstring.multi.python punctuation.definition.string.begin, string.quoted.docstring.multi.python punctuation.definition.string.end, string.quoted.docstring.multi.python constant.character.escape	—	italic
comment, comment.block.documentation, punctuation.definition.comment, comment.block.documentation punctuation, string.quoted.docstring.multi, string.quoted.docstring.multi.python punctuation.definition.string.begin, string.quoted.docstring.multi.python punctuation.definition.string.end, string.quoted.docstring.multi.python constant.character.escape	#c496ad	—
constant, support.constant.core.php	#e35535	—
variable.other.constant, punctuation.definition.constant, constant.language, constant.numeric, support.constant, constant.other.caps	#c62f52	—
string, constant.other.symbol, constant.other.key, meta.attribute-selector, string constant.character	#d8cfd3	—
invalid, invalid.illegal	#e35535	—
storage.type	#c496ad	—
meta.var.expr storage.type, storage.modifier	#c496ad	—
keyword.operator, keyword.control.as, keyword.other, keyword.operator.bitwise.shift, punctuation, keyword.control, keyword.control.conditional, storage.modifier, keyword.operator.new, keyword.operator.expression	#c62f52	—
support.function, entity.name.function, meta.function-call, meta.function, meta.method.declaration, meta.function-call support, variable.language.super.ts, source.directive, meta.function-call.generic, meta.method-call.static.php, meta.method-call.php, meta.class storage.type, meta.method.groovy, meta.bracket.square.access, entity.name.function-call.elixir, entity.name.function.powershell	#c496ad	—
variable, variable.language, entity.name.type.class.js, entity.name.variable, support.variable.magic, meta.method.body, entity.name.variable, punctuation.definition.variable, meta.class variable.object.property, variable.other.constant entity.name.function, meta.definition.variable.name.groovy, meta.body.struct.cpp, parameter.variable.function.elixir, support.variable.automatic.powershell	#c62f52	—
entity.name.function.decorator, meta.decorator entity.name.function, meta.decorator punctuation.decorator, punctuation.definition.decorator, meta.decorator variable.other.readwrite.ts, variable.parameter.gdscript, entity.name.variable.parameter, variable.parameter	#a85991	—
entity.name.type, support.type, support.class, storage.type, entity.other.inherited-class, keyword.type, storage.type.java, storage.type.primitive.java, storage.type.generic.java, keyword.other.type, storage.type.object.array.java, storage.type.primitive.groovy, storage.type.groovy, entity.name.type.class.php, support.class.php, entity.other.inherited-class.php, entity.other.alias.php	#a85991	—
storage, meta.var.expr storage.type, storage.type.function, keyword.function, storage.type.class, storage.type.property, keyword.other, keyword.local.lua, entity.name.class, storage.type.enum, storage.type.interface, storage.type.type, entity.name.type.class.java, storage.type.trait.php, keyword.type.go, keyword.var.go, storage.type.powershell, keyword.const.go	#c496ad	—
entity.name.tag	#c496ad	—
entity.other.attribute-name, text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name	#c62f52	—
meta.object-literal.key, variable.object.property, variable.other.property, support.variable.property, support.variable.property.dom, meta.function-call variable.other.object.property	#d8cfd3	—
support.type.property-name.css, support.type.vendored.property-name, meta.property-list entity.name.tag.css, meta.property-list.scss meta.property-list.scss entity.name.tag.css, meta.property-list meta.property-name, source.css.scss meta.property-list.scss entity.name.tag.css	#d8cfd3	—
entity.other.attribute-name.class, entity.other.attribute-name.class punctuation.definition.entity	#c496ad	—
entity.other.attribute-name.id, entity.other.attribute-name.id punctuation.definition.entity	#a85991	—
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element	#a85991	—
entity.name.tag.css, meta.property-list.scss entity.name.tag.css	#c496ad	—
string.regexp	#d8cfd3	—
constant.character.escape	#c62f52	—
source.json meta.structure.dictionary.json support.type.property-name.json	#c496ad	—
heading.1.markdown entity.name, heading.1.markdown punctuation.definition.heading.markdown, heading.2.markdown entity.name, heading.2.markdown punctuation.definition.heading.markdown, heading.3.markdown entity.name, heading.3.markdown punctuation.definition.heading.markdown, heading.4.markdown entity.name, heading.4.markdown punctuation.definition.heading.markdown, heading.5.markdown entity.name, heading.5.markdown punctuation.definition.heading.markdown, heading.6.markdown entity.name, heading.6.markdown punctuation.definition.heading.markdown	#c62f52	bold
markup.bold, punctuation.definition.bold	#c62f52	bold
markup.italic, punctuation.definition.italic	#c62f52	italic
markup.underline.link, markup.underline.link.image, string.other.link, constant.other.reference.link.markdown, string.other.link.description.title.markdown	#c496ad	—
markup.inline.raw.string.markdown, punctuation.definition.raw.markdown, markup.fenced_code.block.markdown, markup.fenced_code.block.markdown punctuation, markup.raw.block.markdown	#a85991	—
markup.quote, markup.quote.markdown punctuation.definition.quote.begin	#a85991	—
markup.inserted, markup.inserted.git_gutter, source.diff markup.inserted.diff, source.diff punctuation.definition.inserted.diff	#d8cfd3	—
markup.deleted, markup.deleted.git_gutter, source.diff markup.deleted.diff, source.diff punctuation.definition.deleted.diff	#e35535	—
markup.changed, markup.changed.git_gutter	#c496ad	—
punctuation, meta.brace, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.arguments, punctuation.section, punctuation.terminator, punctuation.separator	#d8cfd360	—
support.function	#c496ad	—
constant.language, support.constant, variable.language.this, variable.language.special.self	#c62f52	—

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