Skip to main content
Home Theme VS Code Paysandu Themes Temas inspirados nas cores dos uniformes do Gigante do Norte
Paysandu Themes | Coding Theme
VS Code preview Full workbench mockup using this variant's colors and tokenColors.
colors Workbench UI color keys from the theme JSON colors map.
activityBar.background #1c75bc activityBar.border #0e5a97 activityBar.foreground #ffffff activityBar.inactiveForeground #ffffffaa activityBarBadge.background #ffffff activityBarBadge.foreground #1c75bc tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, punctuation.definition.comment #6e7a9090 italic constant, constant.numeric, constant.language, support.constant #0550ae — string, string.quoted.single, string.quoted.double, string.quoted.template #0a3069 — constant.character.escape #0e97aa — keyword, keyword.control, storage.type, storage.modifier
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Paysandu Themes — Paysandu Celeste
badge.background
#1c75bc
badge.foreground #ffffff
breadcrumb.activeSelectionForeground #1c75bc
breadcrumb.background #f7faff
breadcrumb.focusForeground #383e51
breadcrumb.foreground #657396
breadcrumbPicker.background #ffffff
button.background #1c75bc
button.foreground #ffffff
button.hoverBackground #3088ce
charts.blue #1c75bc
charts.foreground #383e51
charts.green #2ea043
charts.lines #1c75bc40
charts.orange #f5a742
charts.purple #8250df
charts.red #d62626
charts.yellow #efb963
chat.avatarBackground #1c75bc
chat.avatarForeground #ffffff
chat.requestBorder #1c75bc30
chat.slashCommandBackground #ffffff
chat.slashCommandForeground #1c75bc
debugConsole.errorForeground #d62626
debugConsole.infoForeground #383e51
debugConsole.sourceForeground #383e51
debugConsole.warningForeground #efb963
debugConsoleInputIcon.foreground #1c75bc
debugExceptionWidget.background #f7faff
debugExceptionWidget.border #d62626
debugIcon.breakpointDisabledForeground #d6262680
debugIcon.breakpointForeground #d62626
debugIcon.breakpointUnverifiedForeground #d6262680
debugTokenExpression.boolean #0e5a97
debugTokenExpression.error #d62626
debugTokenExpression.name #0e97aa
debugTokenExpression.number #0e5a97
debugTokenExpression.string #2ea043
debugTokenExpression.value #383e51
debugToolBar.background #f7faff
debugView.stateLabelBackground #ffffff
debugView.stateLabelForeground #383e51
debugView.valueChangedHighlight #1c75bcaa
descriptionForeground #4c567a
diffEditor.border #1c75bc30
diffEditor.diagonalFill #1c75bc20
diffEditor.insertedLineBackground #2ea04320
diffEditor.insertedTextBackground #2ea04320
diffEditor.removedLineBackground #d6262622
diffEditor.removedTextBackground #d6262622
diffEditor.unchangedCodeBackground #f0f4fc
diffEditorGutter.insertedLineBackground #2ea04325
diffEditorGutter.removedLineBackground #d6262622
diffEditorOverview.insertedForeground #2ea04325
diffEditorOverview.removedForeground #d6262622
disabledForeground #657396
dropdown.background #ffffff
dropdown.border #1c75bc40
dropdown.foreground #383e51
dropdown.listBackground #ffffff
editor.background #f7faff
editor.findMatchBackground #1c75bc40
editor.findMatchHighlightBackground #1c75bc30
editor.findRangeHighlightBackground #1c75bc20
editor.focusedStackFrameHighlightBackground #1c75bc20
editor.foreground #383e51
editor.inactiveSelectionBackground #1c75bc20
editor.lineHighlightBackground #1c75bc10
editor.lineHighlightBorder #1c75bc25
editor.selectionBackground #1c75bc40
editor.selectionForeground #383e51
editor.stackFrameHighlightBackground #efb96320
editorBracketHighlight.foreground1 #1c75bc
editorBracketHighlight.foreground2 #3088ce
editorBracketHighlight.foreground3 #0e97aa
editorBracketHighlight.foreground4 #4298dd
editorBracketHighlight.foreground5 #66aeed
editorBracketHighlight.foreground6 #0e5a97
editorBracketHighlight.unexpectedBracket.foreground #d62626
editorBracketMatch.background #f7faff
editorBracketMatch.border #1c75bc70
editorCodeLens.foreground #657396
editorGhostText.foreground #1c75bc60
editorGroup.border #1c75bc20
editorGroup.dropBackground #1c75bc20
editorGroupHeader.border #1c75bc20
editorGroupHeader.noTabsBackground #f7faff
editorGroupHeader.tabsBorder #1c75bc20
editorHint.foreground #0e97aa
editorInfo.foreground #0e97aa
editorLightBulb.foreground #efb963
editorLightBulbAutoFix.foreground #efb963
editorOverviewRuler.addedForeground #2ea043
editorOverviewRuler.border #1c75bc30
editorOverviewRuler.bracketMatchForeground #1c75bc80
editorOverviewRuler.deletedForeground #d62626
editorOverviewRuler.errorForeground #d62626
editorOverviewRuler.findMatchForeground #1c75bc44
editorOverviewRuler.infoForeground #0e97aa
editorOverviewRuler.modifiedForeground #0e5a97
editorOverviewRuler.rangeHighlightForeground #1c75bc44
editorOverviewRuler.selectionHighlightForeground #1c75bc22
editorOverviewRuler.warningForeground #efb963
editorOverviewRuler.wordHighlightForeground #1c75bc55
editorOverviewRuler.wordHighlightStrongForeground #1c75bc66
editorRuler.foreground #1c75bc30
editorSuggestWidget.background #ffffff
editorSuggestWidget.border #1c75bc40
editorSuggestWidget.highlightForeground #1c75bc
editorSuggestWidget.selectedBackground #1c75bc40
editorUnnecessaryCode.border #00000000
editorUnnecessaryCode.opacity #00000055
editorWarning.foreground #efb963
editorWidget.background #f5f8ff
editorWidget.border #1c75bc40
errorForeground #d62626
extensionBadge.remoteBackground #1c75bc
extensionBadge.remoteForeground #ffffff
extensionButton.prominentBackground #1c75bcDD
extensionButton.prominentForeground #ffffff
extensionButton.prominentHoverBackground #1c75bcAA
focusBorder #1c75bc80
foreground #383e51
gitDecoration.addedResourceForeground #2ea043
gitDecoration.deletedResourceForeground #d62626
gitDecoration.modifiedResourceForeground #1c75bc
icon.foreground #1c75bcAA
inlineChat.background #f7faff
inlineChat.foreground #383e51
inlineChatDiff.inserted #2ea04340
inlineChatDiff.removed #d6262642
inlineChatInput.background #ffffff
inlineChatInput.border #1c75bc40
inlineChatInput.focusBorder #1c75bc
input.background #ffffff
input.border #1c75bc40
input.foreground #383e51
input.placeholderForeground #1c75bc80
inputOption.activeBackground #1c75bc99
inputOption.activeForeground #ffffff
inputValidation.errorBackground #d6262680
inputValidation.errorBorder #d62626
inputValidation.errorForeground #ffffff
inputValidation.infoBackground #1c75bc5c
inputValidation.infoBorder #1c75bc
inputValidation.infoForeground #383e51
inputValidation.warningBackground #f5a742
inputValidation.warningBorder #efb963
inputValidation.warningForeground #000000
list.activeSelectionBackground #1c75bc40
list.activeSelectionForeground #1c75bc
list.deemphasizedForeground #657396
list.dropBackground #1c75bc20
list.errorForeground #d62626
list.highlightForeground #1c75bc
list.hoverBackground #1c75bc15
list.hoverForeground #383e51
list.inactiveSelectionBackground #1c75bc20
list.inactiveSelectionForeground #1c75bc
list.warningForeground #efb963
listFilterWidget.background #f7faff
listFilterWidget.noMatchesOutline #d62626
listFilterWidget.outline #1c75bc
menu.background #f7faff
menu.border #1c75bc20
menu.foreground #383e51
menu.selectionBackground #1c75bc20
menu.selectionForeground #1c75bc
menu.separatorBackground #1c75bc30
menubar.selectionBackground #1c75bc20
menubar.selectionBorder #1c75bc40
menubar.selectionForeground #1c75bc
merge.currentContentBackground #2ea04344
merge.currentHeaderBackground #2ea04325
merge.incomingContentBackground #1c75bc44
merge.incomingHeaderBackground #1c75bcaa
mergeEditor.change.background #2ea04325
mergeEditor.change.word.background #2ea04340
mergeEditor.conflict.handled.minimapOverViewRuler #2ea043
mergeEditor.conflict.handledFocused.border #2ea04365
mergeEditor.conflict.handledUnfocused.border #2ea04325
mergeEditor.conflict.unhandled.minimapOverViewRuler #efb963
mergeEditor.conflict.unhandledFocused.border #efb963b0
mergeEditor.conflict.unhandledUnfocused.border #efb96388
minimapGutter.addedBackground #2ea043
minimapGutter.deletedBackground #d62626
minimapGutter.modifiedBackground #1c75bc
notebook.cellBorderColor #1c75bc20
notebook.cellEditorBackground #ffffff
notebook.cellStatusBarItemHoverBackground #1c75bc20
notebook.editorBackground #f7faff
notebook.focusedCellBorder #1c75bc
notificationCenterHeader.background #f0f4fc
notificationLink.foreground #1c75bc
notifications.background #f7faff
notificationsErrorIcon.foreground #d62626
notificationsInfoIcon.foreground #0e97aa
notificationsWarningIcon.foreground #efb963
panel.background #f7faff
panel.border #1c75bc40
panelTitle.activeBorder #1c75bc
panelTitle.activeForeground #1c75bc
panelTitle.inactiveForeground #1c75bc80
peekView.border #1c75bc40
peekViewEditor.background #f0f4fc
peekViewEditor.matchHighlightBackground #1c75bc40
peekViewResult.background #f7faff
peekViewResult.fileForeground #383e51
peekViewResult.lineForeground #4c567a
peekViewResult.matchHighlightBackground #1c75bc40
peekViewResult.selectionBackground #1c75bc40
peekViewResult.selectionForeground #1c75bc
peekViewTitle.background #f0f4fc
peekViewTitleDescription.foreground #4c567a
peekViewTitleLabel.foreground #1c75bc
pickerGroup.border #1c75bc40
pickerGroup.foreground #1c75bc
progressBar.background #1c75bc
scrollbar.shadow #00000033
scrollbarSlider.activeBackground #1c75bc45
scrollbarSlider.background #1c75bc25
scrollbarSlider.hoverBackground #1c75bc35
sideBar.background #ffffff
sideBar.border #1c75bc40
sideBar.foreground #4c567a
sideBarSectionHeader.background #1c75bc20
sideBarSectionHeader.border #1c75bc40
sideBarSectionHeader.foreground #1c75bc
sideBarTitle.foreground #1c75bc
statusBar.background #1c75bc
statusBar.border #0e5a97
statusBar.debuggingBackground #1c75bcEE
statusBar.debuggingForeground #ffffff
statusBar.foreground #ffffff
statusBar.noFolderBackground #1c75bc
statusBar.noFolderForeground #ffffff
symbolIcon.arrayForeground #0e5a97
symbolIcon.booleanForeground #0e5a97
symbolIcon.classForeground #953800
symbolIcon.colorForeground #f5a742
symbolIcon.constantForeground #0550ae
symbolIcon.constructorForeground #8250df
symbolIcon.enumeratorForeground #953800
symbolIcon.enumeratorMemberForeground #0550ae
symbolIcon.eventForeground #f5a742
symbolIcon.fieldForeground #0550ae
symbolIcon.fileForeground #383e51
symbolIcon.folderForeground #383e51
symbolIcon.functionForeground #8250df
symbolIcon.interfaceForeground #953800
symbolIcon.keyForeground #0550ae
symbolIcon.keywordForeground #1c75bc
symbolIcon.methodForeground #8250df
symbolIcon.moduleForeground #1c75bc
symbolIcon.namespaceForeground #1c75bc
symbolIcon.nullForeground #0e5a97
symbolIcon.numberForeground #0e5a97
symbolIcon.objectForeground #953800
symbolIcon.operatorForeground #1c75bc
symbolIcon.packageForeground #953800
symbolIcon.propertyForeground #953800
symbolIcon.referenceForeground #0550ae
symbolIcon.snippetForeground #2ea043
symbolIcon.stringForeground #0a3069
symbolIcon.structForeground #953800
symbolIcon.textForeground #383e51
symbolIcon.typeParameterForeground #953800
symbolIcon.unitForeground #0e5a97
symbolIcon.variableForeground #0550ae
tab.activeBackground #f7faff
tab.activeBorder #1c75bc
tab.activeForeground #1c75bc
tab.border #1c75bc20
tab.inactiveBackground #e6effc
tab.inactiveForeground #1c75bc90
tab.unfocusedActiveBorder #1c75bc80
terminal.ansiBlue #1c75bc
terminal.ansiBrightBlue #388bdc
terminal.ansiBrightCyan #39b3c3
terminal.ansiBrightGreen #3dc550
terminal.ansiBrightMagenta #b87fff
terminal.ansiBrightRed #e73535
terminal.ansiBrightYellow #e7ae35
terminal.ansiCyan #0e97aa
terminal.ansiGreen #2ea043
terminal.ansiMagenta #a371f7
terminal.ansiRed #d62626
terminal.ansiYellow #d29922
terminal.background #f7faff
terminal.foreground #383e51
terminalCursor.background #f7faff
terminalCursor.foreground #0e5a97
textBlockQuote.background #f0f4fc
textCodeBlock.background #f0f4fc
textLink.activeForeground #0e5a97
textLink.foreground #1c75bc
textPreformat.foreground #0e5a97
textSeparator.foreground #1c75bc60
titleBar.activeBackground #1c75bc
titleBar.activeForeground #ffffff
titleBar.border #0e5a97
titleBar.inactiveBackground #1c75bc99
titleBar.inactiveForeground #ffffffcc
toolbar.activeBackground #e6effc
toolbar.hoverBackground #e6effc
tree.indentGuidesStroke #1c75bc40
walkThrough.embeddedEditorBackground #f7faff
widget.shadow #00000033 entity.name.function, meta.function-call, support.function #8250df —
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution, support.class, support.type #953800 —
variable, variable.other.readwrite, meta.definition.variable #0550ae —
variable.parameter #8250df —
variable.other.property, variable.other.object.property #953800 —
entity.other.attribute-name #953800 —
markup.heading, entity.name.section #1c75bc bold
markup.italic #0550ae italic
markup.underline.link #1c75bc —
markup.inline.raw, markup.fenced_code.block #0e97aa —
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css #953800 —
support.type.property-name.css #1c75bc —
support.constant.property-value.css #0550ae —
support.type.property-name.json #1c75bc —
string.quoted.double.json #0a3069 —
punctuation, punctuation.definition, punctuation.separator, punctuation.terminator, meta.brace #6e7a90 —
punctuation.definition.template-expression, punctuation.section.embedded #0e97aa —
variable.language.this, variable.language.special.self, variable.language.super #953800 italic
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.default #0e97aa bold
meta.object-literal.key, string.alias.graphql, string.unquoted.graphql, string.unquoted.alias.graphql, meta.field.declaration.ts variable.object.property, meta.block entity.name.label #0550ae —
support.type.property-name.media.css #1c75bc —
entity.name.tag.yaml #1c75bc —
markup.underline.link.image.markdown #0e97aa —
beginning.punctuation.definition.list.markdown #1c75bc —
meta.decorator entity.name.function, meta.decorator punctuation.decorator #8250df italic
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 } ! ` ;
}
fetchUser.ts
index.ts
README.md
src
components
fetchUser.ts
src
components
fetchUser.ts
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
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*
Button.tsx
fetchUser
31
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 } ! ` ;
}