@twinkleplop/theme-ayu

Ayu Light and Ayu Dark for twinkleplop. Colours come from the upstream ayu palette, and the token mapping follows the ayu VS Code themes.

pnpm add @twinkleplop/theme-ayu

Import the combined stylesheet to get light colours by default and dark colours under a .dark ancestor:

import "@twinkleplop/theme-ayu";

Import one variant on its own when the mode is fixed:

import "@twinkleplop/theme-ayu/light";
import "@twinkleplop/theme-ayu/dark";

The palettes and font styles are also available as data, keyed by token type:

import { light, dark, light_styles, dark_styles } from "@twinkleplop/theme-ayu/tokens";

Each stylesheet sets --twp-background to the theme's editor background but does not apply it. Use background: var(--twp-background) on your code container to opt in.

Ayu's italic comments and bold markdown headings come from variables too, so you can turn one off with plain CSS:

.twinkleplop {
  --twp-comment-font-style: normal;
}

VS Code dims separators (;, ,) and HTML tag brackets with transparency. twinkleplop has a single punctuation type, so all punctuation uses the plain foreground colour.