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#1e66f5
• activityBar.background#e6e9f0
• activityBar.foreground#4c4f69
• activityBar.inactiveForeground#6a737d
• activityBarBadge.background#1e66f5
• activityBarBadge.foreground#eff1f5
• badge.background#1e66f5
• badge.foreground#eff1f5
• button.background#1e66f5
• button.foreground#eff1f5
• button.hoverBackground#1254d4
• editor.background#eff1f5
• editor.findMatchBackground#df8e1d60
• editor.findMatchHighlightBackground#df8e1d30
• editor.foreground#4c4f69
• editor.inactiveSelectionBackground#acb0be20
• editor.lineHighlightBackground#e6e9f0
• editor.selectionBackground#acb0be40
• editorBracketMatch.background#1e66f520
• editorBracketMatch.border#1e66f5
• editorCursor.foreground#1e66f5
• editorGroupHeader.tabsBackground#e6e9f0
• editorGutter.addedBackground#40a02b
• editorGutter.deletedBackground#d20f39
• editorGutter.modifiedBackground#df8e1d
• editorIndentGuide.activeBackground1#9ca0b0
• editorIndentGuide.background1#ccd0da
• editorLineNumber.activeForeground#4c4f69
• editorLineNumber.foreground#8c8fa1
• focusBorder#1e66f5
• input.background#eff1f5
• input.border#ccd0da
• input.foreground#4c4f69
• list.activeSelectionBackground#1e66f515
• list.activeSelectionForeground#4c4f69
• list.highlightForeground#1e66f5
• list.hoverBackground#1e66f508
• panel.background#e6e9f0
• panel.border#ccd0da
• panelTitle.activeForeground#1e66f5
• panelTitle.inactiveForeground#8c8fa1
• scrollbarSlider.activeBackground#4c4f6960
• scrollbarSlider.background#4c4f6920
• scrollbarSlider.hoverBackground#4c4f6940
• sideBar.background#e6e9f0
• sideBar.foreground#4c4f69
• sideBarSectionHeader.background#dce0e8
• sideBarSectionHeader.foreground#4c4f69
• statusBar.background#1e66f5
• statusBar.foreground#eff1f5
• tab.activeBackground#eff1f5
• tab.activeBorder#1e66f5
• tab.activeForeground#4c4f69
• tab.border#ccd0da
• tab.inactiveBackground#e6e9f0
• tab.inactiveForeground#8c8fa1
• terminal.ansiBlue#1e66f5
• terminal.ansiCyan#179299
• terminal.ansiGreen#40a02b
• terminal.ansiMagenta#ea76cb
• terminal.ansiRed#d20f39
• terminal.ansiYellow#df8e1d
• terminal.background#eff1f5
• terminal.foreground#4c4f69
• titleBar.activeBackground#e6e9f0
• titleBar.activeForeground#4c4f69
• titleBar.inactiveBackground#dce0e8
• titleBar.inactiveForeground#6a737d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).