Ayu

v2.4.0

Warm, elegant theme inspired by the Ayu editor color scheme with golden accents

Package
Font
Monda
Light Dark Custom Font

Variants

Default
css/ayu.css

Mirage palette — bluish dark backgrounds with warm golden accents

Mode accent background header sidebar surface text
Dark (default)
#e6b450
#1f2430
#191e2a
#242936
#242936
#cccac2
Light
#f29718
#fcfcfc
#191e2a
#f8f8f8
#ffffff
#575f66
Dark
pa-color-dark css/ayu.css

Deep black backgrounds with warm golden accents (dark only)

Mode accent background header sidebar surface text
Dark (default)
#e6b450
#0b0e14
#0d1017
#0d1017
#131721
#bfbdb6

Ayu

A warm, elegant theme inspired by the popular Ayu color scheme for code editors. Golden accents on carefully tuned backgrounds create a distinctive, eye-friendly interface.

Highlights

  • Dark and Light modes on the Default (Mirage) variant — toggle with pa-mode-light / pa-mode-dark
  • Dark variant — deeper, less-blue blacks (dark only)
  • Golden accent (#e6b450) for a warm, inviting feel
  • Monda bundled font (self-hosted woff2)

Variants and Modes

Default (Mirage) is the standard bluish-dark Ayu palette with both dark and light modes. The Dark variant is a darker, more neutral alternative — dark only.

<body>                                <!-- Default (Mirage) Dark -->

<body class="pa-mode-light">          <!-- Default (Mirage) Light -->

<body class="pa-color-dark">          <!-- Dark variant (dark only) -->

Usage

<link rel="stylesheet" href="css/ayu.css">