catppuccin-css

💨 Soothing pastel theme for CSS

Find a file

Ava Gaiety W 44e0bb0591 add self to Thanks		2025-06-09 13:40:48 -06:00
assets	fix spaces in variables, add previews, add example	2025-06-09 13:29:04 -06:00
example	fix spaces in variables, add previews, add example	2025-06-09 13:29:04 -06:00
themes	fix spaces in variables, add previews, add example	2025-06-09 13:29:04 -06:00
.gitignore	v0.1.0 build tool and themes, not on npm yet	2025-06-09 12:35:52 -06:00
.tool-versions	v0.1.0 build tool and themes, not on npm yet	2025-06-09 12:35:52 -06:00
CONTRIBUTING.md	v0.1.0 build tool and themes, not on npm yet	2025-06-09 12:35:52 -06:00
index.js	fix spaces in variables, add previews, add example	2025-06-09 13:29:04 -06:00
LICENSE	Initial commit	2025-06-09 09:34:41 -06:00
package-lock.json	v0.1.0 build tool and themes, not on npm yet	2025-06-09 12:35:52 -06:00
package.json	fix spaces in variables, add previews, add example	2025-06-09 13:29:04 -06:00
README.md	add self to Thanks	2025-06-09 13:40:48 -06:00

README.md

Preview

🌻 Latte

🪴 Frappé

🌺 Macchiato

🌿 Mocha

Usage

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

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-Latte.hex.css
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-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

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-Latte.hex.css");
@import url("./Catppuccin-Frappé") (prefers-color-scheme: dark) and (prefers-contrast: less);
@import url("./Catppuccin-Macchiato") (prefers-color-scheme: dark);
@import url("./Catppuccin-Mocha.hex.css") (prefers-color-scheme: dark) and (prefers-contrast: more);

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);
}

🙋 FAQ

Q: "How can I add a variable prefix?"
A: See CONTRIBUTING.md for instructions on how to build themes from source with a prefix, ex: var(--myprefix-text);

Contributing

See CONTRIBUTING.md and thanks for the interest!

💝 Thanks to

Gaiety