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#f9826c
- activityBar.background#f6f8fa
- activityBar.foreground#24292e
- activityBar.inactiveForeground#6a737d
- activityBarBadge.background#0366d6
- activityBarBadge.foreground#ffffff
- badge.background#0366d6
- badge.foreground#ffffff
- button.background#28a745
- button.foreground#ffffff
- button.hoverBackground#22963f
- diffEditor.insertedTextBackground#28a74520
- diffEditor.removedTextBackground#d73a4920
- editor.background#ffffff
- editor.findMatchBackground#ffd33d60
- editor.findMatchHighlightBackground#ffd33d30
- editor.foreground#24292e
- editor.inactiveSelectionBackground#0366d615
- editor.lineHighlightBackground#f6f8fa
- editor.selectionBackground#0366d625
- editorBracketMatch.background#0366d620
- editorBracketMatch.border#0366d6
- editorCursor.foreground#0366d6
- editorGroupHeader.tabsBackground#f6f8fa
- editorGutter.addedBackground#28a745
- editorGutter.deletedBackground#d73a49
- editorGutter.modifiedBackground#f9826c
- editorIndentGuide.activeBackground1#d1d5da
- editorIndentGuide.background1#eff2f5
- editorLineNumber.activeForeground#24292e
- editorLineNumber.foreground#1b1f234d
- focusBorder#0366d6
- input.background#ffffff
- input.border#e1e4e8
- input.foreground#24292e
- inputOption.activeBorder#0366d6
- list.activeSelectionBackground#0366d615
- list.activeSelectionForeground#24292e
- list.focusBackground#0366d620
- list.highlightForeground#0366d6
- list.hoverBackground#0366d608
- panel.background#f6f8fa
- panel.border#e1e4e8
- panelTitle.activeForeground#24292e
- panelTitle.inactiveForeground#6a737d
- scrollbarSlider.activeBackground#24292e60
- scrollbarSlider.background#24292e20
- scrollbarSlider.hoverBackground#24292e40
- sideBar.background#f6f8fa
- sideBar.foreground#24292e
- sideBarSectionHeader.background#eaecef
- sideBarSectionHeader.foreground#24292e
- sideBarTitle.foreground#24292e
- statusBar.background#24292e
- statusBar.foreground#ffffff
- statusBar.noFolderBackground#24292e
- statusBarItem.hoverBackground#40464e
- tab.activeBackground#ffffff
- tab.activeBorder#f9826c
- tab.activeForeground#24292e
- tab.border#e1e4e8
- tab.inactiveBackground#f6f8fa
- tab.inactiveForeground#6a737d
- terminal.ansiBlue#0366d6
- terminal.ansiBrightBlack#959da5
- terminal.ansiBrightBlue#2188ff
- terminal.ansiBrightCyan#39c5cf
- terminal.ansiBrightGreen#34d058
- terminal.ansiBrightMagenta#8a63d2
- terminal.ansiBrightRed#cb2431
- terminal.ansiBrightWhite#ffffff
- terminal.ansiBrightYellow#f9c513
- terminal.ansiCyan#0598bc
- terminal.ansiGreen#28a745
- terminal.ansiMagenta#5a32a3
- terminal.ansiRed#d73a49
- terminal.ansiWhite#6a737d
- terminal.ansiYellow#dbab09
- terminal.background#ffffff
- terminal.foreground#24292e
- titleBar.activeBackground#24292e
- titleBar.activeForeground#ffffff
- titleBar.inactiveBackground#1b1f23
- titleBar.inactiveForeground#959da5
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #6a737d | italic |
| string | #032f62 | — |
| constant.numeric, constant.language | #005cc5 | — |
| keyword, storage.type, storage.modifier | #d73a49 | — |
| entity.name.function, support.function | #6f42c1 | — |
| entity.name.type, entity.name.class, support.class | #e36209 | — |
| variable | #e36209 | — |
| variable.parameter | #24292e | — |
| entity.name.tag | #22863a | — |
| entity.other.attribute-name | #6f42c1 | — |
| markup.heading | #005cc5 | bold |
| markup.bold | — | bold |
| markup.italic | — | italic |
| markup.inline.raw | #032f62 | — |
| invalid | #d73a49 | — |