Skip to main content
Home Theme VS Code PIXEL Theme Dark Esse tema foi criado para você que busa algo um tanto fora do comum. Então aproveitr meu caro!!
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.activeBorder #f54e1b activityBar.background #141d2b activityBar.foreground #a4b1cd activityBar.inactiveForeground #313f55 activityBarBadge.background #f54e1b activityBarBadge.foreground #1a2332 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, punctuation.definition.comment #D7E4FF46 italic variable, string constant.other.placeholder #A4B1CD — string constant.other.placeholder #C5D1EB — constant.other.color #FFFFFF — invalid, invalid.illegal
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
PIXEL Theme Dark — P1X3L TH3M3 DARK
badge.background #ff3e3e
badge.foreground #ffffff
banner.background #111927
banner.foreground #a4b1cd
banner.iconForeground #ffffff
breadcrumb.activeSelectionForeground #f54e1b
breadcrumb.background #1a2332
breadcrumb.focusForeground #ffffff
breadcrumb.foreground #a4b1cd
breadcrumbPicker.background #111927
button.background #f54e1b
button.foreground #111927
charts.blue #004cff
charts.foreground #a4b1cd
charts.green #f54e1b
charts.lines #a4b1cd
charts.orange #2ee7b6
charts.purple #9f00ff
charts.red #ff3e3e
charts.yellow #ffaf00
checkbox.background #111927
checkbox.border #111927
checkbox.foreground #f54e1b
debugExceptionWidget.background #ff3e3e49
debugExceptionWidget.border #ff3e3e49
debugIcon.breakpointCurrentStackframeForeground #ffcb5c8e
debugIcon.breakpointDisabledForeground #ff3e3e49
debugIcon.breakpointForeground #ff3e3e
debugIcon.breakpointStackframeForeground #004cff49
debugIcon.breakpointUnverifiedForeground #a4b1cd
debugIcon.continueForeground #f54e1b
debugIcon.disconnectForeground #ff3e3e
debugIcon.pauseForeground #f54e1b
debugIcon.restartForeground #ffaf00
debugIcon.startForeground #f54e1b
debugIcon.stepBackForeground #a4b1cd
debugIcon.stepIntoForeground #a4b1cd
debugIcon.stepOutForeground #a4b1cd
debugIcon.stepOverForeground #a4b1cd
debugIcon.stopForeground #ff3e3e
debugToolBar.background #1a2332
debugToolBar.border #1a2332
descriptionForeground #a4b1cd
dropdown.background #111927
dropdown.foreground #a4b1cd
dropdown.listBackground #111927
editor.background #141d2b
editor.findMatchBackground #6e7b96a1
editor.findMatchHighlightBackground #6e7b968C
editor.findRangeHighlightBackground #6e7b968C
editor.foldBackground #141d2b
editor.foreground #a4b1cd
editor.lineHighlightBackground #1a2332
editor.lineHighlightBorder #1a2332
editor.rangeHighlightBackground #313f55
editor.selectionBackground #6e7b968C
editor.selectionForeground #111927
editor.selectionHighlightBackground #6e7b968C
editor.stackFrameHighlightBackground #6e7b968C
editorBracketMatch.border #313f55
editorCursor.background #f54e1b
editorGroup.border #313f55
editorGroup.dropBackground #6e7b9625
editorGroupHeader.tabsBackground #111927
editorGutter.addedBackground #f54e1b
editorGutter.background #141d2b
editorGutter.commentRangeForeground #a4b1cd
editorGutter.deletedBackground #ff3e3e
editorGutter.modifiedBackground #004cff
editorHoverWidget.background #1a2332
editorHoverWidget.foreground #a4b1cd
editorIndentGuide.activeBackground #a4b1cd
editorIndentGuide.background #313f55
editorLightBulb.foreground #ffaf00
editorLightBulbAutoFix.foreground #f54e1b
editorLineNumber.activeForeground #ffffff
editorLineNumber.foreground #313f55
editorOverviewRuler.bracketMatchForeground #a4b1cd
editorOverviewRuler.commonContentForeground #f54e1b
editorOverviewRuler.errorForeground #ff3e3e
editorOverviewRuler.findMatchForeground #004cff
editorOverviewRuler.infoForeground #ffffff
editorOverviewRuler.rangeHighlightForeground #004cff
editorOverviewRuler.selectionHighlightForeground #004cff
editorOverviewRuler.warningForeground #ffaf00
editorOverviewRuler.wordHighlightForeground #a4b1cd
editorSuggestWidget.background #1a2332
editorSuggestWidget.border #1a2332
editorSuggestWidget.foreground #a4b1cd
editorWidget.background #1a2332
editorWidget.border #1a2332
errorForeground #ff3e3e
extensionBadge.remoteBackground #2ee7b6
extensionBadge.remoteForeground #111927
extensionButton.prominentBackground #f54e1b
extensionButton.prominentForeground #111927
extensionButton.prominentHoverBackground #f48f67
extensionIcon.starForeground #ffaf00
focusBorder #1a2332
foreground #a4b1cd
gitDecoration.addedResourceForeground #f54e1b
gitDecoration.conflictingResourceForeground #ffaf00
gitDecoration.deletedResourceForeground #ff3e3e
gitDecoration.ignoredResourceForeground #6e7b968C
gitDecoration.modifiedResourceForeground #ffffff
gitDecoration.submoduleResourceForeground #5cecc6
gitDecoration.untrackedResourceForeground #a4b1cd
icon.foreground #a4b1cd
input.background #141d2b
input.border #141d2b
input.foreground #ffffff
input.placeholderForeground #a4b1cd
inputOption.activeBackground #313f55
inputOption.activeBorder #313f55
inputOption.activeForeground #a4b1cd
inputValidation.errorBackground #ff3e3e70
inputValidation.errorBorder #ff3e3e49
inputValidation.errorForeground #ffffff
inputValidation.infoBackground #004cff70
inputValidation.infoBorder #004cff54
inputValidation.infoForeground #ffffff
inputValidation.warningBackground #ffaf0070
inputValidation.warningBorder #ffaf0070
inputValidation.warningForeground #ffffff
keybindingLabel.background #6e7b965d
keybindingLabel.border #6e7b968C
keybindingLabel.bottomBorder #a4b1cd7e
keybindingLabel.foreground #a4b1cd
list.activeSelectionBackground #f54e1b
list.dropBackground #313f55
list.errorForeground #ff3e3e
list.hoverBackground #1a2332
list.inactiveSelectionBackground #ef580015
list.warningForeground #ffaf00
listFilterWidget.background #004cff
menu.background #111927
menu.border #f54e1b
menu.selectionBackground #de5020
menu.separatorBackground #1a2332
menubar.selectionBackground #291c18
menubar.selectionForeground #a4b1cd
merge.commonContentBackground #ffffff
merge.commonHeaderBackground #ffffff
merge.currentContentBackground #ff3e3e49
merge.currentHeaderBackground #ff3e3e
merge.incomingContentBackground #004cff49
merge.incomingHeaderBackground #004cff
minimap.errorHighlight #ff8484
minimap.findMatchHighlight #f48f67
minimap.selectionHighlight #ffffffd0
minimap.warningHighlight #ffcc5c
minimapGutter.addedBackground #f54e1b
minimapGutter.deletedBackground #ff3e3e
minimapGutter.modifiedBackground #004cff
minimapSlider.activeBackground #6e7b968C
minimapSlider.background #141d2b
minimapSlider.hoverBackground #111927
notificationCenterHeader.background #1a2332
notificationLink.foreground #5cb2ff
notifications.background #1a2332
notifications.foreground #a4b1cd
notificationsErrorIcon.foreground #ff8484
notificationsInfoIcon.foreground #f54e1b
notificationsWarningIcon.foreground #ffcc5c
panel.background #111927
panel.border #141d2b
panelTitle.activeBorder #f54e1b
panelTitle.inactiveForeground #a4b1cd
peekView.border #1a2332
peekViewEditor.background #141d2b
progressBar.background #f54e1b
scm.providerBorder #a4b1cd
scrollbar.shadow #141d2b
scrollbarSlider.activeBackground #f54e1b
scrollbarSlider.background #f54e1b
scrollbarSlider.hoverBackground #703307
selection.background #313f55
settings.checkboxBackground #111927
settings.checkboxBorder #111927
settings.checkboxForeground #f54e1b
settings.dropdownBackground #111927
settings.dropdownBorder #111927
settings.dropdownForeground #a4b1cd
settings.dropdownListBorder #111927
settings.headerForeground #ffffff
settings.modifiedItemIndicator #f54e1b
settings.numberInputBackground #111927
settings.numberInputBorder #111927
settings.numberInputForeground #a4b1cd
settings.textInputBackground #111927
settings.textInputBorder #111927
settings.textInputForeground #a4b1cd
sideBar.background #1a2332
sideBar.border #f54e1b
sideBar.foreground #a4b1cd
sideBarSectionHeader.background #1a2332
sideBarSectionHeader.foreground #6e7b968C
sideBarTitle.foreground #a4b1cd
statusBar.background #292018
statusBar.debuggingBackground #ff8484
statusBar.debuggingForeground #111927
statusBar.foreground #ffefdf
statusBar.noFolderBackground #1a2332
statusBar.noFolderForeground #a4b1cd
tab.activeBackground #292018
tab.activeBorder #1a2332
tab.activeBorderTop #f54e1b
tab.activeModifiedBorder #a4b1cd
tab.border #141d2b
tab.hoverBackground #141d2b
tab.hoverBorder #141d2b
tab.inactiveBackground #141d2b
tab.inactiveForeground #6e7b968C
tab.unfocusedActiveBorder #a4b1cd
terminal.ansiBlue #004cff
terminal.ansiBrightBlue #5cb2ff
terminal.ansiBrightCyan #5cecc6
terminal.ansiBrightGreen #f48f67
terminal.ansiBrightMagenta #c16cfa
terminal.ansiBrightRed #ff8484
terminal.ansiBrightWhite #ffffff
terminal.ansiBrightYellow #ffcc5c
terminal.ansiCyan #2ee7b6
terminal.ansiGreen #9fef00
terminal.ansiMagenta #9f00ff
terminal.ansiRed #ff3e3e
terminal.ansiWhite #ffffff
terminal.ansiYellow #ffaf00
terminal.background #111927
terminal.foreground #a4b1cd
terminalCursor.background #313f55
testing.iconErrored #ffaf00
testing.iconFailed #ff3e3e
testing.iconPassed #f54e1b
testing.iconQueued #a4b1cd
testing.iconSkipped #a4b1cd
testing.iconUnset #a4b1cd
testing.message.error.decorationForeground #ff3e3e
testing.message.error.lineBackground #ff3e3e
testing.message.info.decorationForeground #004cff
testing.message.info.lineBackground #004cff
testing.peekBorder #a4b1cd
textBlockQuote.background #141d2b
textBlockQuote.border #a4b1cd
textCodeBlock.background #111927
textLink.activeForeground #f48f67
textLink.foreground #f54e1b
textPreformat.foreground #2e6cff
textSeparator.foreground #ffffff
titleBar.activeBackground #141d2b
titleBar.activeForeground #ff7745
titleBar.border #141d2b
titleBar.inactiveBackground #1a2332
titleBar.inactiveForeground #313f55
tree.indentGuidesStroke #f54e1b
walkThrough.embeddedEditorBackground #141d2b
welcomePage.background #141d2b
widget.shadow #1119277e
window.activeBorder #1a2332 keyword, storage.type, storage.modifier #FF8484 —
constant.other.color, 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 #5CECC6 —
markup.deleted.git_gutter #C5D1EB —
entity.name.tag, meta.tag.sgml #FF8484 —
markup.deleted.git_gutter #C5D1EB —
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method #FFCC5C —
meta.block variable.other #C5D1EB —
support.other.variable #FF8484 —
string.other.link #FF8484 —
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other #5CB2FF —
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js #c5f467 —
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 #FF8484 —
entity.name, entity.other.inherited-class #ffffff —
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 #FF8484 —
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 #A4B1CD —
entity.name.module.js, variable.import.parameter.js, variable.other.class.js #FF8484 —
variable.language #FF8484 italic
entity.name.method.js #5CB2FF italic
meta.class-method.js entity.name.function.js, variable.function.constructor #FF8484 —
entity.other.attribute-name #5CB2FF —
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name #FFCC5C italic
entity.other.attribute-name.class #5CB2FF —
source.sass keyword.control #5CB2FF —
constant.character.escape #5CB2FF —
*url*, *link*, *uri* — underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js #5CB2FF italic
source.js constant.other.object.key.js string.unquoted.label.js #FF8484 italic
source.json meta.structure.dictionary.json support.type.property-name.json #CF8DFB —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #5CB2FF —
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 #5CB2FF —
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 #FF8484 —
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 #FF68B3 —
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 #5CB2FF —
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 #FF8484 —
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 #CF8DFB —
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 #f48f67 —
text.html.markdown, punctuation.definition.list_item.markdown #A4B1CD —
text.html.markdown markup.inline.raw.markdown #CF8DFB —
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown #313F55 —
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown #f48f67 —
markup.italic #FF8484 italic
markup.bold, markup.bold string #ff009d —
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 #FF8484 bold
markup.underline #FF8484 underline
markup.quote punctuation.definition.blockquote.markdown #1A2332 —
string.other.link.title.markdown #5CB2FF —
string.other.link.description.title.markdown #CF8DFB —
constant.other.reference.link.markdown #5CB2FF —
markup.raw.block.fenced.markdown #00000050 —
punctuation.definition.fenced.markdown #00000050 —
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end #A4B1CD —
variable.language.fenced.markdown #313F55 —
meta.separator #313F55 bold
token.error-token #FF8484 —
token.debug-token #CF8DFB —
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 } ! ` ;
}
PIXEL Theme Dark | Coding Theme