VsCode Colors

Usage

yarn add vscode-colors

Palette Builder

The basic idea - a powerful manipulation of colors in the palette creation process

import { paletteBuilder as buildPalette } from "vscode-colors";
import { Color, Palette } from "vscode-theme-builder";

import { ShadeGen, CrazyGen, ColorfulGen } from "your-awesome-manipulators";

const buildRawUiPalette = () => {
  return buildPalette
    .addColor({ name: "black", value: "#000" }, new ShadeGen(), new CrazyGen())
    .addColor({ name: "white", value: "#fff" }, new ShadeGen())
    .useManipulators(new ColorfulGen())
    .addColor({ name: "orange", value: new Color("#fba") })
    .addColors(
      { name: "pink", value: "#f1b" },
      { name: "green", value: "#4fa" }
    )
    .build();
};

Note: The builder has two maps with colors

• for all colors
• for last unused colors

and the useManipulation (...) method, works only with the last unused colors, after performing the colors are moved to the all color map

But this solution has downsides. If you need IntelliSense, then you need to write a wrapper around the palette

class UiPaletteWrapper {
  public black = this.palette.colors.get("black");
  public green = this.palette.colors.get("green");
  public orange = this.palette.colors.get("orange");
  public pink = this.palette.colors.get("pink");
  public white = this.palette.colors.get("white");

  constructor(public palette: Palette = buildRawUiPalette()) {}
}