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#1eff5a
- activityBar.background#020402
- activityBar.border#ffffff22
- activityBar.foreground#b8ffca
- activityBar.inactiveForeground#3f8f52
- activityBarBadge.background#1eff5a
- activityBarBadge.foreground#ffffff
- badge.background#1eff5a
- badge.foreground#ffffff
- breadcrumb.activeSelectionForeground#b8ffca
- breadcrumb.background#040805
- breadcrumb.focusForeground#b8ffca
- breadcrumb.foreground#3f8f52
- button.background#1eff5a
- button.foreground#ffffff
- button.hoverBackground#55ff7d
- button.secondaryBackground#020402
- button.secondaryForeground#b8ffca
- button.secondaryHoverBackground#020402
- checkbox.background#020402
- checkbox.border#ffffff22
- commandCenter.background#020402
- commandCenter.border#ffffff22
- commandCenter.foreground#3f8f52
- debugIcon.continueForeground#7dff95
- debugIcon.disconnectForeground#1eff5a
- debugIcon.pauseForeground#55ff7d
- debugIcon.restartForeground#7dff95
- debugIcon.startForeground#7dff95
- debugIcon.stepIntoForeground#55ff7d
- debugIcon.stepOutForeground#55ff7d
- debugIcon.stepOverForeground#55ff7d
- debugIcon.stopForeground#1eff5a
- debugToolBar.background#020402
- descriptionForeground#3f8f52
- diffEditor.diagonalFill#3f8f5226
- diffEditor.insertedLineBackground#7dff9518
- diffEditor.insertedTextBackground#7dff9530
- diffEditor.removedLineBackground#1eff5a18
- diffEditor.removedTextBackground#1eff5a30
- disabledForeground#b8ffca66
- dropdown.background#020402
- dropdown.border#ffffff22
- dropdown.foreground#b8ffca
- editor.background#040805
- editor.findMatchBackground#b8ffca66
- editor.findMatchHighlightBackground#b8ffca35
- editor.findRangeHighlightBackground#1eff5a18
- editor.foreground#b8ffca
- editor.hoverHighlightBackground#1eff5a18
- editor.inactiveSelectionBackground#1eff5a33
- editor.lineHighlightBackground#020402
- editor.selectionBackground#1eff5a44
- editor.selectionHighlightBackground#1eff5a33
- editor.wordHighlightBackground#55ff7d25
- editor.wordHighlightStrongBackground#9bffb830
- editorBracketHighlight.foreground1#1eff5a
- editorBracketHighlight.foreground2#b8ffca
- editorBracketHighlight.foreground3#7dff95
- editorBracketHighlight.foreground4#55ff7d
- editorBracketHighlight.foreground5#9bffb8
- editorBracketHighlight.foreground6#55ff7d
- editorBracketMatch.background#1eff5a22
- editorBracketMatch.border#1eff5a
- editorBracketPairGuide.activeBackground1#1eff5aa6
- editorBracketPairGuide.activeBackground2#1eff5aa6
- editorBracketPairGuide.activeBackground3#1eff5aa6
- editorBracketPairGuide.activeBackground4#1eff5aa6
- editorBracketPairGuide.activeBackground5#1eff5aa6
- editorBracketPairGuide.activeBackground6#1eff5aa6
- editorBracketPairGuide.background1#b8ffca24
- editorBracketPairGuide.background2#b8ffca24
- editorBracketPairGuide.background3#b8ffca24
- editorBracketPairGuide.background4#b8ffca24
- editorBracketPairGuide.background5#b8ffca24
- editorBracketPairGuide.background6#b8ffca24
- editorCursor.foreground#1eff5a
- editorError.foreground#1eff5a
- editorGroup.border#ffffff22
- editorGroupHeader.tabsBackground#020402
- editorGroupHeader.tabsBorder#ffffff22
- editorGutter.addedBackground#7dff95
- editorGutter.deletedBackground#1eff5a
- editorGutter.modifiedBackground#55ff7d
- editorHint.foreground#7dff95
- editorHoverWidget.background#020402
- editorHoverWidget.border#ffffff22
- editorIndentGuide.activeBackground1#1eff5aa6
- editorIndentGuide.background1#b8ffca24
- editorInfo.foreground#55ff7d
- editorLineNumber.activeForeground#3f8f52
- editorLineNumber.foreground#3f8f52
- editorSuggestWidget.background#020402
- editorSuggestWidget.border#ffffff22
- editorSuggestWidget.selectedBackground#020402
- editorWarning.foreground#7dff95
- editorWhitespace.foreground#b8ffca24
- editorWidget.background#020402
- editorWidget.border#ffffff22
- editorWidget.foreground#b8ffca
- errorForeground#1eff5a
- focusBorder#1eff5a
- foreground#b8ffca
- gitDecoration.addedResourceForeground#7dff95
- gitDecoration.conflictingResourceForeground#b8ffca
- gitDecoration.deletedResourceForeground#1eff5a
- gitDecoration.ignoredResourceForeground#3f8f52
- gitDecoration.modifiedResourceForeground#55ff7d
- gitDecoration.renamedResourceForeground#9bffb8
- gitDecoration.untrackedResourceForeground#7dff95
- icon.foreground#3f8f52
- input.background#020402
- input.border#ffffff22
- input.foreground#b8ffca
- input.placeholderForeground#3f8f52
- inputOption.activeBackground#1eff5a55
- inputOption.activeBorder#1eff5a
- inputValidation.errorBackground#1eff5a22
- inputValidation.errorBorder#1eff5a
- inputValidation.infoBackground#55ff7d22
- inputValidation.infoBorder#55ff7d
- inputValidation.warningBackground#7dff9522
- inputValidation.warningBorder#7dff95
- list.activeSelectionBackground#1eff5a55
- list.activeSelectionForeground#b8ffca
- list.errorForeground#1eff5a
- list.focusBackground#1eff5a44
- list.highlightForeground#1eff5a
- list.hoverBackground#020402
- list.inactiveSelectionBackground#1eff5a33
- list.warningForeground#7dff95
- menu.background#020402
- menu.foreground#b8ffca
- menu.selectionBackground#1eff5a44
- menu.separatorBackground#ffffff22
- minimap.background#040805
- minimap.findMatchHighlight#b8ffca80
- minimap.selectionHighlight#1eff5a66
- notificationCenter.border#ffffff22
- notificationCenterHeader.background#020402
- notifications.background#020402
- notifications.border#ffffff22
- notifications.foreground#b8ffca
- panel.background#020402
- panel.border#ffffff22
- panelTitle.activeBorder#1eff5a
- panelTitle.activeForeground#b8ffca
- panelTitle.inactiveForeground#3f8f52
- peekView.border#1eff5a
- peekViewEditor.background#040805
- peekViewResult.background#020402
- peekViewResult.selectionBackground#1eff5a44
- peekViewTitle.background#020402
- pickerGroup.border#ffffff22
- pickerGroup.foreground#1eff5a
- progressBar.background#1eff5a
- quickInput.background#020402
- quickInput.foreground#b8ffca
- scrollbar.shadow#00000088
- scrollbarSlider.activeBackground#b8ffca45
- scrollbarSlider.background#b8ffca18
- scrollbarSlider.hoverBackground#b8ffca2e
- sideBar.background#020402
- sideBar.border#ffffff22
- sideBar.foreground#9bffb8
- sideBarSectionHeader.background#020402
- sideBarSectionHeader.border#ffffff22
- sideBarSectionHeader.foreground#b8ffca
- sideBarTitle.foreground#d8ffe2
- statusBar.background#020402
- statusBar.border#ffffff22
- statusBar.debuggingBackground#1eff5a
- statusBar.debuggingForeground#111111
- statusBar.foreground#3f8f52
- statusBar.noFolderBackground#020402
- tab.activeBackground#040805
- tab.activeBorder#040805
- tab.activeBorderTop#1eff5a
- tab.activeForeground#b8ffca
- tab.border#ffffff22
- tab.inactiveBackground#020402
- tab.inactiveForeground#3f8f52
- terminal.ansiBlack#111111
- terminal.ansiBlue#55ff7d
- terminal.ansiBrightBlack#3f8f52
- terminal.ansiBrightBlue#55ff7d
- terminal.ansiBrightCyan#55ff7d
- terminal.ansiBrightGreen#7dff95
- terminal.ansiBrightMagenta#9bffb8
- terminal.ansiBrightRed#1eff5a
- terminal.ansiBrightWhite#ffffff
- terminal.ansiBrightYellow#b8ffca
- terminal.ansiCyan#55ff7d
- terminal.ansiGreen#7dff95
- terminal.ansiMagenta#9bffb8
- terminal.ansiRed#1eff5a
- terminal.ansiWhite#d6d6d6
- terminal.ansiYellow#7dff95
- terminal.background#040805
- terminal.foreground#b8ffca
- terminal.selectionBackground#1eff5a44
- terminalCursor.foreground#1eff5a
- textBlockQuote.background#020402
- textBlockQuote.border#1eff5a
- textCodeBlock.background#020402
- textLink.activeForeground#55ff7d
- textLink.foreground#1eff5a
- titleBar.activeBackground#020402
- titleBar.activeForeground#b8ffca
- titleBar.border#ffffff22
- titleBar.inactiveBackground#020402
- titleBar.inactiveForeground#3f8f52
- tree.inactiveIndentGuidesStroke#b8ffca24
- tree.indentGuidesStroke#b8ffca52
- widget.shadow#00000088
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #3f8f52 | — |
| string, constant.other.symbol, markup.inline.raw | #7dff95 | — |
| constant.numeric, constant.language.boolean, constant.language.null | #55ff7d | — |
| constant, variable.other.constant | #b8ffca | — |
| keyword, storage.type, storage.modifier | #1eff5a | — |
| variable, meta.object-literal.key, support.variable.property, meta.property-name | #b8ffca | — |
| variable.parameter, function.parameter | #3f8f52 | — |
| entity.name.function, support.function, variable.function, meta.function-call | #9bffb8 | — |
| entity.name.type, entity.name.class, support.type, support.class, entity.other.inherited-class | #9bffb8 | — |
| entity.name.namespace, entity.name.type.namespace | #b8ffca | — |
| keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.logical, keyword.operator.assignment | #55ff7d | — |
| punctuation, meta.brace | #3f8f52 | — |
| entity.name.tag, punctuation.definition.tag | #1eff5a | — |
| entity.other.attribute-name | #55ff7d | — |
| string.regexp, constant.regexp | #55ff7d | — |
| markup.heading, entity.name.section | #1eff5a | bold |
| markup.bold, punctuation.definition.bold | #b8ffca | bold |
| markup.italic, punctuation.definition.italic | #1eff5a | italic |
| markup.underline.link, string.other.link | #1eff5a | underline |
| markup.inserted | #7dff95 | — |
| markup.deleted | #1eff5a | — |
| markup.changed | #b8ffca | — |
| invalid | #ffffff | — |