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#ff9940
• activityBar.background#f3f4f5
• activityBar.foreground#5c6166
• activityBar.inactiveForeground#7a8394
• activityBarBadge.background#ff9940
• activityBarBadge.foreground#fafafa
• badge.background#ff9940
• badge.foreground#fafafa
• button.background#ff9940
• button.foreground#fafafa
• button.hoverBackground#e0852e
• editor.background#fafafa
• editor.findMatchBackground#f2ae4960
• editor.findMatchHighlightBackground#f2ae4930
• editor.foreground#5c6166
• editor.inactiveSelectionBackground#e7e8e940
• editor.lineHighlightBackground#f3f4f5
• editor.selectionBackground#e7e8e980
• editorBracketMatch.background#f2ae4930
• editorBracketMatch.border#f2ae49
• editorCursor.foreground#ff9940
• editorGroupHeader.tabsBackground#f3f4f5
• editorGutter.addedBackground#4cbf99
• editorGutter.deletedBackground#f07171
• editorGutter.modifiedBackground#f2ae49
• editorIndentGuide.activeBackground1#ced3d9
• editorIndentGuide.background1#eaebec
• editorLineNumber.activeForeground#5c6166
• editorLineNumber.foreground#ced3d9
• focusBorder#ff9940
• input.background#fafafa
• input.border#d9dde3
• input.foreground#5c6166
• list.activeSelectionBackground#ff994020
• list.activeSelectionForeground#5c6166
• list.highlightForeground#ff9940
• list.hoverBackground#ff994010
• panel.background#f3f4f5
• panel.border#eaebec
• panelTitle.activeForeground#ff9940
• panelTitle.inactiveForeground#7a8394
• scrollbarSlider.activeBackground#5c616660
• scrollbarSlider.background#5c616620
• scrollbarSlider.hoverBackground#5c616640
• sideBar.background#f3f4f5
• sideBar.foreground#5c6166
• sideBarSectionHeader.background#eaebec
• sideBarSectionHeader.foreground#5c6166
• statusBar.background#ff9940
• statusBar.foreground#fafafa
• tab.activeBackground#fafafa
• tab.activeBorder#ff9940
• tab.activeForeground#5c6166
• tab.border#eaebec
• tab.inactiveBackground#f3f4f5
• tab.inactiveForeground#7a8394
• terminal.ansiBlue#399ee6
• terminal.ansiBrightBlack#ced3d9
• terminal.ansiBrightWhite#fafafa
• terminal.ansiCyan#4cbf99
• terminal.ansiGreen#4cbf99
• terminal.ansiMagenta#a37acc
• terminal.ansiRed#f07171
• terminal.ansiWhite#5c6166
• terminal.ansiYellow#f2ae49
• terminal.background#fafafa
• terminal.foreground#5c6166
• titleBar.activeBackground#f3f4f5
• titleBar.activeForeground#5c6166
• titleBar.inactiveBackground#eaebec
• titleBar.inactiveForeground#7a8394

tokenColors

TextMate scopes and font styles (syntax highlighting rules).