Theme generator for Rosé Pine
npm install @rose-pine/build
![]()
All natural pine, faux fur and a bit of soho vibes for the classy minimalist
> Theme generator for Rosé Pine
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 ./
`
| Name | Example |
| ------------ | -------------------- |
| hex | #ebbcba |ebbcba
| hex-ns | |235, 188, 186
| rgb | |235 188 186
| rgb-ns | |[235, 188, 186]
| rgb-array | |rgb(235, 188, 186)
| rgb-function | |2, 55%, 83%
| hsl | |2 55% 83%
| hsl-ns | |[2, 55%, 83%]
| hsl-array | |hsl(2, 55%, 83%)
| hsl-function | |
> By default, variables are prefixed with $
All values from @rose-pine/palette are available as well as the following.
`jsonc
// 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",
}
`
> Use different values for each variant, formatted as $(main|moon|dawn)
`jsonc
// template.json
{ "accent": "$($rose|$iris|$pine)" }
// rose-pine.json
{ "accent": "#ebbcba" }
// rose-pine-moon.json
{ "accent": "#c4a7e7" }
// rose-pine-dawn.json
{ "accent": "#286983" }
`
`jsonc
// template.json
{ "order": "$(Caffè|Cappuccino|Marocchino)" }
// rose-pine.json
{ "order": "Caffè" }
// rose-pine-moon.json
{ "order": "Cappuccino" }
// rose-pine-dawn.json
{ "order": "Marocchino" }
``