@twinkleplop/theme-night-owl

Night Owl and its light counterpart, Light Owl, for twinkleplop. Colours and token mapping come from the Night Owl VS Code themes (the italic versions).

pnpm add @twinkleplop/theme-night-owl

Import the combined stylesheet to get Light Owl by default and Night Owl under a .dark ancestor:

import "@twinkleplop/theme-night-owl";

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

import "@twinkleplop/theme-night-owl/light";
import "@twinkleplop/theme-night-owl/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-night-owl/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.

Night Owl's italics, bold and underlines come from variables too, so you can turn one off with plain CSS:

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

twinkleplop has one type per token, so a few distinctions VS Code makes are merged. Light Owl gives // comments a slightly different grey from other comments, and every comment here uses the main comment grey. Every keyword is italic, including declaration keywords such as const and function that Night Owl draws upright.