Note: Using TailwindCSS in your project? Check out @catppuccin/tailwindcss.

Usage

1. Copy the theme files from this repository:

# There are .hex, .rgb, and .hsl options. When in doubt, .hex is simplest but less flexible in some cases
wget -P ./ https://git.basking.monster/gaiety/catppuccin-css/raw/branch/main/themes/Catppuccin-Frappé.hex.css
wget -P ./ https://git.basking.monster/gaiety/catppuccin-css/raw/branch/main/themes/Catppuccin-Latte.hex.css
wget -P ./ https://git.basking.monster/gaiety/catppuccin-css/raw/branch/main/themes/Catppuccin-Macchiato.hex.css
wget -P ./ https://git.basking.monster/gaiety/catppuccin-css/raw/branch/main/themes/Catppuccin-Mocha.hex.css

...or install with NPM and import from the module

2. Import it in your CSS

/* if installing from NPM, url may look something like "./node_modules/@catppuccin/css/themes/Catppuccin-Frappé.hex.css" */
@import url("./Catppuccin-Frappé.hex.css");
@import url("./Catppuccin-Mocha.hex.css") (prefers-color-scheme: dark);

3. Use it in your styles!

body {
  /* If using RGB or HSL options, wrap var in the appropriate CSS wrapper, ex: rgba(var(--overlay-2, 0.5)) */
  color: var(--text);
  background-color: var(--mantle);
}

Contributing

See CONTRIBUTING.md and thanks for the interest!

Bonus: Customizing an optional CSS variable prefix is available.

 

Copyright © 2021-present Catppuccin Org