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 — Ayu 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#e6b450
activityBar.background#0d1017
activityBar.border#1b1f29
activityBar.foreground#5a6378cc
activityBar.inactiveForeground#5a637899
activityBarBadge.background#e6b450
activityBarBadge.foreground#765b24
badge.background#e6b450
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#bfbdb6
breadcrumb.background#10141c
breadcrumb.focusForeground#bfbdb6
breadcrumb.foreground#5a6673
button.background#e6b450
button.foreground#765b24
button.hoverBackground#deae4d
button.secondaryBackground#141821
button.secondaryForeground#bfbdb6
button.secondaryHoverBackground#47526640
checkbox.background#141821
checkbox.border#1b1f29
commandCenter.background#141821
commandCenter.border#1b1f29
commandCenter.foreground#5a6673
debugIcon.continueForeground#70bf56
debugIcon.disconnectForeground#f06b73
debugIcon.pauseForeground#4fbfff
debugIcon.restartForeground#70bf56
debugIcon.startForeground#70bf56
debugIcon.stepIntoForeground#4fbfff
debugIcon.stepOutForeground#4fbfff
debugIcon.stepOverForeground#4fbfff
debugIcon.stopForeground#f06b73
debugToolBar.background#141821
descriptionForeground#5a6378
diffEditor.diagonalFill#5a667326
diffEditor.insertedLineBackground#70bf5618
diffEditor.insertedTextBackground#70bf5630
diffEditor.removedLineBackground#f26d7818
diffEditor.removedTextBackground#f26d7830
disabledForeground#bfbdb666
dropdown.background#141821
dropdown.border#1b1f29
dropdown.foreground#bfbdb6
editor.background#10141c
editor.findMatchBackground#bfbdb666
editor.findMatchHighlightBackground#bfbdb635
editor.findRangeHighlightBackground#e6b45018
editor.foreground#bfbdb6
editor.hoverHighlightBackground#e6b45018
editor.inactiveSelectionBackground#e6b45033
editor.lineHighlightBackground#0d1017
editor.selectionBackground#3388ff40
editor.selectionHighlightBackground#e6b45033
editor.wordHighlightBackground#4fbfff25
editor.wordHighlightStrongBackground#d0a1ff30
editorBracketHighlight.foreground1#f06b73
editorBracketHighlight.foreground2#bfbdb6
editorBracketHighlight.foreground3#70bf56
editorBracketHighlight.foreground4#4fbfff
editorBracketHighlight.foreground5#d0a1ff
editorBracketHighlight.foreground6#59c2ff
editorBracketMatch.background#e6b45022
editorBracketMatch.border#e6b450
editorBracketPairGuide.activeBackground1#e6b450a6
editorBracketPairGuide.activeBackground2#e6b450a6
editorBracketPairGuide.activeBackground3#e6b450a6
editorBracketPairGuide.activeBackground4#e6b450a6
editorBracketPairGuide.activeBackground5#e6b450a6
editorBracketPairGuide.activeBackground6#e6b450a6
editorBracketPairGuide.background1#bfbdb624
editorBracketPairGuide.background2#bfbdb624
editorBracketPairGuide.background3#bfbdb624
editorBracketPairGuide.background4#bfbdb624
editorBracketPairGuide.background5#bfbdb624
editorBracketPairGuide.background6#bfbdb624
editorCursor.foreground#e6b450
editorError.foreground#f06b73
editorGroup.border#1b1f29
editorGroupHeader.tabsBackground#0d1017
editorGroupHeader.tabsBorder#1b1f29
editorGutter.addedBackground#70bf56
editorGutter.deletedBackground#f26d78
editorGutter.modifiedBackground#4fbfff
editorHint.foreground#70bf56
editorHoverWidget.background#141821
editorHoverWidget.border#1b1f29
editorIndentGuide.activeBackground1#e6b450a6
editorIndentGuide.background1#bfbdb624
editorInfo.foreground#4fbfff
editorLineNumber.activeForeground#5a6673
editorLineNumber.foreground#5a6378a6
editorSuggestWidget.background#141821
editorSuggestWidget.border#1b1f29
editorSuggestWidget.selectedBackground#47526640
editorWarning.foreground#fdb04c
editorWhitespace.foreground#bfbdb624
editorWidget.background#141821
editorWidget.border#1b1f29
editorWidget.foreground#bfbdb6
errorForeground#d95757
focusBorder#e6b450
foreground#5a6378
gitDecoration.addedResourceForeground#70bf56
gitDecoration.conflictingResourceForeground#bfbdb6
gitDecoration.deletedResourceForeground#f26d78
gitDecoration.ignoredResourceForeground#5a6378a6
gitDecoration.modifiedResourceForeground#73b8ff
gitDecoration.renamedResourceForeground#d0a1ff
gitDecoration.untrackedResourceForeground#70bf56
icon.foreground#5a6673
input.background#141821
input.border#1b1f29
input.foreground#bfbdb6
input.placeholderForeground#5a6378a6
inputOption.activeBackground#e6b45055
inputOption.activeBorder#e6b450
inputValidation.errorBackground#f06b7322
inputValidation.errorBorder#f06b73
inputValidation.infoBackground#4fbfff22
inputValidation.infoBorder#4fbfff
inputValidation.warningBackground#fdb04c22
inputValidation.warningBorder#fdb04c
list.activeSelectionBackground#e6b45055
list.activeSelectionForeground#bfbdb6
list.errorForeground#f06b73
list.focusBackground#e6b45044
list.highlightForeground#e6b450
list.hoverBackground#47526640
list.inactiveSelectionBackground#e6b45033
list.warningForeground#fdb04c
menu.background#141821
menu.foreground#bfbdb6
menu.selectionBackground#3388ff40
menu.separatorBackground#1b1f29
minimap.background#10141c
minimap.findMatchHighlight#bfbdb680
minimap.selectionHighlight#e6b45066
notificationCenter.border#1b1f29
notificationCenterHeader.background#141821
notifications.background#141821
notifications.border#1b1f29
notifications.foreground#bfbdb6
panel.background#0d1017
panel.border#1b1f29
panelTitle.activeBorder#e6b450
panelTitle.activeForeground#bfbdb6
panelTitle.inactiveForeground#5a6673
peekView.border#e6b450
peekViewEditor.background#10141c
peekViewResult.background#0d1017
peekViewResult.selectionBackground#3388ff40
peekViewTitle.background#141821
pickerGroup.border#1b1f29
pickerGroup.foreground#e6b450
progressBar.background#e6b450
quickInput.background#141821
quickInput.foreground#bfbdb6
scrollbar.shadow#00000088
scrollbarSlider.activeBackground#bfbdb645
scrollbarSlider.background#bfbdb618
scrollbarSlider.hoverBackground#bfbdb62e
sideBar.background#0d1017
sideBar.border#1b1f29
sideBar.foreground#5a6673
sideBarSectionHeader.background#0d1017
sideBarSectionHeader.border#1b1f29
sideBarSectionHeader.foreground#5a6378
sideBarTitle.foreground#5a6378
statusBar.background#0d1017
statusBar.border#1b1f29
statusBar.debuggingBackground#f06b73
statusBar.debuggingForeground#111111
statusBar.foreground#5a6673
statusBar.noFolderBackground#0d1017
tab.activeBackground#10141c
tab.activeBorder#10141c
tab.activeBorderTop#e6b450
tab.activeForeground#bfbdb6
tab.border#1b1f29
tab.inactiveBackground#0d1017
tab.inactiveForeground#5a6673
terminal.ansiBlack#1b1f29
terminal.ansiBlue#4fbfff
terminal.ansiBrightBlack#686868
terminal.ansiBrightBlue#59c2ff
terminal.ansiBrightCyan#95e6cb
terminal.ansiBrightGreen#aad94c
terminal.ansiBrightMagenta#d2a6ff
terminal.ansiBrightRed#f07178
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#ffb454
terminal.ansiCyan#93e2c8
terminal.ansiGreen#70bf56
terminal.ansiMagenta#d0a1ff
terminal.ansiRed#f06b73
terminal.ansiWhite#c7c7c7
terminal.ansiYellow#fdb04c
terminal.background#10141c
terminal.foreground#bfbdb6
terminal.selectionBackground#3388ff40
terminalCursor.foreground#e6b450
textBlockQuote.background#0d1017
textBlockQuote.border#e6b450
textCodeBlock.background#141821
textLink.activeForeground#e6b450
textLink.foreground#e6b450
titleBar.activeBackground#0d1017
titleBar.activeForeground#bfbdb6
titleBar.border#1b1f29
titleBar.inactiveBackground#0d1017
titleBar.inactiveForeground#5a6378a6
tree.inactiveIndentGuidesStroke#bfbdb624
tree.indentGuidesStroke#bfbdb652
widget.shadow#00000088

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#5a6673	—
string, constant.other.symbol, markup.inline.raw	#70bf56	—
constant.numeric, constant.language.boolean, constant.language.null	#4fbfff	—
constant, variable.other.constant	#bfbdb6	—
keyword, storage.type, storage.modifier	#f06b73	—
variable, meta.object-literal.key, support.variable.property, meta.property-name	#bfbdb6	—
variable.parameter, function.parameter	#5a6673	—
entity.name.function, support.function, variable.function, meta.function-call	#d0a1ff	—
entity.name.type, entity.name.class, support.type, support.class, entity.other.inherited-class	#d0a1ff	—
entity.name.namespace, entity.name.type.namespace	#bfbdb6	—
keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.logical, keyword.operator.assignment	#4fbfff	—
punctuation, meta.brace	#5a6673	—
entity.name.tag, punctuation.definition.tag	#f06b73	—
entity.other.attribute-name	#4fbfff	—
string.regexp, constant.regexp	#59c2ff	—
markup.heading, entity.name.section	#f06b73	bold
markup.bold, punctuation.definition.bold	#bfbdb6	bold
markup.italic, punctuation.definition.italic	#f06b73	italic
markup.underline.link, string.other.link	#e6b450	underline
markup.inserted	#70bf56	—
markup.deleted	#f06b73	—
markup.changed	#bfbdb6	—
invalid	#ffffff	—