Codex Theme Collection
Publisher: XuanThemes in package: 20
All official Codex UI themes for VS Code — Everforest, One Dark, Dracula, Solarized, Monokai, GitHub, Nord, Catppuccin, Gruvbox, Tokyo Night, Rose Pine, Ayu, and more.
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#ff79c6
- activityBar.background#21222c
- activityBar.foreground#f8f8f2
- activityBar.inactiveForeground#8891b8
- activityBarBadge.background#ff79c6
- activityBarBadge.foreground#282a36
- badge.background#ff79c6
- badge.foreground#282a36
- button.background#ff79c6
- button.foreground#282a36
- button.hoverBackground#e05aaa
- diffEditor.insertedTextBackground#50fa7b20
- diffEditor.removedTextBackground#ff555520
- editor.background#282a36
- editor.findMatchBackground#ffb86c60
- editor.findMatchHighlightBackground#ffb86c30
- editor.foreground#f8f8f2
- editor.inactiveSelectionBackground#44475a80
- editor.lineHighlightBackground#44475a
- editor.selectionBackground#44475a
- editorBracketMatch.background#ff79c630
- editorBracketMatch.border#ff79c6
- editorCursor.foreground#f8f8f0
- editorGroupHeader.tabsBackground#21222c
- editorGutter.addedBackground#50fa7b
- editorGutter.deletedBackground#ff5555
- editorGutter.modifiedBackground#ffb86c
- editorIndentGuide.activeBackground1#6272a4
- editorIndentGuide.background1#44475a
- editorLineNumber.activeForeground#f8f8f2
- editorLineNumber.foreground#6272a4
- focusBorder#ff79c6
- input.background#21222c
- input.border#44475a
- input.foreground#f8f8f2
- inputOption.activeBorder#ff79c6
- list.activeSelectionBackground#44475a
- list.activeSelectionForeground#f8f8f2
- list.focusBackground#44475a
- list.highlightForeground#8be9fd
- list.hoverBackground#44475a80
- panel.background#21222c
- panel.border#44475a
- panelTitle.activeForeground#ff79c6
- panelTitle.inactiveForeground#8891b8
- scrollbarSlider.activeBackground#f8f8f260
- scrollbarSlider.background#f8f8f220
- scrollbarSlider.hoverBackground#f8f8f240
- sideBar.background#21222c
- sideBar.foreground#f8f8f2
- sideBarSectionHeader.background#282a36
- sideBarSectionHeader.foreground#f8f8f2
- sideBarTitle.foreground#f8f8f2
- statusBar.background#191a21
- statusBar.foreground#f8f8f2
- statusBar.noFolderBackground#191a21
- statusBarItem.hoverBackground#44475a
- tab.activeBackground#282a36
- tab.activeBorder#ff79c6
- tab.activeForeground#f8f8f2
- tab.border#191a21
- tab.inactiveBackground#21222c
- tab.inactiveForeground#8891b8
- terminal.ansiBlue#6272a4
- terminal.ansiBrightBlack#6272a4
- terminal.ansiBrightBlue#d6acff
- terminal.ansiBrightCyan#a4ffff
- terminal.ansiBrightGreen#50fa7b
- 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
- titleBar.activeBackground#21222c
- titleBar.activeForeground#f8f8f2
- titleBar.inactiveBackground#21222c
- titleBar.inactiveForeground#8891b8
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #6272a4 | italic |
| string | #f1fa8c | — |
| constant.numeric, constant.language | #bd93f9 | — |
| keyword, storage.type, storage.modifier | #ff79c6 | — |
| entity.name.function, support.function | #50fa7b | — |
| entity.name.type, entity.name.class, support.class | #8be9fd | — |
| variable | #f8f8f2 | — |
| variable.parameter | #ffb86c | — |
| entity.name.tag | #ff79c6 | — |
| entity.other.attribute-name | #50fa7b | — |
| markup.heading | #ff79c6 | bold |
| markup.bold | — | bold |
| markup.italic | — | italic |
| markup.inline.raw | #f1fa8c | — |
| invalid | #ff5555 | — |