39 lines
1.9 KiB
Markdown
39 lines
1.9 KiB
Markdown
|
<h3 align="center">
|
||
|
|
<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/logos/exports/1544x1544_circle.png" width="100" alt="Logo"/><br/>
|
||
|
|
<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/misc/transparent.png" height="30" width="0px"/>
|
||
|
|
Catppuccin for CSS
|
||
|
|
<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/misc/transparent.png" height="30" width="0px"/>
|
||
|
|
</h3>
|
||
|
|
|
||
|
|
<p align="center">
|
||
|
|
<a href="https://github.com/catppuccin/palette/stargazers"><img src="https://img.shields.io/github/stars/catppuccin/palette?colorA=363a4f&colorB=b7bdf8&style=for-the-badge"></a>
|
||
|
|
<a href="https://github.com/catppuccin/palette/issues"><img src="https://img.shields.io/github/issues/catppuccin/palette?colorA=363a4f&colorB=f5a97f&style=for-the-badge"></a>
|
||
|
|
<a href="https://github.com/catppuccin/palette/contributors"><img src="https://img.shields.io/github/contributors/catppuccin/palette?colorA=363a4f&colorB=a6da95&style=for-the-badge"></a>
|
||
|
|
</p>
|
||
|
|
|
||
|
|
Import the palettes:
|
||
|
|
|
||
|
|
```css
|
||
|
|
/* if you have it installed via NPM & a CSS loader configured */
|
||
|
|
@import "@catppuccin/palette/style";
|
||
|
|
|
||
|
|
/* alternatively via unpkg.com */
|
||
|
|
@import url('https://unpkg.com/@catppuccin/palette/css/catppuccin.css');
|
||
|
|
```
|
||
|
|
|
||
|
|
Then use them:
|
||
|
|
|
||
|
|
```css
|
||
|
|
.my-div {
|
||
|
|
color: var(--ctp-mocha-text-hex);
|
||
|
|
background: rgba(var(--ctp-macchiato-base-rgb) 0.9);
|
||
|
|
border-color: hsla(var(--ctp-frappe-red-hsl) 0.75);
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<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>
|