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 — Linear 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#5e6ad2
activityBar.background#f2f4f8
activityBar.border#00000022
activityBar.foreground#2a3140
activityBar.inactiveForeground#858ea1
activityBarBadge.background#5e6ad2
activityBarBadge.foreground#ffffff
badge.background#5e6ad2
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#2a3140
breadcrumb.background#f7f8fa
breadcrumb.focusForeground#2a3140
breadcrumb.foreground#858ea1
button.background#5e6ad2
button.foreground#ffffff
button.hoverBackground#b4831f
button.secondaryBackground#f2f4f8
button.secondaryForeground#2a3140
button.secondaryHoverBackground#f2f4f8
checkbox.background#f2f4f8
checkbox.border#00000022
commandCenter.background#f2f4f8
commandCenter.border#00000022
commandCenter.foreground#858ea1
debugIcon.continueForeground#0f8f83
debugIcon.disconnectForeground#5e6ad2
debugIcon.pauseForeground#b4831f
debugIcon.restartForeground#0f8f83
debugIcon.startForeground#0f8f83
debugIcon.stepIntoForeground#b4831f
debugIcon.stepOutForeground#b4831f
debugIcon.stepOverForeground#b4831f
debugIcon.stopForeground#5e6ad2
debugToolBar.background#f2f4f8
descriptionForeground#858ea1
diffEditor.diagonalFill#858ea126
diffEditor.insertedLineBackground#0f8f8312
diffEditor.insertedTextBackground#0f8f8320
diffEditor.removedLineBackground#5e6ad212
diffEditor.removedTextBackground#5e6ad220
disabledForeground#2a314066
dropdown.background#f2f4f8
dropdown.border#00000022
dropdown.foreground#2a3140
editor.background#f7f8fa
editor.findMatchBackground#2a31404d
editor.findMatchHighlightBackground#2a314026
editor.findRangeHighlightBackground#5e6ad218
editor.foreground#2a3140
editor.hoverHighlightBackground#5e6ad218
editor.inactiveSelectionBackground#5e6ad21f
editor.lineHighlightBackground#f2f4f8
editor.selectionBackground#5e6ad244
editor.selectionHighlightBackground#5e6ad21f
editor.wordHighlightBackground#b4831f18
editor.wordHighlightStrongBackground#8160d81f
editorBracketHighlight.foreground1#5e6ad2
editorBracketHighlight.foreground2#2a3140
editorBracketHighlight.foreground3#0f8f83
editorBracketHighlight.foreground4#b4831f
editorBracketHighlight.foreground5#8160d8
editorBracketHighlight.foreground6#b4831f
editorBracketMatch.background#5e6ad222
editorBracketMatch.border#5e6ad2
editorBracketPairGuide.activeBackground1#5e6ad28c
editorBracketPairGuide.activeBackground2#5e6ad28c
editorBracketPairGuide.activeBackground3#5e6ad28c
editorBracketPairGuide.activeBackground4#5e6ad28c
editorBracketPairGuide.activeBackground5#5e6ad28c
editorBracketPairGuide.activeBackground6#5e6ad28c
editorBracketPairGuide.background1#2a314018
editorBracketPairGuide.background2#2a314018
editorBracketPairGuide.background3#2a314018
editorBracketPairGuide.background4#2a314018
editorBracketPairGuide.background5#2a314018
editorBracketPairGuide.background6#2a314018
editorCursor.foreground#5e6ad2
editorError.foreground#5e6ad2
editorGroup.border#00000022
editorGroupHeader.tabsBackground#f2f4f8
editorGroupHeader.tabsBorder#00000022
editorGutter.addedBackground#0f8f83
editorGutter.deletedBackground#5e6ad2
editorGutter.modifiedBackground#b4831f
editorHint.foreground#0f8f83
editorHoverWidget.background#f2f4f8
editorHoverWidget.border#00000022
editorIndentGuide.activeBackground1#5e6ad28c
editorIndentGuide.background1#2a314018
editorInfo.foreground#b4831f
editorLineNumber.activeForeground#858ea1
editorLineNumber.foreground#858ea1
editorSuggestWidget.background#f2f4f8
editorSuggestWidget.border#00000022
editorSuggestWidget.selectedBackground#f2f4f8
editorWarning.foreground#0f8f83
editorWhitespace.foreground#2a314018
editorWidget.background#f2f4f8
editorWidget.border#00000022
editorWidget.foreground#2a3140
errorForeground#5e6ad2
focusBorder#5e6ad2
foreground#2a3140
gitDecoration.addedResourceForeground#0f8f83
gitDecoration.conflictingResourceForeground#2a3140
gitDecoration.deletedResourceForeground#5e6ad2
gitDecoration.ignoredResourceForeground#858ea1
gitDecoration.modifiedResourceForeground#b4831f
gitDecoration.renamedResourceForeground#8160d8
gitDecoration.untrackedResourceForeground#0f8f83
icon.foreground#858ea1
input.background#f2f4f8
input.border#00000022
input.foreground#2a3140
input.placeholderForeground#858ea1
inputOption.activeBackground#5e6ad222
inputOption.activeBorder#5e6ad2
inputValidation.errorBackground#5e6ad212
inputValidation.errorBorder#5e6ad2
inputValidation.infoBackground#b4831f12
inputValidation.infoBorder#b4831f
inputValidation.warningBackground#0f8f8312
inputValidation.warningBorder#0f8f83
list.activeSelectionBackground#5e6ad222
list.activeSelectionForeground#2a3140
list.errorForeground#5e6ad2
list.focusBackground#5e6ad21f
list.highlightForeground#5e6ad2
list.hoverBackground#f2f4f8
list.inactiveSelectionBackground#5e6ad214
list.warningForeground#0f8f83
menu.background#f2f4f8
menu.foreground#2a3140
menu.selectionBackground#5e6ad244
menu.separatorBackground#00000022
minimap.background#f7f8fa
minimap.findMatchHighlight#2a314080
minimap.selectionHighlight#5e6ad266
notificationCenter.border#00000022
notificationCenterHeader.background#f2f4f8
notifications.background#f2f4f8
notifications.border#00000022
notifications.foreground#2a3140
panel.background#f2f4f8
panel.border#00000022
panelTitle.activeBorder#5e6ad2
panelTitle.activeForeground#2a3140
panelTitle.inactiveForeground#858ea1
peekView.border#5e6ad2
peekViewEditor.background#f7f8fa
peekViewResult.background#f2f4f8
peekViewResult.selectionBackground#5e6ad244
peekViewTitle.background#f2f4f8
pickerGroup.border#00000022
pickerGroup.foreground#5e6ad2
progressBar.background#5e6ad2
quickInput.background#f2f4f8
quickInput.foreground#2a3140
scrollbar.shadow#00000025
scrollbarSlider.activeBackground#2a314045
scrollbarSlider.background#2a314018
scrollbarSlider.hoverBackground#2a31402e
sideBar.background#f2f4f8
sideBar.border#00000022
sideBar.foreground#4a5263
sideBarSectionHeader.background#f2f4f8
sideBarSectionHeader.border#00000022
sideBarSectionHeader.foreground#2a3140
sideBarTitle.foreground#1f2430
statusBar.background#f2f4f8
statusBar.border#00000022
statusBar.debuggingBackground#5e6ad2
statusBar.debuggingForeground#ffffff
statusBar.foreground#858ea1
statusBar.noFolderBackground#f2f4f8
tab.activeBackground#f7f8fa
tab.activeBorder#f7f8fa
tab.activeBorderTop#5e6ad2
tab.activeForeground#2a3140
tab.border#00000022
tab.inactiveBackground#f2f4f8
tab.inactiveForeground#858ea1
terminal.ansiBlack#0d0d0d
terminal.ansiBlue#b4831f
terminal.ansiBrightBlack#858ea1
terminal.ansiBrightBlue#b4831f
terminal.ansiBrightCyan#b4831f
terminal.ansiBrightGreen#0f8f83
terminal.ansiBrightMagenta#8160d8
terminal.ansiBrightRed#5e6ad2
terminal.ansiBrightWhite#fcfcfc
terminal.ansiBrightYellow#2a3140
terminal.ansiCyan#b4831f
terminal.ansiGreen#0f8f83
terminal.ansiMagenta#8160d8
terminal.ansiRed#5e6ad2
terminal.ansiWhite#d9d9d9
terminal.ansiYellow#0f8f83
terminal.background#f7f8fa
terminal.foreground#2a3140
terminal.selectionBackground#5e6ad244
terminalCursor.foreground#5e6ad2
textBlockQuote.background#f2f4f8
textBlockQuote.border#5e6ad2
textCodeBlock.background#f2f4f8
textLink.activeForeground#b4831f
textLink.foreground#5e6ad2
titleBar.activeBackground#f2f4f8
titleBar.activeForeground#2a3140
titleBar.border#00000022
titleBar.inactiveBackground#f2f4f8
titleBar.inactiveForeground#858ea1
tree.inactiveIndentGuidesStroke#2a314018
tree.indentGuidesStroke#2a31403d
widget.shadow#00000025

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#858ea1	—
string, constant.other.symbol, markup.inline.raw	#0f8f83	—
constant.numeric, constant.language.boolean, constant.language.null	#b4831f	—
constant, variable.other.constant	#2a3140	—
keyword, storage.type, storage.modifier	#5e6ad2	—
variable, meta.object-literal.key, support.variable.property, meta.property-name	#2a3140	—
variable.parameter, function.parameter	#858ea1	—
entity.name.function, support.function, variable.function, meta.function-call	#8160d8	—
entity.name.type, entity.name.class, support.type, support.class, entity.other.inherited-class	#8160d8	—
entity.name.namespace, entity.name.type.namespace	#2a3140	—
keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.logical, keyword.operator.assignment	#b4831f	—
punctuation, meta.brace	#858ea1	—
entity.name.tag, punctuation.definition.tag	#5e6ad2	—
entity.other.attribute-name	#b4831f	—
string.regexp, constant.regexp	#b4831f	—
markup.heading, entity.name.section	#5e6ad2	bold
markup.bold, punctuation.definition.bold	#2a3140	bold
markup.italic, punctuation.definition.italic	#5e6ad2	italic
markup.underline.link, string.other.link	#5e6ad2	underline
markup.inserted	#0f8f83	—
markup.deleted	#5e6ad2	—
markup.changed	#2a3140	—
invalid	#ffffff	—