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 — Rose Pine 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#575279
activityBar.background#faf4ed
activityBar.border#00000000
activityBar.foreground#575279
activityBar.inactiveForeground#797593
activityBarBadge.background#d7827e
activityBarBadge.foreground#faf4ed
badge.background#c27571
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#575279
breadcrumb.background#faf4ed
breadcrumb.focusForeground#575279
breadcrumb.foreground#8e899e
button.background#d7827e
button.foreground#faf4ed
button.hoverBackground#d7827ee6
button.secondaryBackground#fffaf3
button.secondaryForeground#575279
button.secondaryHoverBackground#6e6a860d
checkbox.background#fffaf3
checkbox.border#00000000
commandCenter.background#fffaf3
commandCenter.border#00000000
commandCenter.foreground#8e899e
debugIcon.continueForeground#286983
debugIcon.disconnectForeground#b4637a
debugIcon.pauseForeground#56949f
debugIcon.restartForeground#286983
debugIcon.startForeground#286983
debugIcon.stepIntoForeground#56949f
debugIcon.stepOutForeground#56949f
debugIcon.stepOverForeground#56949f
debugIcon.stopForeground#b4637a
debugToolBar.background#fffaf3
descriptionForeground#797593
diffEditor.diagonalFill#8e899e26
diffEditor.insertedLineBackground#56949f12
diffEditor.insertedTextBackground#56949f20
diffEditor.removedLineBackground#79759312
diffEditor.removedTextBackground#79759320
disabledForeground#57527966
dropdown.background#fffaf3
dropdown.border#00000000
dropdown.foreground#575279
editor.background#faf4ed
editor.findMatchBackground#d7827e4d
editor.findMatchHighlightBackground#d7827e26
editor.findRangeHighlightBackground#c2757118
editor.foreground#575279
editor.hoverHighlightBackground#c2757118
editor.inactiveSelectionBackground#c275711f
editor.lineHighlightBackground#faf4ed
editor.selectionBackground#6e6a8614
editor.selectionHighlightBackground#c275711f
editor.wordHighlightBackground#56949f18
editor.wordHighlightStrongBackground#907aa91f
editorBracketHighlight.foreground1#b4637a
editorBracketHighlight.foreground2#d7827e
editorBracketHighlight.foreground3#286983
editorBracketHighlight.foreground4#56949f
editorBracketHighlight.foreground5#907aa9
editorBracketHighlight.foreground6#56949f
editorBracketMatch.background#c2757122
editorBracketMatch.border#c27571
editorBracketPairGuide.activeBackground1#c275718c
editorBracketPairGuide.activeBackground2#c275718c
editorBracketPairGuide.activeBackground3#c275718c
editorBracketPairGuide.activeBackground4#c275718c
editorBracketPairGuide.activeBackground5#c275718c
editorBracketPairGuide.activeBackground6#c275718c
editorBracketPairGuide.background1#57527918
editorBracketPairGuide.background2#57527918
editorBracketPairGuide.background3#57527918
editorBracketPairGuide.background4#57527918
editorBracketPairGuide.background5#57527918
editorBracketPairGuide.background6#57527918
editorCursor.foreground#9893a5
editorError.foreground#b4637a
editorGroup.border#00000000
editorGroupHeader.tabsBackground#0000
editorGroupHeader.tabsBorder#0000
editorGutter.addedBackground#56949f
editorGutter.deletedBackground#797593
editorGutter.modifiedBackground#56949f
editorHint.foreground#286983
editorHoverWidget.background#fffaf3
editorHoverWidget.border#00000000
editorIndentGuide.activeBackground1#c275718c
editorIndentGuide.background1#57527918
editorInfo.foreground#56949f
editorLineNumber.activeForeground#8e899e
editorLineNumber.foreground#797593
editorSuggestWidget.background#fffaf3
editorSuggestWidget.border#00000000
editorSuggestWidget.selectedBackground#6e6a860d
editorWarning.foreground#ea9d34
editorWhitespace.foreground#57527918
editorWidget.background#fffaf3
editorWidget.border#00000000
editorWidget.foreground#575279
errorForeground#b4637a
focusBorder#6e6a8614
foreground#575279
gitDecoration.addedResourceForeground#56949f
gitDecoration.conflictingResourceForeground#d7827e
gitDecoration.deletedResourceForeground#797593
gitDecoration.ignoredResourceForeground#797593
gitDecoration.modifiedResourceForeground#d7827e
gitDecoration.renamedResourceForeground#907aa9
gitDecoration.untrackedResourceForeground#ea9d34
icon.foreground#8e899e
input.background#fffaf3
input.border#00000000
input.foreground#575279
input.placeholderForeground#797593
inputOption.activeBackground#c2757122
inputOption.activeBorder#c27571
inputValidation.errorBackground#b4637a12
inputValidation.errorBorder#b4637a
inputValidation.infoBackground#56949f12
inputValidation.infoBorder#56949f
inputValidation.warningBackground#ea9d3412
inputValidation.warningBorder#ea9d34
list.activeSelectionBackground#c2757122
list.activeSelectionForeground#575279
list.errorForeground#b4637a
list.focusBackground#c275711f
list.highlightForeground#c27571
list.hoverBackground#6e6a860d
list.inactiveSelectionBackground#c2757114
list.warningForeground#ea9d34
menu.background#fffaf3
menu.foreground#575279
menu.selectionBackground#6e6a8614
menu.separatorBackground#00000000
minimap.background#faf4ed
minimap.findMatchHighlight#d7827e80
minimap.selectionHighlight#c2757166
notificationCenter.border#00000000
notificationCenterHeader.background#fffaf3
notifications.background#fffaf3
notifications.border#00000000
notifications.foreground#575279
panel.background#fffaf3
panel.border#0000
panelTitle.activeBorder#c27571
panelTitle.activeForeground#575279
panelTitle.inactiveForeground#8e899e
peekView.border#c27571
peekViewEditor.background#faf4ed
peekViewResult.background#faf4ed
peekViewResult.selectionBackground#6e6a8614
peekViewTitle.background#fffaf3
pickerGroup.border#00000000
pickerGroup.foreground#c27571
progressBar.background#c27571
quickInput.background#fffaf3
quickInput.foreground#575279
scrollbar.shadow#00000025
scrollbarSlider.activeBackground#57527945
scrollbarSlider.background#57527918
scrollbarSlider.hoverBackground#5752792e
sideBar.background#faf4ed
sideBar.border#00000000
sideBar.foreground#797593
sideBarSectionHeader.background#0000
sideBarSectionHeader.border#6e6a8614
sideBarSectionHeader.foreground#575279
sideBarTitle.foreground#575279
statusBar.background#faf4ed
statusBar.border#00000000
statusBar.debuggingBackground#b4637a
statusBar.debuggingForeground#ffffff
statusBar.foreground#8e899e
statusBar.noFolderBackground#faf4ed
tab.activeBackground#faf4ed
tab.activeBorder#faf4ed
tab.activeBorderTop#c27571
tab.activeForeground#575279
tab.border#00000000
tab.inactiveBackground#faf4ed
tab.inactiveForeground#8e899e
terminal.ansiBlack#f2e9e1
terminal.ansiBlue#56949f
terminal.ansiBrightBlack#797593
terminal.ansiBrightBlue#56949f
terminal.ansiBrightCyan#d7827e
terminal.ansiBrightGreen#286983
terminal.ansiBrightMagenta#907aa9
terminal.ansiBrightRed#b4637a
terminal.ansiBrightWhite#575279
terminal.ansiBrightYellow#ea9d34
terminal.ansiCyan#d7827e
terminal.ansiGreen#286983
terminal.ansiMagenta#907aa9
terminal.ansiRed#b4637a
terminal.ansiWhite#575279
terminal.ansiYellow#ea9d34
terminal.background#faf4ed
terminal.foreground#575279
terminal.selectionBackground#6e6a8614
terminalCursor.foreground#c27571
textBlockQuote.background#faf4ed
textBlockQuote.border#c27571
textCodeBlock.background#fffaf3
textLink.activeForeground#907aa9e6
textLink.foreground#907aa9
titleBar.activeBackground#faf4ed
titleBar.activeForeground#575279
titleBar.border#00000000
titleBar.inactiveBackground#faf4ed
titleBar.inactiveForeground#797593
tree.inactiveIndentGuidesStroke#57527918
tree.indentGuidesStroke#5752793d
widget.shadow#00000025

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#8e899e	—
string, constant.other.symbol, markup.inline.raw	#286983	—
constant.numeric, constant.language.boolean, constant.language.null	#56949f	—
constant, variable.other.constant	#d7827e	—
keyword, storage.type, storage.modifier	#b4637a	—
variable, meta.object-literal.key, support.variable.property, meta.property-name	#d7827e	—
variable.parameter, function.parameter	#8e899e	—
entity.name.function, support.function, variable.function, meta.function-call	#907aa9	—
entity.name.type, entity.name.class, support.type, support.class, entity.other.inherited-class	#907aa9	—
entity.name.namespace, entity.name.type.namespace	#d7827e	—
keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.logical, keyword.operator.assignment	#56949f	—
punctuation, meta.brace	#8e899e	—
entity.name.tag, punctuation.definition.tag	#b4637a	—
entity.other.attribute-name	#56949f	—
string.regexp, constant.regexp	#56949f	—
markup.heading, entity.name.section	#b4637a	bold
markup.bold, punctuation.definition.bold	#d7827e	bold
markup.italic, punctuation.definition.italic	#b4637a	italic
markup.underline.link, string.other.link	#c27571	underline
markup.inserted	#286983	—
markup.deleted	#b4637a	—
markup.changed	#d7827e	—
invalid	#ffffff	—