76 lines
3.1 KiB
Markdown
76 lines
3.1 KiB
Markdown
<h3 align="center">
|
|
<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/logos/exports/1544x1544_circle.png" width="100" alt="Catppuccin logo of a smiling black cat with a bowtie over a striped rainbow of pastel colors"/><br/>
|
|
|
|
</h3>
|
|
|
|
|
|
|
|
## Preview
|
|
|
|
<details>
|
|
<summary>🌻 Latte</summary>
|
|
<img src="./assets/latte.png"/>
|
|
</details>
|
|
<details>
|
|
<summary>🪴 Frappé</summary>
|
|
<img src="./assets/frappé.png"/>
|
|
</details>
|
|
<details>
|
|
<summary>🌺 Macchiato</summary>
|
|
<img src="./assets/macchiato.png"/>
|
|
</details>
|
|
<details>
|
|
<summary>🌿 Mocha</summary>
|
|
<img src="./assets/mocha.png"/>
|
|
</details>
|
|
|
|
## 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!
|
|
|
|
|
|
|
|
<p align="center"><img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/footers/gray0_ctp_on_line.svg?sanitize=true" /></p>
|
|
<p align="center">Copyright © 2021-present <a href="https://github.com/catppuccin" target="_blank">Catppuccin Org</a>
|
|
<p align="center"><a href="https://github.com/catppuccin/catppuccin/blob/main/LICENSE"><img src="https://img.shields.io/static/v1.svg?style=for-the-badge&label=License&message=MIT&logoColor=d9e0ee&colorA=363a4f&colorB=b7bdf8"/></a></p>
|