Codex Palette for VS Code
Publisher: smallyuThemes in package: 43
All 43 Codex appearance presets for VS Code, with faithful colors and one-click system appearance switching.
Color themes
VS Code preview
Full workbench mockup using this variant's colors and tokenColors.
Loading...
colors
Workbench UI color keys from the theme JSON colors map.
- activityBar.activeBorder#e4f222
- activityBar.background#1d2d0f
- activityBar.border#ffffff22
- activityBar.foreground#c7e6da
- activityBar.inactiveForeground#4e645c
- activityBarBadge.background#e4f222
- activityBarBadge.foreground#ffffff
- badge.background#e4f222
- badge.foreground#ffffff
- breadcrumb.activeSelectionForeground#c7e6da
- breadcrumb.background#02120c
- breadcrumb.focusForeground#c7e6da
- breadcrumb.foreground#4e645c
- button.background#e4f222
- button.foreground#ffffff
- button.hoverBackground#e4f222
- button.secondaryBackground#1d2d0f
- button.secondaryForeground#c7e6da
- button.secondaryHoverBackground#1d2d0f
- checkbox.background#1d2d0f
- checkbox.border#ffffff22
- commandCenter.background#1d2d0f
- commandCenter.border#ffffff22
- commandCenter.foreground#4e645c
- debugIcon.continueForeground#e4f222
- debugIcon.disconnectForeground#e4f222
- debugIcon.pauseForeground#e4f222
- debugIcon.restartForeground#e4f222
- debugIcon.startForeground#e4f222
- debugIcon.stepIntoForeground#e4f222
- debugIcon.stepOutForeground#e4f222
- debugIcon.stepOverForeground#e4f222
- debugIcon.stopForeground#e4f222
- debugToolBar.background#1d2d0f
- descriptionForeground#4e645c
- diffEditor.diagonalFill#4e645c26
- diffEditor.insertedLineBackground#e4f22218
- diffEditor.insertedTextBackground#e4f22230
- diffEditor.removedLineBackground#e4f22218
- diffEditor.removedTextBackground#e4f22230
- disabledForeground#c7e6da66
- dropdown.background#1d2d0f
- dropdown.border#ffffff22
- dropdown.foreground#c7e6da
- editor.background#02120c
- editor.findMatchBackground#c7e6da66
- editor.findMatchHighlightBackground#c7e6da35
- editor.findRangeHighlightBackground#e4f22218
- editor.foreground#c7e6da
- editor.hoverHighlightBackground#e4f22218
- editor.inactiveSelectionBackground#e4f22233
- editor.lineHighlightBackground#1d2d0f
- editor.selectionBackground#e4f22244
- editor.selectionHighlightBackground#e4f22233
- editor.wordHighlightBackground#e4f22225
- editor.wordHighlightStrongBackground#e4f22230
- editorBracketHighlight.foreground1#e4f222
- editorBracketHighlight.foreground2#c7e6da
- editorBracketHighlight.foreground3#e4f222
- editorBracketHighlight.foreground4#e4f222
- editorBracketHighlight.foreground5#e4f222
- editorBracketHighlight.foreground6#e4f222
- editorBracketMatch.background#e4f22222
- editorBracketMatch.border#e4f222
- editorBracketPairGuide.activeBackground1#e4f222a6
- editorBracketPairGuide.activeBackground2#e4f222a6
- editorBracketPairGuide.activeBackground3#e4f222a6
- editorBracketPairGuide.activeBackground4#e4f222a6
- editorBracketPairGuide.activeBackground5#e4f222a6
- editorBracketPairGuide.activeBackground6#e4f222a6
- editorBracketPairGuide.background1#c7e6da24
- editorBracketPairGuide.background2#c7e6da24
- editorBracketPairGuide.background3#c7e6da24
- editorBracketPairGuide.background4#c7e6da24
- editorBracketPairGuide.background5#c7e6da24
- editorBracketPairGuide.background6#c7e6da24
- editorCursor.foreground#e4f222
- editorError.foreground#e4f222
- editorGroup.border#ffffff22
- editorGroupHeader.tabsBackground#1d2d0f
- editorGroupHeader.tabsBorder#ffffff22
- editorGutter.addedBackground#e4f222
- editorGutter.deletedBackground#e4f222
- editorGutter.modifiedBackground#e4f222
- editorHint.foreground#e4f222
- editorHoverWidget.background#1d2d0f
- editorHoverWidget.border#ffffff22
- editorIndentGuide.activeBackground1#e4f222a6
- editorIndentGuide.background1#c7e6da24
- editorInfo.foreground#e4f222
- editorLineNumber.activeForeground#4e645c
- editorLineNumber.foreground#4e645c
- editorSuggestWidget.background#1d2d0f
- editorSuggestWidget.border#ffffff22
- editorSuggestWidget.selectedBackground#1d2d0f
- editorWarning.foreground#e4f222
- editorWhitespace.foreground#c7e6da24
- editorWidget.background#1d2d0f
- editorWidget.border#ffffff22
- editorWidget.foreground#c7e6da
- errorForeground#e4f222
- focusBorder#e4f222
- foreground#c7e6da
- gitDecoration.addedResourceForeground#e4f222
- gitDecoration.conflictingResourceForeground#c7e6da
- gitDecoration.deletedResourceForeground#e4f222
- gitDecoration.ignoredResourceForeground#4e645c
- gitDecoration.modifiedResourceForeground#e4f222
- gitDecoration.renamedResourceForeground#e4f222
- gitDecoration.untrackedResourceForeground#e4f222
- icon.foreground#4e645c
- input.background#1d2d0f
- input.border#ffffff22
- input.foreground#c7e6da
- input.placeholderForeground#4e645c
- inputOption.activeBackground#e4f22255
- inputOption.activeBorder#e4f222
- inputValidation.errorBackground#e4f22222
- inputValidation.errorBorder#e4f222
- inputValidation.infoBackground#e4f22222
- inputValidation.infoBorder#e4f222
- inputValidation.warningBackground#e4f22222
- inputValidation.warningBorder#e4f222
- list.activeSelectionBackground#e4f22255
- list.activeSelectionForeground#c7e6da
- list.errorForeground#e4f222
- list.focusBackground#e4f22244
- list.highlightForeground#e4f222
- list.hoverBackground#1d2d0f
- list.inactiveSelectionBackground#e4f22233
- list.warningForeground#e4f222
- menu.background#1d2d0f
- menu.foreground#c7e6da
- menu.selectionBackground#e4f22244
- menu.separatorBackground#ffffff22
- minimap.background#02120c
- minimap.findMatchHighlight#c7e6da80
- minimap.selectionHighlight#e4f22266
- notificationCenter.border#ffffff22
- notificationCenterHeader.background#1d2d0f
- notifications.background#1d2d0f
- notifications.border#ffffff22
- notifications.foreground#c7e6da
- panel.background#1d2d0f
- panel.border#ffffff22
- panelTitle.activeBorder#e4f222
- panelTitle.activeForeground#c7e6da
- panelTitle.inactiveForeground#4e645c
- peekView.border#e4f222
- peekViewEditor.background#02120c
- peekViewResult.background#1d2d0f
- peekViewResult.selectionBackground#e4f22244
- peekViewTitle.background#1d2d0f
- pickerGroup.border#ffffff22
- pickerGroup.foreground#e4f222
- progressBar.background#e4f222
- quickInput.background#1d2d0f
- quickInput.foreground#c7e6da
- scrollbar.shadow#00000088
- scrollbarSlider.activeBackground#c7e6da45
- scrollbarSlider.background#c7e6da18
- scrollbarSlider.hoverBackground#c7e6da2e
- sideBar.background#1d2d0f
- sideBar.border#ffffff22
- sideBar.foreground#c7e6da
- sideBarSectionHeader.background#1d2d0f
- sideBarSectionHeader.border#ffffff22
- sideBarSectionHeader.foreground#c7e6da
- sideBarTitle.foreground#c7e6da
- statusBar.background#1d2d0f
- statusBar.border#ffffff22
- statusBar.debuggingBackground#e4f222
- statusBar.debuggingForeground#111111
- statusBar.foreground#4e645c
- statusBar.noFolderBackground#1d2d0f
- tab.activeBackground#02120c
- tab.activeBorder#02120c
- tab.activeBorderTop#e4f222
- tab.activeForeground#c7e6da
- tab.border#ffffff22
- tab.inactiveBackground#1d2d0f
- tab.inactiveForeground#4e645c
- terminal.ansiBlack#111111
- terminal.ansiBlue#e4f222
- terminal.ansiBrightBlack#4e645c
- terminal.ansiBrightBlue#e4f222
- terminal.ansiBrightCyan#e4f222
- terminal.ansiBrightGreen#e4f222
- terminal.ansiBrightMagenta#e4f222
- terminal.ansiBrightRed#e4f222
- terminal.ansiBrightWhite#ffffff
- terminal.ansiBrightYellow#c7e6da
- terminal.ansiCyan#e4f222
- terminal.ansiGreen#e4f222
- terminal.ansiMagenta#e4f222
- terminal.ansiRed#e4f222
- terminal.ansiWhite#d6d6d6
- terminal.ansiYellow#e4f222
- terminal.background#02120c
- terminal.foreground#c7e6da
- terminal.selectionBackground#e4f22244
- terminalCursor.foreground#e4f222
- textBlockQuote.background#1d2d0f
- textBlockQuote.border#e4f222
- textCodeBlock.background#1d2d0f
- textLink.activeForeground#e4f222
- textLink.foreground#e4f222
- titleBar.activeBackground#1d2d0f
- titleBar.activeForeground#c7e6da
- titleBar.border#ffffff22
- titleBar.inactiveBackground#1d2d0f
- titleBar.inactiveForeground#4e645c
- tree.inactiveIndentGuidesStroke#c7e6da24
- tree.indentGuidesStroke#c7e6da52
- widget.shadow#00000088
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #4e645c | — |
| string, constant.other.symbol, markup.inline.raw | #e4f222 | — |
| constant.numeric, constant.language.boolean, constant.language.null | #e4f222 | — |
| constant, variable.other.constant | #c7e6da | — |
| keyword, storage.type, storage.modifier | #e4f222 | — |
| variable, meta.object-literal.key, support.variable.property, meta.property-name | #c7e6da | — |
| variable.parameter, function.parameter | #4e645c | — |
| entity.name.function, support.function, variable.function, meta.function-call | #e4f222 | — |
| entity.name.type, entity.name.class, support.type, support.class, entity.other.inherited-class | #e4f222 | — |
| entity.name.namespace, entity.name.type.namespace | #c7e6da | — |
| keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.logical, keyword.operator.assignment | #e4f222 | — |
| punctuation, meta.brace | #4e645c | — |
| entity.name.tag, punctuation.definition.tag | #e4f222 | — |
| entity.other.attribute-name | #e4f222 | — |
| string.regexp, constant.regexp | #e4f222 | — |
| markup.heading, entity.name.section | #e4f222 | bold |
| markup.bold, punctuation.definition.bold | #c7e6da | bold |
| markup.italic, punctuation.definition.italic | #e4f222 | italic |
| markup.underline.link, string.other.link | #e4f222 | underline |
| markup.inserted | #e4f222 | — |
| markup.deleted | #e4f222 | — |
| markup.changed | #c7e6da | — |
| invalid | #ffffff | — |