Ayu Light
Ayu Light — the bright variant of the Ayu editor theme by Ike Ku. A clean near-white canvas (#FCFCFC) with warm-orange focus accent (#F29718) and a balanced spectrum of muted syntax accents (green, teal, blue, purple, red, pink, orange). One of three Ayu variants shipped in the official vscode-ayu extension. Light mode is sourced directly from the ayu-light VS Code theme JSON. Dark mode is brand-atoms' authored inversion (Ayu ships three peer variants — light, dark, mirage — each as its own theme; ayu-dark and ayu-mirage are separate atoms).
24 swatches 14 light roles 14 dark roles
Swatches
editor-bg
#FCFCFC
Editor canvas — near-white page background.
surface-bg
#F8F9FA
Sidebar, activity bar, status bar, panel background.
widget-bg
#FAFAFA
Editor widget / dropdown background.
fg-primary
#5C6166
Default editor foreground / primary text.
fg-secondary
#828E9F
UI foreground / secondary text.
fg-muted
#ADAEB1
Muted gray — comments, disabled.
accent-orange
#F29718
Primary accent — buttons, focus border, badges.
syntax-keyword
#FA8532
Keywords — slightly hotter orange than the accent.
syntax-special
#E59645
Special values (this, self, super).
syntax-func
#EBA400
Function names and calls.
syntax-string
#86B300
String literals / git-added.
syntax-regexp
#4CBF99
Regular expressions.
syntax-entity
#22A4E6
Class names, types, modules.
syntax-tag
#55B4D4
HTML/XML tags, CSS selectors.
syntax-constant
#A37ACC
Constants and numbers.
syntax-markup
#F07171
Markup elements (bold, italic, headings).
syntax-error
#E65050
Error foreground / editorError.foreground.
vcs-added
#6CBF43
Added lines in diff.
vcs-modified
#478ACC
Modified resource indicator.
vcs-removed
#FF7383
Deleted resource indicator / removed lines.
dark-canvas
#10141C
Authored dark background — drawn from Ayu Dark's editor.background.
dark-surface
#0D1017
Authored dark surface — drawn from Ayu Dark's sideBar.background.
dark-elevated
#141821
Authored dark elevated — drawn from Ayu Dark's editorWidget.background.
dark-fg
#BFBDB6
Authored dark foreground — Ayu Dark's editor.foreground.
Mode role mappings
Light mode (14 roles)
accent
→ syntax-entity accent-hover
→ syntax-tag background
→ editor-bg error
→ syntax-error primary
→ accent-orange primary-hover
→ syntax-keyword success
→ vcs-added surface
→ surface-bg surface-elevated
→ widget-bg text-primary
→ fg-primary text-secondary
→ fg-secondary text-tertiary
→ fg-muted warning
→ syntax-func warning-hover
→ syntax-special Dark mode (14 roles)
accent
→ syntax-entity accent-hover
→ syntax-tag background
→ dark-canvas error
→ syntax-error primary
→ accent-orange primary-hover
→ syntax-keyword success
→ vcs-added surface
→ dark-surface surface-elevated
→ dark-elevated text-primary
→ dark-fg text-secondary
→ fg-secondary text-tertiary
→ fg-muted warning
→ syntax-func warning-hover
→ syntax-special Provenance
- Source
- https://github.com/ayu-theme/vscode-ayu/blob/master/ayu-light.json
- License
MIT- Attribution
- Ayu Theme by Ike Ku (dempfi) — github.com/ayu-theme
- Imported
-
2026-05-18 - Notes
- Light-mode hex values lifted directly from the published ayu-light.json color tokens (workbench colors + tokenColors). Dark mode is brand-atoms' authored inversion — the Ayu project also ships ayu-dark and ayu-mirage as peer atoms, so consumers wanting a true Ayu dark experience should pick those. The inversion here exists only to satisfy the dual-mode contract and preserves the accent hues unchanged on a near-black canvas drawn from the same hue family as the upstream Ayu Dark background (#0D1017 / #10141C).