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#f78166
- activityBar.background#010409
- activityBar.foreground#c9d1d9
- activityBar.inactiveForeground#8b949e
- activityBarBadge.background#58a6ff
- activityBarBadge.foreground#0d1117
- badge.background#58a6ff
- badge.foreground#0d1117
- button.background#238636
- button.foreground#ffffff
- button.hoverBackground#2ea043
- diffEditor.insertedTextBackground#3fb95020
- diffEditor.removedTextBackground#f8514920
- editor.background#0d1117
- editor.findMatchBackground#ffa65760
- editor.findMatchHighlightBackground#ffa65730
- editor.foreground#c9d1d9
- editor.inactiveSelectionBackground#388bfd15
- editor.lineHighlightBackground#161b22
- editor.selectionBackground#388bfd25
- editorBracketMatch.background#388bfd30
- editorBracketMatch.border#388bfd
- editorCursor.foreground#58a6ff
- editorGroupHeader.tabsBackground#010409
- editorGutter.addedBackground#3fb950
- editorGutter.deletedBackground#f85149
- editorGutter.modifiedBackground#d29922
- editorIndentGuide.activeBackground1#30363d
- editorIndentGuide.background1#21262d
- editorLineNumber.activeForeground#c9d1d9
- editorLineNumber.foreground#8b949e
- focusBorder#58a6ff
- input.background#0d1117
- input.border#30363d
- input.foreground#c9d1d9
- inputOption.activeBorder#58a6ff
- list.activeSelectionBackground#21262d
- list.activeSelectionForeground#c9d1d9
- list.focusBackground#21262d
- list.highlightForeground#58a6ff
- list.hoverBackground#21262d80
- panel.background#010409
- panel.border#21262d
- panelTitle.activeForeground#58a6ff
- panelTitle.inactiveForeground#8b949e
- scrollbarSlider.activeBackground#c9d1d960
- scrollbarSlider.background#c9d1d920
- scrollbarSlider.hoverBackground#c9d1d940
- sideBar.background#010409
- sideBar.foreground#c9d1d9
- sideBarSectionHeader.background#161b22
- sideBarSectionHeader.foreground#c9d1d9
- sideBarTitle.foreground#c9d1d9
- statusBar.background#161b22
- statusBar.foreground#8b949e
- statusBar.noFolderBackground#010409
- statusBarItem.hoverBackground#21262d
- tab.activeBackground#0d1117
- tab.activeBorder#f78166
- tab.activeForeground#c9d1d9
- tab.border#21262d
- tab.inactiveBackground#010409
- tab.inactiveForeground#8b949e
- terminal.ansiBlue#58a6ff
- terminal.ansiBrightBlack#6e7681
- terminal.ansiBrightBlue#79c0ff
- terminal.ansiBrightCyan#56d4dd
- terminal.ansiBrightGreen#56d364
- terminal.ansiBrightMagenta#d2a8ff
- terminal.ansiBrightRed#ffa198
- terminal.ansiBrightWhite#cdd9e5
- terminal.ansiBrightYellow#e3b341
- terminal.ansiCyan#39c5cf
- terminal.ansiGreen#3fb950
- terminal.ansiMagenta#bc8cff
- terminal.ansiRed#f85149
- terminal.ansiWhite#b1bac4
- terminal.ansiYellow#d29922
- terminal.background#0d1117
- terminal.foreground#c9d1d9
- titleBar.activeBackground#161b22
- titleBar.activeForeground#c9d1d9
- titleBar.inactiveBackground#010409
- titleBar.inactiveForeground#8b949e
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #8b949e | italic |
| string | #a5d6ff | — |
| constant.numeric, constant.language | #79c0ff | — |
| keyword, storage.type, storage.modifier | #ff7b72 | — |
| entity.name.function, support.function | #d2a8ff | — |
| entity.name.type, entity.name.class, support.class | #ffa657 | — |
| variable | #ffa657 | — |
| variable.parameter | #c9d1d9 | — |
| entity.name.tag | #7ee787 | — |
| entity.other.attribute-name | #d2a8ff | — |
| markup.heading | #79c0ff | bold |
| markup.bold | — | bold |
| markup.italic | — | italic |
| markup.inline.raw | #a5d6ff | — |
| invalid | #f85149 | — |