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 — Absolutely 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#cc7d5e
activityBar.background#f4f4f2
activityBar.border#00000022
activityBar.foreground#2d2d2b
activityBar.inactiveForeground#8e8e8c
activityBarBadge.background#cc7d5e
activityBarBadge.foreground#ffffff
badge.background#c27759
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#2d2d2b
breadcrumb.background#f9f9f7
breadcrumb.focusForeground#2d2d2b
breadcrumb.foreground#8e8e8c
button.background#cc7d5e
button.foreground#ffffff
button.hoverBackground#ff5f38
button.secondaryBackground#f4f4f2
button.secondaryForeground#2d2d2b
button.secondaryHoverBackground#f4f4f2
checkbox.background#f4f4f2
checkbox.border#00000022
commandCenter.background#f4f4f2
commandCenter.border#00000022
commandCenter.foreground#8e8e8c
debugIcon.continueForeground#00c853
debugIcon.disconnectForeground#ff5f38
debugIcon.pauseForeground#ff5f38
debugIcon.restartForeground#00c853
debugIcon.startForeground#00c853
debugIcon.stepIntoForeground#ff5f38
debugIcon.stepOutForeground#ff5f38
debugIcon.stepOverForeground#ff5f38
debugIcon.stopForeground#ff5f38
debugToolBar.background#f4f4f2
descriptionForeground#8e8e8c
diffEditor.diagonalFill#8e8e8c26
diffEditor.insertedLineBackground#00c85312
diffEditor.insertedTextBackground#00c85320
diffEditor.removedLineBackground#ff5f3812
diffEditor.removedTextBackground#ff5f3820
disabledForeground#2d2d2b66
dropdown.background#f4f4f2
dropdown.border#00000022
dropdown.foreground#2d2d2b
editor.background#f9f9f7
editor.findMatchBackground#2d2d2b4d
editor.findMatchHighlightBackground#2d2d2b26
editor.findRangeHighlightBackground#c2775918
editor.foreground#2d2d2b
editor.hoverHighlightBackground#c2775918
editor.inactiveSelectionBackground#c277591f
editor.lineHighlightBackground#f4f4f2
editor.selectionBackground#c2775944
editor.selectionHighlightBackground#c277591f
editor.wordHighlightBackground#ff5f3818
editor.wordHighlightStrongBackground#2d2d2b1f
editorBracketHighlight.foreground1#ff5f38
editorBracketHighlight.foreground2#2d2d2b
editorBracketHighlight.foreground3#00c853
editorBracketHighlight.foreground4#ff5f38
editorBracketHighlight.foreground5#2d2d2b
editorBracketHighlight.foreground6#ff5f38
editorBracketMatch.background#c2775922
editorBracketMatch.border#c27759
editorBracketPairGuide.activeBackground1#c277598c
editorBracketPairGuide.activeBackground2#c277598c
editorBracketPairGuide.activeBackground3#c277598c
editorBracketPairGuide.activeBackground4#c277598c
editorBracketPairGuide.activeBackground5#c277598c
editorBracketPairGuide.activeBackground6#c277598c
editorBracketPairGuide.background1#2d2d2b18
editorBracketPairGuide.background2#2d2d2b18
editorBracketPairGuide.background3#2d2d2b18
editorBracketPairGuide.background4#2d2d2b18
editorBracketPairGuide.background5#2d2d2b18
editorBracketPairGuide.background6#2d2d2b18
editorCursor.foreground#cc7d5e
editorError.foreground#ff5f38
editorGroup.border#00000022
editorGroupHeader.tabsBackground#f4f4f2
editorGroupHeader.tabsBorder#00000022
editorGutter.addedBackground#00c853
editorGutter.deletedBackground#ff5f38
editorGutter.modifiedBackground#ff5f38
editorHint.foreground#00c853
editorHoverWidget.background#f4f4f2
editorHoverWidget.border#00000022
editorIndentGuide.activeBackground1#c277598c
editorIndentGuide.background1#2d2d2b18
editorInfo.foreground#ff5f38
editorLineNumber.activeForeground#8e8e8c
editorLineNumber.foreground#8e8e8c
editorSuggestWidget.background#f4f4f2
editorSuggestWidget.border#00000022
editorSuggestWidget.selectedBackground#f4f4f2
editorWarning.foreground#00c853
editorWhitespace.foreground#2d2d2b18
editorWidget.background#f4f4f2
editorWidget.border#00000022
editorWidget.foreground#2d2d2b
errorForeground#ff5f38
focusBorder#cc7d5e
foreground#2d2d2b
gitDecoration.addedResourceForeground#00c853
gitDecoration.conflictingResourceForeground#2d2d2b
gitDecoration.deletedResourceForeground#ff5f38
gitDecoration.ignoredResourceForeground#8e8e8c
gitDecoration.modifiedResourceForeground#ff5f38
gitDecoration.renamedResourceForeground#2d2d2b
gitDecoration.untrackedResourceForeground#00c853
icon.foreground#8e8e8c
input.background#f4f4f2
input.border#00000022
input.foreground#2d2d2b
input.placeholderForeground#8e8e8c
inputOption.activeBackground#c2775922
inputOption.activeBorder#c27759
inputValidation.errorBackground#ff5f3812
inputValidation.errorBorder#ff5f38
inputValidation.infoBackground#ff5f3812
inputValidation.infoBorder#ff5f38
inputValidation.warningBackground#00c85312
inputValidation.warningBorder#00c853
list.activeSelectionBackground#c2775922
list.activeSelectionForeground#2d2d2b
list.errorForeground#ff5f38
list.focusBackground#c277591f
list.highlightForeground#c27759
list.hoverBackground#f4f4f2
list.inactiveSelectionBackground#c2775914
list.warningForeground#00c853
menu.background#f4f4f2
menu.foreground#2d2d2b
menu.selectionBackground#c2775944
menu.separatorBackground#00000022
minimap.background#f9f9f7
minimap.findMatchHighlight#2d2d2b80
minimap.selectionHighlight#c2775966
notificationCenter.border#00000022
notificationCenterHeader.background#f4f4f2
notifications.background#f4f4f2
notifications.border#00000022
notifications.foreground#2d2d2b
panel.background#f4f4f2
panel.border#00000022
panelTitle.activeBorder#c27759
panelTitle.activeForeground#2d2d2b
panelTitle.inactiveForeground#8e8e8c
peekView.border#c27759
peekViewEditor.background#f9f9f7
peekViewResult.background#f4f4f2
peekViewResult.selectionBackground#c2775944
peekViewTitle.background#f4f4f2
pickerGroup.border#00000022
pickerGroup.foreground#c27759
progressBar.background#c27759
quickInput.background#f4f4f2
quickInput.foreground#2d2d2b
scrollbar.shadow#00000025
scrollbarSlider.activeBackground#2d2d2b45
scrollbarSlider.background#2d2d2b18
scrollbarSlider.hoverBackground#2d2d2b2e
sideBar.background#f4f4f2
sideBar.border#00000022
sideBar.foreground#2d2d2b
sideBarSectionHeader.background#f4f4f2
sideBarSectionHeader.border#00000022
sideBarSectionHeader.foreground#2d2d2b
sideBarTitle.foreground#2d2d2b
statusBar.background#f4f4f2
statusBar.border#00000022
statusBar.debuggingBackground#ff5f38
statusBar.debuggingForeground#ffffff
statusBar.foreground#8e8e8c
statusBar.noFolderBackground#f4f4f2
tab.activeBackground#f9f9f7
tab.activeBorder#f9f9f7
tab.activeBorderTop#c27759
tab.activeForeground#2d2d2b
tab.border#00000022
tab.inactiveBackground#f4f4f2
tab.inactiveForeground#8e8e8c
terminal.ansiBlack#0d0d0d
terminal.ansiBlue#ff5f38
terminal.ansiBrightBlack#8e8e8c
terminal.ansiBrightBlue#ff5f38
terminal.ansiBrightCyan#ff5f38
terminal.ansiBrightGreen#00c853
terminal.ansiBrightMagenta#2d2d2b
terminal.ansiBrightRed#ff5f38
terminal.ansiBrightWhite#fcfcfc
terminal.ansiBrightYellow#2d2d2b
terminal.ansiCyan#ff5f38
terminal.ansiGreen#00c853
terminal.ansiMagenta#2d2d2b
terminal.ansiRed#ff5f38
terminal.ansiWhite#d9d9d9
terminal.ansiYellow#00c853
terminal.background#f9f9f7
terminal.foreground#2d2d2b
terminal.selectionBackground#c2775944
terminalCursor.foreground#c27759
textBlockQuote.background#f4f4f2
textBlockQuote.border#c27759
textCodeBlock.background#f4f4f2
textLink.activeForeground#ff5f38
textLink.foreground#cc7d5e
titleBar.activeBackground#f4f4f2
titleBar.activeForeground#2d2d2b
titleBar.border#00000022
titleBar.inactiveBackground#f4f4f2
titleBar.inactiveForeground#8e8e8c
tree.inactiveIndentGuidesStroke#2d2d2b18
tree.indentGuidesStroke#2d2d2b3d
widget.shadow#00000025

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#8e8e8c	—
string, constant.other.symbol, markup.inline.raw	#00c853	—
constant.numeric, constant.language.boolean, constant.language.null	#ff5f38	—
constant, variable.other.constant	#2d2d2b	—
keyword, storage.type, storage.modifier	#ff5f38	—
variable, meta.object-literal.key, support.variable.property, meta.property-name	#2d2d2b	—
variable.parameter, function.parameter	#8e8e8c	—
entity.name.function, support.function, variable.function, meta.function-call	#2d2d2b	—
entity.name.type, entity.name.class, support.type, support.class, entity.other.inherited-class	#2d2d2b	—
entity.name.namespace, entity.name.type.namespace	#2d2d2b	—
keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.logical, keyword.operator.assignment	#ff5f38	—
punctuation, meta.brace	#8e8e8c	—
entity.name.tag, punctuation.definition.tag	#ff5f38	—
entity.other.attribute-name	#ff5f38	—
string.regexp, constant.regexp	#ff5f38	—
markup.heading, entity.name.section	#ff5f38	bold
markup.bold, punctuation.definition.bold	#2d2d2b	bold
markup.italic, punctuation.definition.italic	#ff5f38	italic
markup.underline.link, string.other.link	#c27759	underline
markup.inserted	#00c853	—
markup.deleted	#ff5f38	—
markup.changed	#2d2d2b	—
invalid	#ffffff	—