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#eee8d5
- activityBar.foreground#657b83
- 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#fdf6e3
- editor.findMatchBackground#b5890060
- editor.findMatchHighlightBackground#b5890030
- editor.foreground#657b83
- editor.inactiveSelectionBackground#93a1a140
- editor.lineHighlightBackground#eee8d5
- editor.selectionBackground#93a1a180
- editorBracketMatch.background#268bd230
- editorBracketMatch.border#268bd2
- editorCursor.foreground#268bd2
- editorGroupHeader.tabsBackground#eee8d5
- editorGutter.addedBackground#859900
- editorGutter.deletedBackground#dc322f
- editorGutter.modifiedBackground#b58900
- editorIndentGuide.activeBackground1#93a1a1
- editorIndentGuide.background1#eee8d5
- editorLineNumber.activeForeground#657b83
- editorLineNumber.foreground#93a1a1
- focusBorder#268bd2
- input.background#fdf6e3
- input.border#d4cdb4
- input.foreground#657b83
- inputOption.activeBorder#268bd2
- list.activeSelectionBackground#268bd220
- list.activeSelectionForeground#657b83
- list.focusBackground#268bd230
- list.highlightForeground#268bd2
- list.hoverBackground#268bd210
- panel.background#f5efdc
- panel.border#e4ddc8
- panelTitle.activeForeground#268bd2
- panelTitle.inactiveForeground#586e75
- scrollbarSlider.activeBackground#657b8360
- scrollbarSlider.background#657b8320
- scrollbarSlider.hoverBackground#657b8340
- sideBar.background#f5efdc
- sideBar.foreground#657b83
- sideBarSectionHeader.background#eee8d5
- sideBarSectionHeader.foreground#657b83
- sideBarTitle.foreground#657b83
- statusBar.background#268bd2
- statusBar.foreground#fdf6e3
- statusBar.noFolderBackground#657b83
- statusBarItem.hoverBackground#1a6fa8
- tab.activeBackground#fdf6e3
- tab.activeBorder#268bd2
- tab.activeForeground#657b83
- tab.border#e4ddc8
- tab.inactiveBackground#eee8d5
- 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#fdf6e3
- terminal.foreground#657b83
- titleBar.activeBackground#eee8d5
- titleBar.activeForeground#657b83
- titleBar.inactiveBackground#f5efdc
- titleBar.inactiveForeground#586e75
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #93a1a1 | 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 | — |