Awesome
<p align="center"> <img src="https://github.com/rose-pine/rose-pine-theme/raw/main/assets/icon.png" width="80" /> <h2 align="center">Rosé Pine Build</h2> </p> <p align="center">All natural pine, faux fur and a bit of soho vibes for the classy minimalist</p> <p align="center"> <a href="https://github.com/rose-pine/rose-pine-theme"> <img src="https://img.shields.io/badge/community-rosé%20pine-26233a?labelColor=191724&logo=data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjUwIiBoZWlnaHQ9IjIzNyIgdmlld0JveD0iMCAwIDI1MCAyMzciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xNjEuMjI3IDE2MS4yNTFDMTMyLjE1NCAxNjkuMDQxIDExNC45MDEgMTk4LjkyNCAxMjIuNjkxIDIyNy45OTdDMTIzLjkyNSAyMzIuNjAzIDEyOC42NTkgMjM1LjMzNiAxMzMuMjY0IDIzNC4xMDJMMTg1LjkwNyAyMTkuOTk2QzIxOS41ODUgMjEwLjk3MiAyMzkuNTcgMTc2LjM1NCAyMzAuNTQ2IDE0Mi42NzdMMTYxLjIyNyAxNjEuMjUxWiIgZmlsbD0iIzI0NjI3QiIvPgo8cGF0aCBkPSJNODguMTgzNiAxNTkuOTg4QzExNy4yNTcgMTY3Ljc3OCAxMzQuNTEgMTk3LjY2MiAxMjYuNzIgMjI2LjczNUMxMjUuNDg2IDIzMS4zNCAxMjAuNzUyIDIzNC4wNzMgMTE2LjE0NyAyMzIuODM5TDYzLjUwNDEgMjE4LjczM0MyOS44MjY0IDIwOS43MSA5Ljg0MDk0IDE3NS4wOTIgMTguODY0OSAxNDEuNDE0TDg4LjE4MzYgMTU5Ljk4OFoiIGZpbGw9IiMyNDYyN0IiLz4KPHBhdGggZD0iTTE4Ni44NjcgMTcyLjk4QzE1Mi4wMDIgMTcyLjk4IDEyMy43MzcgMjAxLjI0NSAxMjMuNzM3IDIzNi4xMTFIMTg2Ljg3QzIyMS43MzYgMjM2LjExMSAyNTAgMjA3Ljg0NiAyNTAgMTcyLjk4TDE4Ni44NjcgMTcyLjk4WiIgZmlsbD0iIzMxNzQ4RiIvPgo8cGF0aCBkPSJNNjMuMTMyNyAxNzIuOThDOTcuOTk4NCAxNzIuOTggMTI2LjI2MyAyMDEuMjQ1IDEyNi4yNjMgMjM2LjExMUg2My4xM0MyOC4yNjQyIDIzNi4xMTEgLTEuNTI0MDNlLTA2IDIwNy44NDYgMCAxNzIuOThMNjMuMTMyNyAxNzIuOThaIiBmaWxsPSIjMzE3NDhGIi8+CjxwYXRoIGQ9Ik0xNzEuNzE3IDc1LjEyNjNDMTcxLjcxNyAxMDEuMjc2IDE1MC41MTggMTIyLjQ3NSAxMjQuMzY5IDEyMi40NzVDOTguMjE4OCAxMjIuNDc1IDc3LjAyMDIgMTAxLjI3NiA3Ny4wMjAyIDc1LjEyNjNDNzcuMDIwMiA0OC45NzY0IDk4LjIxODggMjcuNzc3OCAxMjQuMzY5IDI3Ljc3NzhDMTUwLjUxOCAyNy43Nzc4IDE3MS43MTcgNDguOTc2NCAxNzEuNzE3IDc1LjEyNjNaIiBmaWxsPSIjRUJCQ0JBIi8+CjxwYXRoIGQ9Ik0xNDQuMjE3IDg2LjIzNzlDMTYxLjY0OSA1Ni4wNDMyIDE1MS4zMDMgMTcuNDMyOSAxMjEuMTA4IDBMMTA2LjA2IDI2LjA2NDRDODguNjI3IDU2LjI1OSA5OC45NzM2IDk0Ljg2OTQgMTI5LjE2OCAxMTIuMzAyTDE0NC4yMTcgODYuMjM3OVoiIGZpbGw9IiNFQkJDQkEiLz4KPHBhdGggZD0iTTEyNS4yOTkgNjAuOTc4OUMxMTYuMjc1IDI3LjMwMTIgODEuNjU3NSA3LjMxNTY3IDQ3Ljk3OTcgMTYuMzM5Nkw2NC4zMTk3IDc3LjMyMTFDNzMuMzQzNiAxMTAuOTk5IDEwNy45NjEgMTMwLjk4NCAxNDEuNjM5IDEyMS45NkwxMjUuMjk5IDYwLjk3ODlaIiBmaWxsPSIjRUJCQ0JBIi8+CjxwYXRoIGQ9Ik0xMjQuOTI2IDYwLjk3ODlDMTMzLjk1IDI3LjMwMTIgMTY4LjU2NyA3LjMxNTY3IDIwMi4yNDUgMTYuMzM5NkwxODUuOTA1IDc3LjMyMTFDMTc2Ljg4MSAxMTAuOTk5IDE0Mi4yNjMgMTMwLjk4NCAxMDguNTg2IDEyMS45NkwxMjQuOTI2IDYwLjk3ODlaIiBmaWxsPSIjRUJCQ0JBIi8+Cjwvc3ZnPgo=&style=for-the-badge" /> </a> </p>Theme generator for Rosé Pine
Usage
Start by creating a template file. This will look similar to your desired theme file, replacing colour values with Rosé Pine variables. For example, #ebbcba
would now be $rose
.
$ npx @rose-pine/build --help
Usage
$ npx @rose-pine/build [options]
Options
-t, --template Path to template file
-o, --output Directory for generated files
-p, --prefix Variable prefix
-f, --format Color output format
-s, --strip-spaces Strip spaces in output
-w, --watch Rebuild when template changes
Examples
$ npx @rose-pine/build -w
$ npx @rose-pine/build -s -f rgb
$ npx @rose-pine/build -t ./template.yml -o ./
Color formats
Name | Example |
---|---|
hex | #ebbcba |
hex-ns | ebbcba |
rgb | 235, 188, 186 |
rgb-ns | 235 188 186 |
rgb-ansi | 235;188;186 |
rgb-array | [235, 188, 186] |
rgb-function | rgb(235, 188, 186) |
hsl | 2, 55%, 83% |
hsl-ns | 2 55% 83% |
hsl-array | [2, 55%, 83%] |
hsl-function | hsl(2, 55%, 83%) |
Variables
By default, variables are prefixed with
$
All values from @rose-pine/palette are available as well as the following.
Metadata
// template.json
{
"id": "$id",
"name": "$name",
"description": "$description",
"type": "$type",
}
// rose-pine.json
{
"id": "rose-pine",
"name": "Rosé Pine",
"description": "All natural pine, faux fur and a bit of soho vibes for the classy minimalist",
"type": "dark",
}
// rose-pine-moon.json
{
"id": "rose-pine-moon",
"name": "Rosé Pine Moon",
"description": "All natural pine, faux fur and a bit of soho vibes for the classy minimalist",
"type": "dark",
}
// rose-pine-dawn.json
{
"id": "rose-pine-dawn",
"name": "Rosé Pine Dawn",
"description": "All natural pine, faux fur and a bit of soho vibes for the classy minimalist",
"type": "light",
}
Custom values per variant
Use different values for each variant, formatted as
$(main|moon|dawn)
Named colors
// template.json
{ "accent": "$($rose|$iris|$pine)" }
// rose-pine.json
{ "accent": "#ebbcba" }
// rose-pine-moon.json
{ "accent": "#c4a7e7" }
// rose-pine-dawn.json
{ "accent": "#286983" }
Strings
// template.json
{ "order": "$(Caffè|Cappuccino|Marocchino)" }
// rose-pine.json
{ "order": "Caffè" }
// rose-pine-moon.json
{ "order": "Cappuccino" }
// rose-pine-dawn.json
{ "order": "Marocchino" }