https://github.com/mvllow/pinecone

Lovely VSCode theme builder
https://github.com/mvllow/pinecone

theme theme-development vscode

Last synced: about 1 year ago
JSON representation

Lovely VSCode theme builder

• Host: GitHub
• URL: https://github.com/mvllow/pinecone
• Owner: mvllow
• License: mit
• Created: 2020-07-08T20:23:31.000Z (over 5 years ago)
• Default Branch: main
• Last Pushed: 2023-04-05T19:03:50.000Z (almost 3 years ago)
• Last Synced: 2025-03-18T21:11:21.803Z (about 1 year ago)
• Topics: theme, theme-development, vscode
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/pinecone-cli
• Size: 355 KB
• Stars: 14
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • License: license

Awesome Lists containing this project

README

          
# pinecone

> Lovely VSCode theme builder

Create multiple theme variants from a single source _with variables_.

## Install

```sh

npm install --global pinecone-cli

```

## Usage

> pinecone requires `"type": "module"` to be set in your package.json

```

$ pinecone --help

	Usage

		$ pinecone  [options]

	Commands

		init  Create new theme

	Options

		-s, --source  Path to pinecone theme file

		-o, --output  Directory for generated themes

		-p, --prefix  Variable prefix

		-w, --watch   Rebuild themes on change

		-t, --tidy    Remove non-pinecone themes from output and package.json

		--include-non-italic-variants  Generate additional non-italic variants

	Examples

		$ pinecone

		$ pinecone init

		$ pinecone --watch --tidy --include-non-italic-variants

```

## Theme

Pinecone themes look similar to any other theme with the addition of variables and difference in how empty values are handled. VSCode treats empty values as `#ff0000` whereas pinecone removes empty values for cleaner intellisense and organisation.

**Example `./themes/_pinecone-color-theme.json`**

```json

{

	"colors": {

		"editor.background": "$background",

		"editor.foreground": "$foreground",

		"editor.hoverHighlightBackground": "$transparent",

		"widget.shadow": "$shadow"

	},

	"tokenColors": [

		{

			"scope": ["comment"],

			"settings": {

				"foreground": "$foreground",

				"fontStyle": "italic"

			}

		}

	]

}

```

## Config

**Example `./pinecone.config.js`**

```js

import {colorish, defineConfig} from 'pinecone-cli';

export default defineConfig({

	options: {

		source: './themes/_pinecone-color-theme.json',

		output: './themes',

		prefix: '$',

		includeNonItalicVariants: false,

	},

	variants: {

		latte: {

			name: 'Latte',

			type: 'light',

		},

		cappuccino: {

			name: 'Cappuccino',

			type: 'light',

		},

		espresso: {

			name: 'Espresso',

			type: 'dark',

		},

	},

	colors: {

		transparent: '#0000', // Shorthand to set all variants

		background: {

			latte: '#faf8f6',

			cappuccino: '#c29d84',

			espresso: '#36261b',

		},

		foreground: {

			latte: '#c29d84',

			cappuccino: '#573d2b',

			espresso: '#d5bbaa',

		},

		shadow: {

			latte: colorish('#c29d84', 0.1),

			cappuccino: colorish('#573d2b', 0.1),

			espresso: colorish('#d5bbaa', 0.1),

		},

	},

});

```

## Made with pinecone

- [Rosé Pine](https://github.com/rose-pine/vscode)