Codex Theme Collection

Color themes

• 

  Codex — Ayu Dark

• 

  Codex — Ayu Light

• 

  Codex — Catppuccin Latte

• 

  Codex — Catppuccin Mocha

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#cba6f7
• activityBar.background#181825
• activityBar.foreground#cdd6f4
• activityBar.inactiveForeground#7c7f93
• activityBarBadge.background#cba6f7
• activityBarBadge.foreground#1e1e2e
• badge.background#cba6f7
• badge.foreground#1e1e2e
• button.background#cba6f7
• button.foreground#1e1e2e
• button.hoverBackground#b48fe0
• editor.background#1e1e2e
• editor.findMatchBackground#f9e2af60
• editor.findMatchHighlightBackground#f9e2af30
• editor.foreground#cdd6f4
• editor.inactiveSelectionBackground#58595020
• editor.lineHighlightBackground#313244
• editor.selectionBackground#58595040
• editorBracketMatch.background#89dceb30
• editorBracketMatch.border#89dceb
• editorCursor.foreground#f5c2e7
• editorGroupHeader.tabsBackground#181825
• editorGutter.addedBackground#a6e3a1
• editorGutter.deletedBackground#f38ba8
• editorGutter.modifiedBackground#f9e2af
• editorIndentGuide.activeBackground1#45475a
• editorIndentGuide.background1#313244
• editorLineNumber.activeForeground#cdd6f4
• editorLineNumber.foreground#45475a
• focusBorder#cba6f7
• input.background#181825
• input.border#313244
• input.foreground#cdd6f4
• list.activeSelectionBackground#313244
• list.activeSelectionForeground#cdd6f4
• list.highlightForeground#cba6f7
• list.hoverBackground#31324480
• panel.background#181825
• panel.border#313244
• panelTitle.activeForeground#cba6f7
• panelTitle.inactiveForeground#45475a
• scrollbarSlider.activeBackground#cdd6f460
• scrollbarSlider.background#cdd6f420
• scrollbarSlider.hoverBackground#cdd6f440
• sideBar.background#181825
• sideBar.foreground#cdd6f4
• sideBarSectionHeader.background#1e1e2e
• sideBarSectionHeader.foreground#cdd6f4
• statusBar.background#181825
• statusBar.foreground#cdd6f4
• tab.activeBackground#1e1e2e
• tab.activeBorder#cba6f7
• tab.activeForeground#cdd6f4
• tab.border#11111b
• tab.inactiveBackground#181825
• tab.inactiveForeground#7c7f93
• terminal.ansiBlue#89b4fa
• terminal.ansiBrightBlack#45475a
• terminal.ansiBrightBlue#89b4fa
• terminal.ansiBrightCyan#89dceb
• terminal.ansiBrightGreen#a6e3a1
• terminal.ansiBrightMagenta#cba6f7
• terminal.ansiBrightRed#f38ba8
• terminal.ansiBrightWhite#a6adc8
• terminal.ansiBrightYellow#f9e2af
• terminal.ansiCyan#89dceb
• terminal.ansiGreen#a6e3a1
• terminal.ansiMagenta#cba6f7
• terminal.ansiRed#f38ba8
• terminal.ansiWhite#bac2de
• terminal.ansiYellow#f9e2af
• terminal.background#1e1e2e
• terminal.foreground#cdd6f4
• titleBar.activeBackground#181825
• titleBar.activeForeground#cdd6f4
• titleBar.inactiveBackground#11111b
• titleBar.inactiveForeground#7c7f93

tokenColors

TextMate scopes and font styles (syntax highlighting rules).