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#268bd2
- activityBar.background#073642
- activityBar.foreground#839496
- activityBar.inactiveForeground#586e75
- activityBarBadge.background#268bd2
- activityBarBadge.foreground#fdf6e3
- badge.background#268bd2
- badge.foreground#fdf6e3
- button.background#268bd2
- button.foreground#fdf6e3
- button.hoverBackground#1a6fa8
- diffEditor.insertedTextBackground#85990020
- diffEditor.removedTextBackground#dc322f20
- editor.background#002b36
- editor.findMatchBackground#b5890060
- editor.findMatchHighlightBackground#b5890030
- editor.foreground#839496
- editor.inactiveSelectionBackground#27464280
- editor.lineHighlightBackground#073642
- editor.selectionBackground#274642
- editorBracketMatch.background#268bd230
- editorBracketMatch.border#268bd2
- editorCursor.foreground#839496
- editorGroupHeader.tabsBackground#073642
- editorGutter.addedBackground#859900
- editorGutter.deletedBackground#dc322f
- editorGutter.modifiedBackground#b58900
- editorIndentGuide.activeBackground1#586e75
- editorIndentGuide.background1#073642
- editorLineNumber.activeForeground#839496
- editorLineNumber.foreground#586e75
- focusBorder#268bd2
- input.background#073642
- input.border#094554
- input.foreground#839496
- inputOption.activeBorder#268bd2
- list.activeSelectionBackground#268bd220
- list.activeSelectionForeground#839496
- list.focusBackground#268bd230
- list.highlightForeground#268bd2
- list.hoverBackground#268bd210
- panel.background#073642
- panel.border#002b36
- panelTitle.activeForeground#268bd2
- panelTitle.inactiveForeground#586e75
- scrollbarSlider.activeBackground#83949660
- scrollbarSlider.background#83949620
- scrollbarSlider.hoverBackground#83949640
- sideBar.background#073642
- sideBar.foreground#839496
- sideBarSectionHeader.background#002b36
- sideBarSectionHeader.foreground#839496
- sideBarTitle.foreground#839496
- statusBar.background#073642
- statusBar.foreground#839496
- statusBar.noFolderBackground#002b36
- statusBarItem.hoverBackground#0f4d5e
- tab.activeBackground#002b36
- tab.activeBorder#268bd2
- tab.activeForeground#839496
- tab.border#002b36
- tab.inactiveBackground#073642
- tab.inactiveForeground#586e75
- terminal.ansiBlue#268bd2
- terminal.ansiBrightBlack#002b36
- terminal.ansiBrightBlue#839496
- terminal.ansiBrightCyan#93a1a1
- terminal.ansiBrightGreen#859900
- terminal.ansiBrightMagenta#6c71c4
- terminal.ansiBrightRed#cb4b16
- terminal.ansiBrightWhite#fdf6e3
- terminal.ansiBrightYellow#657b83
- terminal.ansiCyan#2aa198
- terminal.ansiGreen#859900
- terminal.ansiMagenta#d33682
- terminal.ansiRed#dc322f
- terminal.ansiWhite#eee8d5
- terminal.ansiYellow#b58900
- terminal.background#002b36
- terminal.foreground#839496
- titleBar.activeBackground#073642
- titleBar.activeForeground#839496
- titleBar.inactiveBackground#073642
- titleBar.inactiveForeground#586e75
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #586e75 | italic |
| string | #2aa198 | — |
| constant.numeric, constant.language | #d33682 | — |
| keyword, storage.type, storage.modifier | #859900 | — |
| entity.name.function, support.function | #268bd2 | — |
| entity.name.type, entity.name.class, support.class | #b58900 | — |
| variable | #268bd2 | — |
| variable.parameter | #cb4b16 | — |
| entity.name.tag | #268bd2 | — |
| entity.other.attribute-name | #b58900 | — |
| markup.heading | #268bd2 | bold |
| markup.bold | — | bold |
| markup.italic | — | italic |
| markup.inline.raw | #2aa198 | — |
| invalid | #dc322f | — |