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 — Material 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#80CBC4
activityBar.background#212121
activityBar.border#21212160
activityBar.foreground#EEFFFF
activityBar.inactiveForeground#424242
activityBarBadge.background#80CBC4
activityBarBadge.foreground#000000
badge.background#717171
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#EEFFFF
breadcrumb.background#212121
breadcrumb.focusForeground#EEFFFF
breadcrumb.foreground#6b6e6e
button.background#61616150
button.foreground#ffffff
button.hoverBackground#82AAFF
button.secondaryBackground#212121
button.secondaryForeground#EEFFFF
button.secondaryHoverBackground#212121
checkbox.background#212121
checkbox.border#21212160
commandCenter.background#212121
commandCenter.border#21212160
commandCenter.foreground#6b6e6e
debugIcon.continueForeground#C3E88D
debugIcon.disconnectForeground#f07178
debugIcon.pauseForeground#82AAFF
debugIcon.restartForeground#C3E88D
debugIcon.startForeground#C3E88D
debugIcon.stepIntoForeground#82AAFF
debugIcon.stepOutForeground#82AAFF
debugIcon.stepOverForeground#82AAFF
debugIcon.stopForeground#f07178
debugToolBar.background#212121
descriptionForeground#6b6e6e
diffEditor.diagonalFill#6b6e6e26
diffEditor.insertedLineBackground#C3E88D18
diffEditor.insertedTextBackground#C3E88D30
diffEditor.removedLineBackground#f0717818
diffEditor.removedTextBackground#f0717830
disabledForeground#EEFFFF66
dropdown.background#212121
dropdown.border#21212160
dropdown.foreground#EEFFFF
editor.background#212121
editor.findMatchBackground#f0717866
editor.findMatchHighlightBackground#f0717835
editor.findRangeHighlightBackground#71717118
editor.foreground#EEFFFF
editor.hoverHighlightBackground#71717118
editor.inactiveSelectionBackground#71717133
editor.lineHighlightBackground#212121
editor.selectionBackground#61616150
editor.selectionHighlightBackground#71717133
editor.wordHighlightBackground#82AAFF25
editor.wordHighlightStrongBackground#C792EA30
editorBracketHighlight.foreground1#f07178
editorBracketHighlight.foreground2#f07178
editorBracketHighlight.foreground3#C3E88D
editorBracketHighlight.foreground4#82AAFF
editorBracketHighlight.foreground5#C792EA
editorBracketHighlight.foreground6#82AAFF
editorBracketMatch.background#71717122
editorBracketMatch.border#717171
editorBracketPairGuide.activeBackground1#717171a6
editorBracketPairGuide.activeBackground2#717171a6
editorBracketPairGuide.activeBackground3#717171a6
editorBracketPairGuide.activeBackground4#717171a6
editorBracketPairGuide.activeBackground5#717171a6
editorBracketPairGuide.activeBackground6#717171a6
editorBracketPairGuide.background1#EEFFFF24
editorBracketPairGuide.background2#EEFFFF24
editorBracketPairGuide.background3#EEFFFF24
editorBracketPairGuide.background4#EEFFFF24
editorBracketPairGuide.background5#EEFFFF24
editorBracketPairGuide.background6#EEFFFF24
editorCursor.foreground#FFCC00
editorError.foreground#f07178
editorGroup.border#21212160
editorGroupHeader.tabsBackground#212121
editorGroupHeader.tabsBorder#21212160
editorGutter.addedBackground#C3E88D
editorGutter.deletedBackground#f07178
editorGutter.modifiedBackground#82AAFF
editorHint.foreground#C3E88D
editorHoverWidget.background#212121
editorHoverWidget.border#21212160
editorIndentGuide.activeBackground1#717171a6
editorIndentGuide.background1#EEFFFF24
editorInfo.foreground#82AAFF
editorLineNumber.activeForeground#6b6e6e
editorLineNumber.foreground#424242
editorSuggestWidget.background#212121
editorSuggestWidget.border#21212160
editorSuggestWidget.selectedBackground#212121
editorWarning.foreground#FFCB6B
editorWhitespace.foreground#EEFFFF24
editorWidget.background#212121
editorWidget.border#21212160
editorWidget.foreground#EEFFFF
errorForeground#f07178
focusBorder#FFFFFF00
foreground#EEFFFF
gitDecoration.addedResourceForeground#C3E88D
gitDecoration.conflictingResourceForeground#f07178
gitDecoration.deletedResourceForeground#f0717890
gitDecoration.ignoredResourceForeground#424242
gitDecoration.modifiedResourceForeground#82AAFF90
gitDecoration.renamedResourceForeground#C792EA
gitDecoration.untrackedResourceForeground#C3E88D90
icon.foreground#6b6e6e
input.background#212121
input.border#21212160
input.foreground#EEFFFF
input.placeholderForeground#424242
inputOption.activeBackground#71717155
inputOption.activeBorder#717171
inputValidation.errorBackground#f0717822
inputValidation.errorBorder#f07178
inputValidation.infoBackground#82AAFF22
inputValidation.infoBorder#82AAFF
inputValidation.warningBackground#FFCB6B22
inputValidation.warningBorder#FFCB6B
list.activeSelectionBackground#71717155
list.activeSelectionForeground#EEFFFF
list.errorForeground#f07178
list.focusBackground#71717144
list.highlightForeground#717171
list.hoverBackground#212121
list.inactiveSelectionBackground#71717133
list.warningForeground#FFCB6B
menu.background#212121
menu.foreground#EEFFFF
menu.selectionBackground#61616150
menu.separatorBackground#21212160
minimap.background#212121
minimap.findMatchHighlight#f0717880
minimap.selectionHighlight#71717166
notificationCenter.border#21212160
notificationCenterHeader.background#212121
notifications.background#212121
notifications.border#21212160
notifications.foreground#EEFFFF
panel.background#212121
panel.border#21212160
panelTitle.activeBorder#717171
panelTitle.activeForeground#EEFFFF
panelTitle.inactiveForeground#6b6e6e
peekView.border#717171
peekViewEditor.background#212121
peekViewResult.background#212121
peekViewResult.selectionBackground#61616150
peekViewTitle.background#212121
pickerGroup.border#21212160
pickerGroup.foreground#717171
progressBar.background#717171
quickInput.background#212121
quickInput.foreground#EEFFFF
scrollbar.shadow#00000088
scrollbarSlider.activeBackground#EEFFFF45
scrollbarSlider.background#EEFFFF18
scrollbarSlider.hoverBackground#EEFFFF2e
sideBar.background#212121
sideBar.border#21212160
sideBar.foreground#676767
sideBarSectionHeader.background#212121
sideBarSectionHeader.border#21212160
sideBarSectionHeader.foreground#EEFFFF
sideBarTitle.foreground#EEFFFF
statusBar.background#212121
statusBar.border#21212160
statusBar.debuggingBackground#f07178
statusBar.debuggingForeground#111111
statusBar.foreground#6b6e6e
statusBar.noFolderBackground#212121
tab.activeBackground#212121
tab.activeBorder#212121
tab.activeBorderTop#717171
tab.activeForeground#EEFFFF
tab.border#21212160
tab.inactiveBackground#212121
tab.inactiveForeground#6b6e6e
terminal.ansiBlack#000000
terminal.ansiBlue#82AAFF
terminal.ansiBrightBlack#545454
terminal.ansiBrightBlue#82AAFF
terminal.ansiBrightCyan#89DDFF
terminal.ansiBrightGreen#C3E88D
terminal.ansiBrightMagenta#C792EA
terminal.ansiBrightRed#f07178
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#FFCB6B
terminal.ansiCyan#89DDFF
terminal.ansiGreen#C3E88D
terminal.ansiMagenta#C792EA
terminal.ansiRed#f07178
terminal.ansiWhite#ffffff
terminal.ansiYellow#FFCB6B
terminal.background#212121
terminal.foreground#EEFFFF
terminal.selectionBackground#61616150
terminalCursor.foreground#717171
textBlockQuote.background#212121
textBlockQuote.border#717171
textCodeBlock.background#212121
textLink.activeForeground#EEFFFF
textLink.foreground#80CBC4
titleBar.activeBackground#212121
titleBar.activeForeground#EEFFFF
titleBar.border#21212160
titleBar.inactiveBackground#212121
titleBar.inactiveForeground#424242
tree.inactiveIndentGuidesStroke#EEFFFF24
tree.indentGuidesStroke#EEFFFF52
widget.shadow#00000088

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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