Ayu Dark

Ayu Dark — the high-contrast deep-blue-black variant of Ayu by Ike Ku. A near-black canvas (#10141C) with the signature warm-yellow accent (#E6B450) and a vivid spectrum of syntax accents (lime, mint, lavender, red, cyan, orange). The darkest Ayu variant; Mirage sits between Dark and Light. Dark mode is sourced directly from the ayu-dark VS Code theme JSON. Light mode is brand-atoms' authored inversion (Ayu ships ayu-light as a peer variant, so consumers wanting a true Ayu light experience should pick that atom).

24 swatches 14 light roles 14 dark roles ayueditordark-firstvivid

Swatches

editor-bg
#10141C
Editor canvas — deep blue-black page background.
surface-bg
#0D1017
Sidebar, activity bar, status bar, panel background.
widget-bg
#141821
Editor widget / dropdown background.
fg-primary
#BFBDB6
Default editor foreground / primary text.
fg-secondary
#5A6378
Line numbers / secondary text.
fg-muted
#5A6673
Muted gray — comments, disabled.
accent-yellow
#E6B450
Primary accent — buttons, focus border, badges.
syntax-keyword
#FF8F40
Keywords — saturated orange.
syntax-special
#F29668
Special values (this, self, super).
syntax-func
#FFB454
Function names and calls.
syntax-string
#AAD94C
String literals.
syntax-regexp
#95E6CB
Regular expressions.
syntax-entity
#59C2FF
Class names, types, modules.
syntax-tag
#39BAE6
HTML/XML tags, CSS selectors.
syntax-constant
#D2A6FF
Constants and numbers.
syntax-markup
#F07178
Markup elements (bold, italic, headings).
syntax-error
#D95757
Error foreground / editorError.foreground.
vcs-added
#70BF56
Added lines in diff.
vcs-modified
#73B8FF
Modified resource indicator.
vcs-removed
#F26D78
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-dark.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-dark.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 (#FCFCFC / #F8F9FA).