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 Light

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.ts

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*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#0e0eff
activityBar.background#ffffff
activityBar.border#00000022
activityBar.foreground#000000
activityBar.inactiveForeground#5d6c79
activityBarBadge.background#0e0eff
activityBarBadge.foreground#ffffff
badge.background#0e0eff
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#000000
breadcrumb.background#ffffff
breadcrumb.focusForeground#000000
breadcrumb.foreground#5d6c79
button.background#0e0eff
button.foreground#ffffff
button.hoverBackground#1c00cf
button.secondaryBackground#ffffff
button.secondaryForeground#000000
button.secondaryHoverBackground#ffffff
checkbox.background#ffffff
checkbox.border#00000022
commandCenter.background#ffffff
commandCenter.border#00000022
commandCenter.foreground#5d6c79
debugIcon.continueForeground#c41a16
debugIcon.disconnectForeground#9b2393
debugIcon.pauseForeground#1c00cf
debugIcon.restartForeground#c41a16
debugIcon.startForeground#c41a16
debugIcon.stepIntoForeground#1c00cf
debugIcon.stepOutForeground#1c00cf
debugIcon.stepOverForeground#1c00cf
debugIcon.stopForeground#9b2393
debugToolBar.background#ffffff
descriptionForeground#5d6c79
diffEditor.diagonalFill#5d6c7926
diffEditor.insertedLineBackground#c41a1612
diffEditor.insertedTextBackground#c41a1620
diffEditor.removedLineBackground#9b239312
diffEditor.removedTextBackground#9b239320
disabledForeground#00000066
dropdown.background#ffffff
dropdown.border#00000022
dropdown.foreground#000000
editor.background#ffffff
editor.findMatchBackground#326d744d
editor.findMatchHighlightBackground#326d7426
editor.findRangeHighlightBackground#0e0eff18
editor.foreground#000000d9
editor.hoverHighlightBackground#0e0eff18
editor.inactiveSelectionBackground#0e0eff1f
editor.lineHighlightBackground#ffffff
editor.selectionBackground#a4cdff
editor.selectionHighlightBackground#0e0eff1f
editor.wordHighlightBackground#1c00cf18
editor.wordHighlightStrongBackground#326d741f
editorBracketHighlight.foreground1#9b2393
editorBracketHighlight.foreground2#326d74
editorBracketHighlight.foreground3#c41a16
editorBracketHighlight.foreground4#1c00cf
editorBracketHighlight.foreground5#326d74
editorBracketHighlight.foreground6#1c00cf
editorBracketMatch.background#0e0eff22
editorBracketMatch.border#0e0eff
editorBracketPairGuide.activeBackground1#0e0eff8c
editorBracketPairGuide.activeBackground2#0e0eff8c
editorBracketPairGuide.activeBackground3#0e0eff8c
editorBracketPairGuide.activeBackground4#0e0eff8c
editorBracketPairGuide.activeBackground5#0e0eff8c
editorBracketPairGuide.activeBackground6#0e0eff8c
editorBracketPairGuide.background1#00000018
editorBracketPairGuide.background2#00000018
editorBracketPairGuide.background3#00000018
editorBracketPairGuide.background4#00000018
editorBracketPairGuide.background5#00000018
editorBracketPairGuide.background6#00000018
editorCursor.foreground#0e0eff
editorError.foreground#9b2393
editorGroup.border#00000022
editorGroupHeader.tabsBackground#ffffff
editorGroupHeader.tabsBorder#00000022
editorGutter.addedBackground#c41a16
editorGutter.deletedBackground#9b2393
editorGutter.modifiedBackground#1c00cf
editorHint.foreground#c41a16
editorHoverWidget.background#ffffff
editorHoverWidget.border#00000022
editorIndentGuide.activeBackground1#0e0eff8c
editorIndentGuide.background1#00000018
editorInfo.foreground#1c00cf
editorLineNumber.activeForeground#5d6c79
editorLineNumber.foreground#5d6c79
editorSuggestWidget.background#ffffff
editorSuggestWidget.border#00000022
editorSuggestWidget.selectedBackground#ffffff
editorWarning.foreground#c41a16
editorWhitespace.foreground#00000018
editorWidget.background#ffffff
editorWidget.border#00000022
editorWidget.foreground#000000
errorForeground#9b2393
focusBorder#0e0eff
foreground#000000d9
gitDecoration.addedResourceForeground#c41a16
gitDecoration.conflictingResourceForeground#326d74
gitDecoration.deletedResourceForeground#9b2393
gitDecoration.ignoredResourceForeground#5d6c79
gitDecoration.modifiedResourceForeground#1c00cf
gitDecoration.renamedResourceForeground#326d74
gitDecoration.untrackedResourceForeground#c41a16
icon.foreground#5d6c79
input.background#ffffff
input.border#00000022
input.foreground#000000
input.placeholderForeground#5d6c79
inputOption.activeBackground#0e0eff22
inputOption.activeBorder#0e0eff
inputValidation.errorBackground#9b239312
inputValidation.errorBorder#9b2393
inputValidation.infoBackground#1c00cf12
inputValidation.infoBorder#1c00cf
inputValidation.warningBackground#c41a1612
inputValidation.warningBorder#c41a16
list.activeSelectionBackground#0e0eff22
list.activeSelectionForeground#000000
list.errorForeground#9b2393
list.focusBackground#0e0eff1f
list.highlightForeground#0e0eff
list.hoverBackground#ffffff
list.inactiveSelectionBackground#0e0eff14
list.warningForeground#c41a16
menu.background#ffffff
menu.foreground#000000
menu.selectionBackground#a4cdff
menu.separatorBackground#00000022
minimap.background#ffffff
minimap.findMatchHighlight#326d7480
minimap.selectionHighlight#0e0eff66
notificationCenter.border#00000022
notificationCenterHeader.background#ffffff
notifications.background#ffffff
notifications.border#00000022
notifications.foreground#000000
panel.background#ffffff
panel.border#00000022
panelTitle.activeBorder#0e0eff
panelTitle.activeForeground#000000
panelTitle.inactiveForeground#5d6c79
peekView.border#0e0eff
peekViewEditor.background#ffffff
peekViewResult.background#ffffff
peekViewResult.selectionBackground#a4cdff
peekViewTitle.background#ffffff
pickerGroup.border#00000022
pickerGroup.foreground#0e0eff
progressBar.background#0e0eff
quickInput.background#ffffff
quickInput.foreground#000000
scrollbar.shadow#00000025
scrollbarSlider.activeBackground#00000045
scrollbarSlider.background#00000018
scrollbarSlider.hoverBackground#0000002e
sideBar.background#ffffff
sideBar.border#00000022
sideBar.foreground#000000d9
sideBarSectionHeader.background#ffffff
sideBarSectionHeader.border#00000022
sideBarSectionHeader.foreground#000000
sideBarTitle.foreground#000000d9
statusBar.background#ffffff
statusBar.border#00000022
statusBar.debuggingBackground#9b2393
statusBar.debuggingForeground#ffffff
statusBar.foreground#5d6c79
statusBar.noFolderBackground#ffffff
tab.activeBackground#ffffff
tab.activeBorder#ffffff
tab.activeBorderTop#0e0eff
tab.activeForeground#000000
tab.border#00000022
tab.inactiveBackground#ffffff
tab.inactiveForeground#5d6c79
terminal.ansiBlack#0d0d0d
terminal.ansiBlue#1c00cf
terminal.ansiBrightBlack#5d6c79
terminal.ansiBrightBlue#1c00cf
terminal.ansiBrightCyan#1c00cf
terminal.ansiBrightGreen#c41a16
terminal.ansiBrightMagenta#326d74
terminal.ansiBrightRed#9b2393
terminal.ansiBrightWhite#fcfcfc
terminal.ansiBrightYellow#326d74
terminal.ansiCyan#1c00cf
terminal.ansiGreen#c41a16
terminal.ansiMagenta#326d74
terminal.ansiRed#9b2393
terminal.ansiWhite#d9d9d9
terminal.ansiYellow#c41a16
terminal.background#ffffff
terminal.foreground#000000
terminal.selectionBackground#a4cdff
terminalCursor.foreground#0e0eff
textBlockQuote.background#ffffff
textBlockQuote.border#0e0eff
textCodeBlock.background#ffffff
textLink.activeForeground#1c00cf
textLink.foreground#0e0eff
titleBar.activeBackground#ffffff
titleBar.activeForeground#000000
titleBar.border#00000022
titleBar.inactiveBackground#ffffff
titleBar.inactiveForeground#5d6c79
tree.inactiveIndentGuidesStroke#00000018
tree.indentGuidesStroke#0000003d
widget.shadow#00000025

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#5d6c79	—
string, constant.other.symbol, markup.inline.raw	#c41a16	—
constant.numeric, constant.language.boolean, constant.language.null	#1c00cf	—
constant, variable.other.constant	#326d74	—
keyword, storage.type, storage.modifier	#9b2393	—
variable, meta.object-literal.key, support.variable.property, meta.property-name	#326d74	—
variable.parameter, function.parameter	#5d6c79	—
entity.name.function, support.function, variable.function, meta.function-call	#326d74	—
entity.name.type, entity.name.class, support.type, support.class, entity.other.inherited-class	#326d74	—
entity.name.namespace, entity.name.type.namespace	#326d74	—
keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.logical, keyword.operator.assignment	#1c00cf	—
punctuation, meta.brace	#5d6c79	—
entity.name.tag, punctuation.definition.tag	#9b2393	—
entity.other.attribute-name	#1c00cf	—
string.regexp, constant.regexp	#1c00cf	—
markup.heading, entity.name.section	#9b2393	bold
markup.bold, punctuation.definition.bold	#326d74	bold
markup.italic, punctuation.definition.italic	#9b2393	italic
markup.underline.link, string.other.link	#0e0eff	underline
markup.inserted	#c41a16	—
markup.deleted	#9b2393	—
markup.changed	#326d74	—
invalid	#ffffff	—