themes

Syntax Highlighting themes have historically be pretty difficult to work with. Twinkleplop doesn't have a concrete solution to this problem but it does provide several different ways to work with themes.

# install a theme § 01

Regardless of how you want to work with themes, the first step is to install one.

Choose your favourite from the theme reference, and install it using your package manager.

pnpm add @twinkleplop/theme-github

# direct import § 02

If you are using a bundler that can handle CSS imports, like Vite or Webpack, you can import the package directly into your app.

The main export is a stylesheet with both dark and light styles. As long as there is a .dark class on a parent above the code snippet, you will get dark and light mode for free.

import "@twinkleplop/theme-github";

# copy the css § 03

If you are not using a bundler or wish to modify the CSS in some way, it might be easier to just copy (vendor) the CSS directly into your project.

Twinkleplop provides a CLI to do this. twp will not download files over the internet, both for your security and my sanity, it will simple copy from an already installed pacakge.

twp theme github out "./src/my_css.css"

Or just run twp without any arguments and answer the interactive prompts. It will ask you what theme to copy and where to copy it to.

twp

# token colors § 04

In some instances you may want to build the css yourself, or work directly with the tokens and colors.

To support this usecase and provide maxium flexibility, every theme exports the tokens directly from a /tokens subpath.

This special export has two named exports, light and dark, which are object maps of token names to color values.

import { light, dark } from "@twinkleplop/theme-github/tokens";

They look a bit like this:

const light = {
  background_color: "#ffffff",
  boolean: "#0550ae",
  comment: "#6e7781",
  identifier: "#1f2328",
  keyword: "#cf222e",
  number: "#0550ae",
  operator: "#cf222e",
  punctuation: "#1f2328",
  regex: "#0a3069",
  string: "#0a3069",
  template: "#0a3069",
  ...
}

All token names in these two structures correspond to the token names that the highlighter spits out. Every theme should have a definition for every token, even if they resolve to the same color.

For a full list of token names, see the themes reference.