## Preview
🌻 Latte🪴 Frappé🌺 Macchiato🌿 Mocha
## Usage
_Note: Using [TailwindCSS](https://tailwindcss.com/) in your project? Check out [@catppuccin/tailwindcss](https://github.com/catppuccin/tailwindcss)._
1. Copy the theme files from this repository:
```bash
# 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
2. Import it in your CSS
```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);
```
3. Use it in your styles!
```css
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](./CONTRIBUTING.md) for instructions on how to build themes from source with a prefix, ex: `var(--myprefix-text);`
## Contributing
See [CONTRIBUTING.md](./CONTRIBUTING.md) and thanks for the interest!
