Codex Palette for VS Code

Name: Codex Palette for VS Code
Author: smallyu

Publisher: smallyuThemes in package: 43

All 43 Codex appearance presets for VS Code, with faithful colors and one-click system appearance switching.

Open in VS Code GitHub

Color themes

VS Code preview

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

Codex Palette for VS Code — Codex Palette — Xcode Dark

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.activeBorder#5482ff
activityBar.background#1f1f24
activityBar.border#ffffff22
activityBar.foreground#ffffff
activityBar.inactiveForeground#6c7986
activityBarBadge.background#5482ff
activityBarBadge.foreground#ffffff
badge.background#5482ff
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#ffffff
breadcrumb.background#1f1f24
breadcrumb.focusForeground#ffffff
breadcrumb.foreground#6c7986
button.background#5482ff
button.foreground#ffffff
button.hoverBackground#d0bf69
button.secondaryBackground#1f1f24
button.secondaryForeground#ffffff
button.secondaryHoverBackground#1f1f24
checkbox.background#1f1f24
checkbox.border#ffffff22
commandCenter.background#1f1f24
commandCenter.border#ffffff22
commandCenter.foreground#6c7986
debugIcon.continueForeground#fc6a5d
debugIcon.disconnectForeground#fc5fa3
debugIcon.pauseForeground#d0bf69
debugIcon.restartForeground#fc6a5d
debugIcon.startForeground#fc6a5d
debugIcon.stepIntoForeground#d0bf69
debugIcon.stepOutForeground#d0bf69
debugIcon.stepOverForeground#d0bf69
debugIcon.stopForeground#fc5fa3
debugToolBar.background#1f1f24
descriptionForeground#6c7986
diffEditor.diagonalFill#6c798626
diffEditor.insertedLineBackground#fc6a5d18
diffEditor.insertedTextBackground#fc6a5d30
diffEditor.removedLineBackground#fc5fa318
diffEditor.removedTextBackground#fc5fa330
disabledForeground#ffffff66
dropdown.background#1f1f24
dropdown.border#ffffff22
dropdown.foreground#ffffff
editor.background#1f1f24
editor.findMatchBackground#67b7a466
editor.findMatchHighlightBackground#67b7a435
editor.findRangeHighlightBackground#5482ff18
editor.foreground#ffffffd9
editor.hoverHighlightBackground#5482ff18
editor.inactiveSelectionBackground#5482ff33
editor.lineHighlightBackground#1f1f24
editor.selectionBackground#515b70
editor.selectionHighlightBackground#5482ff33
editor.wordHighlightBackground#d0bf6925
editor.wordHighlightStrongBackground#67b7a430
editorBracketHighlight.foreground1#fc5fa3
editorBracketHighlight.foreground2#67b7a4
editorBracketHighlight.foreground3#fc6a5d
editorBracketHighlight.foreground4#d0bf69
editorBracketHighlight.foreground5#67b7a4
editorBracketHighlight.foreground6#d0bf69
editorBracketMatch.background#5482ff22
editorBracketMatch.border#5482ff
editorBracketPairGuide.activeBackground1#5482ffa6
editorBracketPairGuide.activeBackground2#5482ffa6
editorBracketPairGuide.activeBackground3#5482ffa6
editorBracketPairGuide.activeBackground4#5482ffa6
editorBracketPairGuide.activeBackground5#5482ffa6
editorBracketPairGuide.activeBackground6#5482ffa6
editorBracketPairGuide.background1#ffffff24
editorBracketPairGuide.background2#ffffff24
editorBracketPairGuide.background3#ffffff24
editorBracketPairGuide.background4#ffffff24
editorBracketPairGuide.background5#ffffff24
editorBracketPairGuide.background6#ffffff24
editorCursor.foreground#5482ff
editorError.foreground#fc5fa3
editorGroup.border#ffffff22
editorGroupHeader.tabsBackground#1f1f24
editorGroupHeader.tabsBorder#ffffff22
editorGutter.addedBackground#fc6a5d
editorGutter.deletedBackground#fc5fa3
editorGutter.modifiedBackground#d0bf69
editorHint.foreground#fc6a5d
editorHoverWidget.background#1f1f24
editorHoverWidget.border#ffffff22
editorIndentGuide.activeBackground1#5482ffa6
editorIndentGuide.background1#ffffff24
editorInfo.foreground#d0bf69
editorLineNumber.activeForeground#6c7986
editorLineNumber.foreground#6c7986
editorSuggestWidget.background#1f1f24
editorSuggestWidget.border#ffffff22
editorSuggestWidget.selectedBackground#1f1f24
editorWarning.foreground#fc6a5d
editorWhitespace.foreground#ffffff24
editorWidget.background#1f1f24
editorWidget.border#ffffff22
editorWidget.foreground#ffffff
errorForeground#fc5fa3
focusBorder#5482ff
foreground#ffffffd9
gitDecoration.addedResourceForeground#fc6a5d
gitDecoration.conflictingResourceForeground#67b7a4
gitDecoration.deletedResourceForeground#fc5fa3
gitDecoration.ignoredResourceForeground#6c7986
gitDecoration.modifiedResourceForeground#d0bf69
gitDecoration.renamedResourceForeground#67b7a4
gitDecoration.untrackedResourceForeground#fc6a5d
icon.foreground#6c7986
input.background#1f1f24
input.border#ffffff22
input.foreground#ffffff
input.placeholderForeground#6c7986
inputOption.activeBackground#5482ff55
inputOption.activeBorder#5482ff
inputValidation.errorBackground#fc5fa322
inputValidation.errorBorder#fc5fa3
inputValidation.infoBackground#d0bf6922
inputValidation.infoBorder#d0bf69
inputValidation.warningBackground#fc6a5d22
inputValidation.warningBorder#fc6a5d
list.activeSelectionBackground#5482ff55
list.activeSelectionForeground#ffffff
list.errorForeground#fc5fa3
list.focusBackground#5482ff44
list.highlightForeground#5482ff
list.hoverBackground#1f1f24
list.inactiveSelectionBackground#5482ff33
list.warningForeground#fc6a5d
menu.background#1f1f24
menu.foreground#ffffff
menu.selectionBackground#515b70
menu.separatorBackground#ffffff22
minimap.background#1f1f24
minimap.findMatchHighlight#67b7a480
minimap.selectionHighlight#5482ff66
notificationCenter.border#ffffff22
notificationCenterHeader.background#1f1f24
notifications.background#1f1f24
notifications.border#ffffff22
notifications.foreground#ffffff
panel.background#1f1f24
panel.border#ffffff22
panelTitle.activeBorder#5482ff
panelTitle.activeForeground#ffffff
panelTitle.inactiveForeground#6c7986
peekView.border#5482ff
peekViewEditor.background#1f1f24
peekViewResult.background#1f1f24
peekViewResult.selectionBackground#515b70
peekViewTitle.background#1f1f24
pickerGroup.border#ffffff22
pickerGroup.foreground#5482ff
progressBar.background#5482ff
quickInput.background#1f1f24
quickInput.foreground#ffffff
scrollbar.shadow#00000088
scrollbarSlider.activeBackground#ffffff45
scrollbarSlider.background#ffffff18
scrollbarSlider.hoverBackground#ffffff2e
sideBar.background#1f1f24
sideBar.border#ffffff22
sideBar.foreground#ffffffd9
sideBarSectionHeader.background#1f1f24
sideBarSectionHeader.border#ffffff22
sideBarSectionHeader.foreground#ffffff
sideBarTitle.foreground#ffffffd9
statusBar.background#1f1f24
statusBar.border#ffffff22
statusBar.debuggingBackground#fc5fa3
statusBar.debuggingForeground#111111
statusBar.foreground#6c7986
statusBar.noFolderBackground#1f1f24
tab.activeBackground#1f1f24
tab.activeBorder#1f1f24
tab.activeBorderTop#5482ff
tab.activeForeground#ffffff
tab.border#ffffff22
tab.inactiveBackground#1f1f24
tab.inactiveForeground#6c7986
terminal.ansiBlack#111111
terminal.ansiBlue#d0bf69
terminal.ansiBrightBlack#6c7986
terminal.ansiBrightBlue#d0bf69
terminal.ansiBrightCyan#d0bf69
terminal.ansiBrightGreen#fc6a5d
terminal.ansiBrightMagenta#67b7a4
terminal.ansiBrightRed#fc5fa3
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#67b7a4
terminal.ansiCyan#d0bf69
terminal.ansiGreen#fc6a5d
terminal.ansiMagenta#67b7a4
terminal.ansiRed#fc5fa3
terminal.ansiWhite#d6d6d6
terminal.ansiYellow#fc6a5d
terminal.background#1f1f24
terminal.foreground#ffffff
terminal.selectionBackground#515b70
terminalCursor.foreground#5482ff
textBlockQuote.background#1f1f24
textBlockQuote.border#5482ff
textCodeBlock.background#1f1f24
textLink.activeForeground#d0bf69
textLink.foreground#5482ff
titleBar.activeBackground#1f1f24
titleBar.activeForeground#ffffff
titleBar.border#ffffff22
titleBar.inactiveBackground#1f1f24
titleBar.inactiveForeground#6c7986
tree.inactiveIndentGuidesStroke#ffffff24
tree.indentGuidesStroke#ffffff52
widget.shadow#00000088

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#6c7986	—
string, constant.other.symbol, markup.inline.raw	#fc6a5d	—
constant.numeric, constant.language.boolean, constant.language.null	#d0bf69	—
constant, variable.other.constant	#67b7a4	—
keyword, storage.type, storage.modifier	#fc5fa3	—
variable, meta.object-literal.key, support.variable.property, meta.property-name	#67b7a4	—
variable.parameter, function.parameter	#6c7986	—
entity.name.function, support.function, variable.function, meta.function-call	#67b7a4	—
entity.name.type, entity.name.class, support.type, support.class, entity.other.inherited-class	#67b7a4	—
entity.name.namespace, entity.name.type.namespace	#67b7a4	—
keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.logical, keyword.operator.assignment	#d0bf69	—
punctuation, meta.brace	#6c7986	—
entity.name.tag, punctuation.definition.tag	#fc5fa3	—
entity.other.attribute-name	#d0bf69	—
string.regexp, constant.regexp	#d0bf69	—
markup.heading, entity.name.section	#fc5fa3	bold
markup.bold, punctuation.definition.bold	#67b7a4	bold
markup.italic, punctuation.definition.italic	#fc5fa3	italic
markup.underline.link, string.other.link	#5482ff	underline
markup.inserted	#fc6a5d	—
markup.deleted	#fc5fa3	—
markup.changed	#67b7a4	—
invalid	#ffffff	—