Catppuccin Palette

To access all four flavors at once, import _catppuccin.scss. This provides a $palette map containing all flavor color maps. You can iterate over this map using Sass @each loops to generate styles for every flavor.

Important: When retrieving colors from the map using map.get, you must wrap the color name in quotes (e.g., 'blue' instead of blue). This prevents Sass from confusing color names with predefined CSS web-safe colors.

If using the @catppuccin/palette npm package, use the path: @catppuccin/palette/scss/catppuccin.

@use "sass:map";
@use "catppuccin";
// or via npm:
// @use "~@catppuccin/palette/scss/catppuccin";

@each $flavor, $color in catppuccin.$palette {
    .my-#{$flavor}-class {
        // wrap color names in quotes to ensure proper generation
        background: #{map.get($color, 'base')};
        color: #{map.get($color, 'blue')};
    }
}

Import flavors, flavorEntries, and version from @catppuccin/palette.

• version: A string containing the library version.
• flavors: An object containing all Catppuccin flavors.
• flavorEntries: A typed helper for iterating through flavors. Each entry provides access to the flavor's name, theme type (dark/light), colorEntries (hex, rgb, and accent information), and ansiColorEntries (normal and bright ANSI codes).

import { flavors, flavorEntries, version } from "@catppuccin/palette";
import chalk from "chalk";

// a string containing the version of the library
console.log(version);

// an object containing all catppuccin flavors
console.log(flavors);

// typed helper when iterating flavors
flavorEntries.map(([_, flavor]) => {
  console.log(`${flavor.name} is a ${flavor.dark ? "dark" : "light"} theme.`);
  console.log(`It has ${flavor.colorEntries.length} colors:`);

  // same for the colors
  flavor.colorEntries.map(([colorName, { hex, rgb, accent }]) => {
    console.log(
      chalk.bgRgb(rgb.r, rgb.b, rgb.g)(` ${hex} `),
      colorName,
      accent
    );
  });
  console.log("\n");

  // same for the ansi colors
  flavor.ansiColorEntries.map(([colorName, ansi]) => {
    console.log(
      chalk.hex(ansi.normal.hex)(`[${ansi.normal.code}] Normal ${colorName}`)
    );
    console.log(
      chalk.hex(ansi.bright.hex)(`[${ansi.bright.code}] Bright ${colorName}`)
    );
  });
});

In Deno, you can import the library via deno.land/x/catppuccin/mod.ts or through JSR. The exported members flavors, flavorEntries, and version function similarly to the Node.js version.

import {
  flavors,
  flavorEntries,
  version,
} from "https://deno.land/x/catppuccin/mod.ts";
import { bgRgb24 } from "https://deno.land/std/fmt/colors.ts";

// a string containing the version of the library
console.log(version);

// an object containing all catppuccin flavors
console.log(flavors);

// typed helper when iterating flavors
flavorEntries.map(([_, flavor]) => {
  console.log(`${flavor.name} is a ${flavor.dark ? "dark" : "light"} theme.`);
  console.log(`It has ${flavor.colorEntries.length} colors:`);

  // same for the colors
  flavor.colorEntries.map(([colorName, { hex, rgb, accent }]) => {
    console.log(bgRgb24(`  ${hex}  `, { ...rgb }), colorName, accent);
  });
  console.log("\n");
});