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#FF79C680
- activityBar.background#343746
- activityBar.border#BD93F9
- activityBar.foreground#F8F8F2
- activityBar.inactiveForeground#6272A4
- activityBarBadge.background#FF79C6
- activityBarBadge.foreground#F8F8F2
- badge.background#737583
- badge.foreground#ffffff
- breadcrumb.activeSelectionForeground#F8F8F2
- breadcrumb.background#282A36
- breadcrumb.focusForeground#F8F8F2
- breadcrumb.foreground#6272A4
- button.background#44475A
- button.foreground#F8F8F2
- button.hoverBackground#D6ACFF
- button.secondaryBackground#21222C
- button.secondaryForeground#F8F8F2
- button.secondaryHoverBackground#44475A75
- checkbox.background#21222C
- checkbox.border#BD93F9
- commandCenter.background#21222C
- commandCenter.border#BD93F9
- commandCenter.foreground#6272A4
- debugIcon.continueForeground#50FA7B
- debugIcon.disconnectForeground#FF5555
- debugIcon.pauseForeground#BD93F9
- debugIcon.restartForeground#50FA7B
- debugIcon.startForeground#50FA7B
- debugIcon.stepIntoForeground#BD93F9
- debugIcon.stepOutForeground#BD93F9
- debugIcon.stepOverForeground#BD93F9
- debugIcon.stopForeground#FF5555
- debugToolBar.background#21222C
- descriptionForeground#6272A4
- diffEditor.diagonalFill#6272A426
- diffEditor.insertedLineBackground#50FA7B18
- diffEditor.insertedTextBackground#50FA7B30
- diffEditor.removedLineBackground#FF555518
- diffEditor.removedTextBackground#FF555530
- disabledForeground#F8F8F266
- dropdown.background#21222C
- dropdown.border#BD93F9
- dropdown.foreground#F8F8F2
- editor.background#282A36
- editor.findMatchBackground#F8F8F266
- editor.findMatchHighlightBackground#F8F8F235
- editor.findRangeHighlightBackground#73758318
- editor.foreground#F8F8F2
- editor.hoverHighlightBackground#73758318
- editor.inactiveSelectionBackground#73758333
- editor.lineHighlightBackground#21222C
- editor.selectionBackground#44475A
- editor.selectionHighlightBackground#73758333
- editor.wordHighlightBackground#BD93F925
- editor.wordHighlightStrongBackground#FF79C630
- editorBracketHighlight.foreground1#FF5555
- editorBracketHighlight.foreground2#F8F8F2
- editorBracketHighlight.foreground3#50FA7B
- editorBracketHighlight.foreground4#BD93F9
- editorBracketHighlight.foreground5#FF79C6
- editorBracketHighlight.foreground6#D6ACFF
- editorBracketMatch.background#73758322
- editorBracketMatch.border#737583
- editorBracketPairGuide.activeBackground1#737583a6
- editorBracketPairGuide.activeBackground2#737583a6
- editorBracketPairGuide.activeBackground3#737583a6
- editorBracketPairGuide.activeBackground4#737583a6
- editorBracketPairGuide.activeBackground5#737583a6
- editorBracketPairGuide.activeBackground6#737583a6
- editorBracketPairGuide.background1#F8F8F224
- editorBracketPairGuide.background2#F8F8F224
- editorBracketPairGuide.background3#F8F8F224
- editorBracketPairGuide.background4#F8F8F224
- editorBracketPairGuide.background5#F8F8F224
- editorBracketPairGuide.background6#F8F8F224
- editorCursor.foreground#737583
- editorError.foreground#FF5555
- editorGroup.border#BD93F9
- editorGroupHeader.tabsBackground#191A21
- editorGroupHeader.tabsBorder#BD93F9
- editorGutter.addedBackground#50FA7B
- editorGutter.deletedBackground#FF5555
- editorGutter.modifiedBackground#BD93F9
- editorHint.foreground#50FA7B
- editorHoverWidget.background#21222C
- editorHoverWidget.border#BD93F9
- editorIndentGuide.activeBackground1#737583a6
- editorIndentGuide.background1#F8F8F224
- editorInfo.foreground#BD93F9
- editorLineNumber.activeForeground#6272A4
- editorLineNumber.foreground#6272A4
- editorSuggestWidget.background#21222C
- editorSuggestWidget.border#BD93F9
- editorSuggestWidget.selectedBackground#44475A75
- editorWarning.foreground#F1FA8C
- editorWhitespace.foreground#F8F8F224
- editorWidget.background#21222C
- editorWidget.border#BD93F9
- editorWidget.foreground#F8F8F2
- errorForeground#FF5555
- focusBorder#6272A4
- foreground#F8F8F2
- gitDecoration.addedResourceForeground#50FA7B
- gitDecoration.conflictingResourceForeground#F8F8F2
- gitDecoration.deletedResourceForeground#FF5555
- gitDecoration.ignoredResourceForeground#6272A4
- gitDecoration.modifiedResourceForeground#8BE9FD
- gitDecoration.renamedResourceForeground#FF79C6
- gitDecoration.untrackedResourceForeground#50FA7B
- icon.foreground#6272A4
- input.background#21222C
- input.border#BD93F9
- input.foreground#F8F8F2
- input.placeholderForeground#6272A4
- inputOption.activeBackground#73758355
- inputOption.activeBorder#737583
- inputValidation.errorBackground#FF555522
- inputValidation.errorBorder#FF5555
- inputValidation.infoBackground#BD93F922
- inputValidation.infoBorder#BD93F9
- inputValidation.warningBackground#F1FA8C22
- inputValidation.warningBorder#F1FA8C
- list.activeSelectionBackground#73758355
- list.activeSelectionForeground#F8F8F2
- list.errorForeground#FF5555
- list.focusBackground#73758344
- list.highlightForeground#737583
- list.hoverBackground#44475A75
- list.inactiveSelectionBackground#73758333
- list.warningForeground#F1FA8C
- menu.background#21222C
- menu.foreground#F8F8F2
- menu.selectionBackground#44475A
- menu.separatorBackground#BD93F9
- minimap.background#282A36
- minimap.findMatchHighlight#F8F8F280
- minimap.selectionHighlight#73758366
- notificationCenter.border#BD93F9
- notificationCenterHeader.background#21222C
- notifications.background#21222C
- notifications.border#BD93F9
- notifications.foreground#F8F8F2
- panel.background#282A36
- panel.border#BD93F9
- panelTitle.activeBorder#737583
- panelTitle.activeForeground#F8F8F2
- panelTitle.inactiveForeground#6272A4
- peekView.border#737583
- peekViewEditor.background#282A36
- peekViewResult.background#21222C
- peekViewResult.selectionBackground#44475A
- peekViewTitle.background#21222C
- pickerGroup.border#BD93F9
- pickerGroup.foreground#737583
- progressBar.background#737583
- quickInput.background#21222C
- quickInput.foreground#F8F8F2
- scrollbar.shadow#00000088
- scrollbarSlider.activeBackground#F8F8F245
- scrollbarSlider.background#F8F8F218
- scrollbarSlider.hoverBackground#F8F8F22e
- sideBar.background#21222C
- sideBar.border#BD93F9
- sideBar.foreground#6272A4
- sideBarSectionHeader.background#282A36
- sideBarSectionHeader.border#191A21
- sideBarSectionHeader.foreground#F8F8F2
- sideBarTitle.foreground#F8F8F2
- statusBar.background#21222C
- statusBar.border#BD93F9
- statusBar.debuggingBackground#FF5555
- statusBar.debuggingForeground#111111
- statusBar.foreground#6272A4
- statusBar.noFolderBackground#21222C
- tab.activeBackground#282A36
- tab.activeBorder#282A36
- tab.activeBorderTop#737583
- tab.activeForeground#F8F8F2
- tab.border#BD93F9
- tab.inactiveBackground#21222C
- tab.inactiveForeground#6272A4
- terminal.ansiBlack#21222C
- terminal.ansiBlue#BD93F9
- terminal.ansiBrightBlack#6272A4
- terminal.ansiBrightBlue#D6ACFF
- terminal.ansiBrightCyan#A4FFFF
- terminal.ansiBrightGreen#69FF94
- terminal.ansiBrightMagenta#FF92DF
- terminal.ansiBrightRed#FF6E6E
- terminal.ansiBrightWhite#FFFFFF
- terminal.ansiBrightYellow#FFFFA5
- terminal.ansiCyan#8BE9FD
- terminal.ansiGreen#50FA7B
- terminal.ansiMagenta#FF79C6
- terminal.ansiRed#FF5555
- terminal.ansiWhite#F8F8F2
- terminal.ansiYellow#F1FA8C
- terminal.background#282A36
- terminal.foreground#F8F8F2
- terminal.selectionBackground#44475A
- terminalCursor.foreground#737583
- textBlockQuote.background#21222C
- textBlockQuote.border#737583
- textCodeBlock.background#21222C
- textLink.activeForeground#D6ACFF
- textLink.foreground#737583
- titleBar.activeBackground#21222C
- titleBar.activeForeground#F8F8F2
- titleBar.border#BD93F9
- titleBar.inactiveBackground#21222C
- titleBar.inactiveForeground#6272A4
- tree.inactiveIndentGuidesStroke#F8F8F224
- tree.indentGuidesStroke#F8F8F252
- widget.shadow#00000088
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #6272A4 | — |
| string, constant.other.symbol, markup.inline.raw | #50FA7B | — |
| constant.numeric, constant.language.boolean, constant.language.null | #BD93F9 | — |
| constant, variable.other.constant | #F8F8F2 | — |
| keyword, storage.type, storage.modifier | #FF5555 | — |
| variable, meta.object-literal.key, support.variable.property, meta.property-name | #F8F8F2 | — |
| variable.parameter, function.parameter | #6272A4 | — |
| entity.name.function, support.function, variable.function, meta.function-call | #FF79C6 | — |
| entity.name.type, entity.name.class, support.type, support.class, entity.other.inherited-class | #FF79C6 | — |
| entity.name.namespace, entity.name.type.namespace | #F8F8F2 | — |
| keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.logical, keyword.operator.assignment | #BD93F9 | — |
| punctuation, meta.brace | #6272A4 | — |
| entity.name.tag, punctuation.definition.tag | #FF5555 | — |
| entity.other.attribute-name | #BD93F9 | — |
| string.regexp, constant.regexp | #D6ACFF | — |
| markup.heading, entity.name.section | #FF5555 | bold |
| markup.bold, punctuation.definition.bold | #F8F8F2 | bold |
| markup.italic, punctuation.definition.italic | #FF5555 | italic |
| markup.underline.link, string.other.link | #737583 | underline |
| markup.inserted | #50FA7B | — |
| markup.deleted | #FF5555 | — |
| markup.changed | #F8F8F2 | — |
| invalid | #ffffff | — |