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 #212121 activityBar.border #212121 activityBar.foreground #CFD8DC activityBar.inactiveForeground #607D8B activityBarBadge.background #29ABE2 activityBarBadge.foreground #212121 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, punctuation.definition.comment #607D8B italic comment.block.preprocessor #607D8B comment.documentation, comment.block.documentation #81C784 — invalid.illegal #E57373 — keyword.operator
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Paysandu Themes — Paysandu Away
activityBarTop.foreground
#CFD8DC
activityBarTop.inactiveForeground #607D8B
badge.background #26323880
badge.foreground #B0BEC5
breadcrumb.activeSelectionForeground #CFD8DC
breadcrumb.background #212121
breadcrumb.focusForeground #CFD8DC
breadcrumb.foreground #607D8B
breadcrumbPicker.background #37474F
button.background #29ABE280
button.foreground #CFD8DC
button.hoverBackground #66C6FF80
button.secondaryBackground #607D8B
charts.blue #29ABE2
charts.foreground #CFD8DC
charts.green #7CB342
charts.lines #607D8B
charts.orange #F9A825
charts.purple #8E24AA
charts.red #EF5350
charts.yellow #F9A825
chat.avatarBackground #607D8B
chat.avatarForeground #CFD8DC
chat.requestBorder #424242
chat.slashCommandBackground #455A64
chat.slashCommandForeground #607D8B
debugConsole.errorForeground #EF5350
debugConsole.infoForeground #607D8B
debugConsole.sourceForeground #CFD8DC
debugConsole.warningForeground #F9A825
debugConsoleInputIcon.foreground #CFD8DC
debugExceptionWidget.background #37474F
debugExceptionWidget.border #EF5350
debugIcon.breakpointDisabledForeground #607D8B
debugIcon.breakpointForeground #EF5350
debugIcon.breakpointUnverifiedForeground #EF5350
debugTokenExpression.boolean #607D8B
debugTokenExpression.error #EF5350
debugTokenExpression.name #CFD8DC
debugTokenExpression.number #607D8B
debugTokenExpression.string #66C6FF
debugTokenExpression.value #607D8B
debugToolBar.background #37474F
debugView.stateLabelBackground #37474F
debugView.stateLabelForeground #CFD8DC
debugView.valueChangedHighlight #29ABE230
descriptionForeground #607D8B
diffEditor.diagonalFill #A0A0A0
diffEditor.insertedLineBackground #A0A0A030
diffEditor.insertedTextBackground #A0A0A030
diffEditor.removedLineBackground #E5737330
diffEditor.removedTextBackground #E5737330
diffEditor.unchangedCodeBackground #37474F80
diffEditorGutter.insertedLineBackground #A0A0A030
diffEditorGutter.removedLineBackground #E5737330
diffEditorOverview.insertedForeground #A0A0A030
diffEditorOverview.removedForeground #E5737330
disabledForeground #455A64
dropdown.background #37474F
dropdown.foreground #CFD8DC
dropdown.listBackground #37474F
editor.background #212121
editor.findMatchBackground #FFF9C4
editor.findMatchBorder #F9A825
editor.findMatchHighlightBackground #455A6480
editor.findRangeHighlightBackground #455A6480
editor.focusedStackFrameHighlightBackground #29ABE230
editor.foldBackground #37474F80
editor.foreground #CFD8DC
editor.inactiveSelectionBackground #455A6481
editor.lineHighlightBackground #37474F
editor.selectionBackground #29ABE230
editor.selectionHighlightBackground #455A6480
editor.stackFrameHighlightBackground #29ABE230
editor.wordHighlightBackground #455A6480
editor.wordHighlightStrongBackground #B0BEC580
editorBracketHighlight.foreground1 #607D8B
editorBracketHighlight.foreground2 #607D8B
editorBracketHighlight.foreground3 #607D8B
editorBracketHighlight.foreground4 #607D8B
editorBracketHighlight.foreground5 #607D8B
editorBracketHighlight.foreground6 #607D8B
editorBracketHighlight.unexpectedBracket.foreground #EF5350
editorBracketMatch.background #B0BEC580
editorBracketMatch.border #607D8B
editorBracketPairGuide.activeBackground1 #607D8B
editorBracketPairGuide.activeBackground2 #607D8B
editorBracketPairGuide.activeBackground3 #607D8B
editorBracketPairGuide.activeBackground4 #607D8B
editorBracketPairGuide.activeBackground5 #607D8B
editorBracketPairGuide.activeBackground6 #607D8B
editorCodeLens.foreground #607D8B
editorCursor.foreground #29ABE2
editorError.foreground #EF5350
editorGhostText.foreground #607D8B
editorGroup.border #424242
editorGroup.dropBackground #455A64
editorGroupHeader.border #424242
editorGroupHeader.noTabsBackground #212121
editorGroupHeader.tabsBackground #212121
editorGroupHeader.tabsBorder #424242
editorGutter.addedBackground #607D8B
editorGutter.deletedBackground #607D8B
editorGutter.modifiedBackground #607D8B
editorHint.foreground #607D8B
editorHoverWidget.background #37474F
editorHoverWidget.border #424242
editorIndentGuide.activeBackground1 #607D8B
editorIndentGuide.background1 #455A64
editorInfo.foreground #607D8B
editorInlayHint.foreground #607D8B
editorLightBulb.foreground #F9A825
editorLightBulbAutoFix.foreground #F9A825
editorLineNumber.activeForeground #CFD8DC
editorLineNumber.foreground #607D8B
editorLink.activeForeground #29ABE2
editorMarkerNavigation.background #37474F
editorOverviewRuler.addedForeground #37474F
editorOverviewRuler.border #424242
editorOverviewRuler.bracketMatchForeground #B0BEC5
editorOverviewRuler.deletedForeground #37474F
editorOverviewRuler.errorForeground #EF5350
editorOverviewRuler.findMatchForeground #607D8B80
editorOverviewRuler.infoForeground #37474F
editorOverviewRuler.modifiedForeground #37474F
editorOverviewRuler.rangeHighlightForeground #607D8B80
editorOverviewRuler.selectionHighlightForeground #607D8B40
editorOverviewRuler.warningForeground #F9A825
editorOverviewRuler.wordHighlightForeground #607D8B80
editorOverviewRuler.wordHighlightStrongForeground #607D8B90
editorPane.background #212121
editorRuler.foreground #424242
editorSuggestWidget.background #37474F
editorSuggestWidget.border #424242
editorSuggestWidget.highlightForeground #CFD8DC
editorSuggestWidget.selectedBackground #29ABE230
editorWarning.foreground #F9A825
editorWhitespace.foreground #607D8B
editorWidget.background #37474F
editorWidget.border #424242
editorWidget.foreground #CFD8DC
editorWidget.resizeBorder #607D8B
errorForeground #EF5350
extensionBadge.remoteBackground #29ABE2
extensionBadge.remoteForeground #CFD8DC
extensionButton.prominentBackground #29ABE280
extensionButton.prominentForeground #CFD8DC
extensionButton.prominentHoverBackground #66C6FF80
focusBorder #37474F
foreground #B0BEC5
gitDecoration.addedResourceForeground #607D8B
gitDecoration.conflictingResourceForeground #F9A825
gitDecoration.deletedResourceForeground #EF5350
gitDecoration.ignoredResourceForeground #607D8B
gitDecoration.modifiedResourceForeground #607D8B
gitDecoration.renamedResourceForeground #607D8B
gitDecoration.stageDeletedResourceForeground #EF5350
gitDecoration.stageModifiedResourceForeground #607D8B
gitDecoration.untrackedResourceForeground #607D8B
icon.foreground #607D8B
inlineChat.foreground #CFD8DC
inlineChatDiff.inserted #29ABE230
inlineChatDiff.removed #E5737330
inlineChatInput.background #37474F
input.background #37474F
input.border #607D8B
input.foreground #CFD8DC
input.placeholderForeground #607D8B
inputOption.activeBackground #29ABE230
inputOption.activeForeground #CFD8DC
inputValidation.errorBackground #EF5350
inputValidation.errorBorder #EF5350
inputValidation.errorForeground #CFD8DC
inputValidation.infoBackground #455A64
inputValidation.infoBorder #607D8B
inputValidation.infoForeground #CFD8DC
inputValidation.warningBackground #FFEB3B
inputValidation.warningBorder #FDD835
inputValidation.warningForeground #CFD8DC
list.activeSelectionBackground #29ABE230
list.activeSelectionForeground #CFD8DC
list.deemphasizedForeground #607D8B
list.dropBackground #455A64
list.errorForeground #EF5350
list.focusBackground #455A64
list.focusForeground #CFD8DC
list.highlightForeground #CFD8DC
list.hoverBackground #455A64
list.hoverForeground #CFD8DC
list.inactiveSelectionBackground #37474F
list.inactiveSelectionForeground #607D8B
list.invalidItemForeground #EF5350
list.warningForeground #F9A825
listFilterWidget.background #37474F
listFilterWidget.noMatchesOutline #EF5350
listFilterWidget.outline #607D8B
menu.background #37474F
menu.border #424242
menu.foreground #CFD8DC
menu.selectionBackground #455A64
menu.selectionForeground #CFD8DC
menu.separatorBackground #424242
menubar.selectionBackground #455A64
menubar.selectionBorder #424242
menubar.selectionForeground #CFD8DC
merge.currentContentBackground #29ABE230
merge.currentHeaderBackground #455A6480
merge.incomingContentBackground #29ABE230
merge.incomingHeaderBackground #29ABE230
mergeEditor.change.background #29ABE230
mergeEditor.change.word.background #29ABE2
mergeEditor.conflict.handled.minimapOverViewRuler #607D8B
mergeEditor.conflict.handledFocused.border #607D8B
mergeEditor.conflict.handledUnfocused.border #607D8B80
mergeEditor.conflict.unhandled.minimapOverViewRuler #F9A825
mergeEditor.conflict.unhandledFocused.border #F9A825
mergeEditor.conflict.unhandledUnfocused.border #F9A82580
minimapGutter.addedBackground #607D8B
minimapGutter.deletedBackground #607D8B
minimapGutter.modifiedBackground #607D8B
multiDiffEditor.border #424242
multiDiffEditor.headerBackground #37474F
notebook.cellBorderColor #424242
notebook.cellEditorBackground #212121
notebook.cellStatusBarItemHoverBackground #455A64
notebook.editorBackground #212121
notebook.focusedCellBorder #29ABE2
notificationCenterHeader.background #37474F
notificationLink.foreground #29ABE2
notifications.background #37474F
notificationsErrorIcon.foreground #EF5350
notificationsInfoIcon.foreground #607D8B
notificationsWarningIcon.foreground #F9A825
panel.background #212121
panel.border #424242
panelInput.border #424242
panelTitle.activeBorder #29ABE2
panelTitle.activeForeground #CFD8DC
panelTitle.inactiveForeground #607D8B
peekView.border #424242
peekViewEditor.background #37474F
peekViewEditor.matchHighlightBackground #29ABE230
peekViewResult.background #37474F
peekViewResult.fileForeground #607D8B
peekViewResult.lineForeground #CFD8DC
peekViewResult.matchHighlightBackground #29ABE230
peekViewResult.selectionBackground #29ABE230
peekViewResult.selectionForeground #CFD8DC
peekViewTitle.background #37474F
peekViewTitleDescription.foreground #607D8B
peekViewTitleLabel.foreground #CFD8DC
pickerGroup.border #424242
pickerGroup.foreground #CFD8DC
progressBar.background #29ABE2
sash.hoverBorder #607D8B
scmGraph.foreground1 #607D8B
scmGraph.foreground2 #F9A825
scmGraph.foreground3 #607D8B
scmGraph.foreground4 #607D8B
scmGraph.foreground5 #607D8B
scmGraph.historyItemBaseRefColor #607D8B
scmGraph.historyItemHoverAdditionsForeground #607D8B
scmGraph.historyItemHoverDefaultLabelForeground #CFD8DC
scmGraph.historyItemHoverDeletionsForeground #EF5350
scmGraph.historyItemHoverLabelForeground #CFD8DC
scmGraph.historyItemRefColor #607D8B
scmGraph.historyItemRemoteRefColor #607D8B
scrollbar.shadow #00000033
scrollbarSlider.activeBackground #607D8B80
scrollbarSlider.background #607D8B30
scrollbarSlider.hoverBackground #607D8B50
selection.background #29ABE230
settings.headerForeground #CFD8DC
sideBar.background #212121
sideBar.border #424242
sideBar.dropBackground #455A64
sideBar.foreground #CFD8DC
sideBarSectionHeader.background #212121
sideBarSectionHeader.border #424242
sideBarSectionHeader.foreground #CFD8DC
sideBarTitle.foreground #CFD8DC
statusBar.background #263238
statusBar.border #263238
statusBar.debuggingBackground #B71C1C
statusBar.debuggingForeground #CFD8DC
statusBar.foreground #CFD8DC
statusBar.noFolderBackground #37474F
statusBarItem.activeBackground #29ABE230
statusBarItem.hoverBackground #29ABE230
statusBarItem.prominentBackground #29ABE230
statusBarItem.prominentHoverBackground #29ABE230
tab.activeBackground #212121
tab.activeBorder #29ABE2
tab.activeForeground #CFD8DC
tab.activeModifiedBorder #29ABE2
tab.border #424242
tab.hoverForeground #CFD8DC
tab.inactiveBackground #263238
tab.inactiveForeground #607D8B
tab.inactiveModifiedBorder #29ABE2
tab.lastPinnedBorder #757575
tab.unfocusedActiveBorder #29ABE2
tab.unfocusedActiveForeground #607D8B
tab.unfocusedHoverForeground #CFD8DC
tab.unfocusedInactiveForeground #607D8B
terminal.ansiBlack #212121
terminal.ansiBlue #29ABE2
terminal.ansiBrightBlack #607D8B
terminal.ansiBrightBlue #29ABE2
terminal.ansiBrightCyan #00ACC1
terminal.ansiBrightGreen #7CB342
terminal.ansiBrightMagenta #8E24AA
terminal.ansiBrightRed #EF5350
terminal.ansiBrightWhite #CFD8DC
terminal.ansiBrightYellow #F9A825
terminal.ansiCyan #00ACC1
terminal.ansiGreen #7CB342
terminal.ansiMagenta #8E24AA
terminal.ansiRed #EF5350
terminal.ansiWhite #CFD8DC
terminal.ansiYellow #F9A825
terminal.background #212121
terminal.foreground #CFD8DC
terminal.selectionBackground #455A6480
textBlockQuote.background #37474F
textCodeBlock.background #37474F
textLink.activeForeground #66C6FF
textLink.foreground #29ABE2
textPreformat.foreground #607D8B
textSeparator.foreground #607D8B
titleBar.activeBackground #263238
titleBar.activeForeground #CFD8DC
titleBar.border #263238
titleBar.inactiveBackground #37474F
titleBar.inactiveForeground #607D8B
toolbar.activeBackground #37474F
toolbar.hoverBackground #455A64
tree.indentGuidesStroke #607D8B
walkThrough.embeddedEditorBackground #37474F
widget.shadow #00000033
window.activeBorder #212121
window.inactiveBorder #424242 storage.type, support.type #7986CB —
constant.language, support.constant, variable.language #A1887F —
variable, support.variable #7986CB —
entity.name.function, support.function #E57373 bold
entity.name.type, entity.other.inherited-class, support.class #7986CB bold
entity.name.exception #E57373 —
constant.numeric, constant.character, constant #A1887F —
constant.character.escape #607D8B —
constant.other.symbol #A1887F —
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html #607D8B —
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html #91B3E0 —
meta.tag entity.other.attribute-name, entity.other.attribute-name.html #91B3E0 italic
constant.character.entity, punctuation.definition.entity #A1887F —
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css #7986CB —
meta.property-name, support.type.property-name #A1887F —
meta.property-value, meta.property-value constant.other, support.constant.property-value #81C784 —
keyword.other.important — bold
markup.output, markup.raw #607D8B —
markup.underline — underline
markup.bold, markup.italic #81C784 —
meta.diff.range, meta.diff.index, meta.separator #607D8B —
meta.diff.header.from-file #607D8B —
meta.diff.header.to-file #607D8B —
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
fetchUser 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...
~/my-project
main*
Button.tsx
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 } ! ` ;
}