Ayu Mirage

Ayu Mirage — the mid-contrast dusk variant of Ayu by Ike Ku. A muted blue-slate canvas (#242936) that sits between Ayu Dark and Ayu Light in luminance. Uses warmer pastel accents than Ayu Dark — buttery yellow (#FFCC66) primary with mint, lavender, salmon, and orange spectrum. Dark mode is sourced directly from the ayu-mirage VS Code theme JSON. Light mode is brand-atoms' authored inversion (Ayu ships ayu-light as a peer variant; consumers wanting a true Ayu light experience should pick that atom).

24 swatches 14 light roles 14 dark roles ayueditordark-firstdusk

Swatches

editor-bg
#242936
Editor canvas — muted blue-slate page background.
surface-bg
#1F2430
Sidebar, activity bar, status bar, panel background.
widget-bg
#282E3B
Editor widget / dropdown background.
fg-primary
#CCCAC2
Default editor foreground / primary text.
fg-secondary
#707A8C
Line numbers / secondary text.
fg-muted
#6E7C8F
Muted gray — comments, disabled.
accent-yellow
#FFCC66
Primary accent — buttons, focus border, badges.
syntax-keyword
#FFA659
Keywords — warm orange.
syntax-special
#F29E74
Special values (this, self, super).
syntax-func
#FFCD66
Function names and calls.
syntax-string
#D5FF80
String literals.
syntax-regexp
#95E6CB
Regular expressions.
syntax-entity
#73D0FF
Class names, types, modules.
syntax-tag
#5CCFE6
HTML/XML tags, CSS selectors.
syntax-constant
#DFBFFF
Constants and numbers.
syntax-markup
#F28779
Markup elements (bold, italic, headings).
syntax-error
#FF6666
Error foreground / editorError.foreground.
vcs-added
#87D96C
Added lines in diff.
vcs-modified
#80BFFF
Modified resource indicator.
vcs-removed
#F27983
Deleted resource indicator / removed lines.
light-canvas
#FCFCFC
Authored light background — drawn from Ayu Light's editor.background.
light-surface
#F8F9FA
Authored light surface — drawn from Ayu Light's sideBar.background.
light-elevated
#FAFAFA
Authored light elevated — drawn from Ayu Light's editorWidget.background.
light-fg
#5C6166
Authored light foreground — Ayu Light's editor.foreground.

Mode role mappings

Light mode (14 roles)

accent → syntax-entity
accent-hover → syntax-tag
background → light-canvas
error → syntax-error
primary → accent-yellow
primary-hover → syntax-keyword
success → vcs-added
surface → light-surface
surface-elevated → light-elevated
text-primary → light-fg
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 → editor-bg
error → syntax-error
primary → accent-yellow
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

Provenance

Source
https://github.com/ayu-theme/vscode-ayu/blob/master/ayu-mirage.json
License
MIT
Attribution
Ayu Theme by Ike Ku (dempfi) — github.com/ayu-theme
Imported
2026-05-18
Notes
Dark-mode hex values lifted directly from the published ayu-mirage.json color tokens (workbench colors + tokenColors). Light mode is brand-atoms' authored inversion — the Ayu project also ships ayu-light as a peer atom; the inversion here exists only to satisfy the dual-mode contract and preserves the accent hues unchanged on a near-white canvas drawn from the upstream Ayu Light background.