pinecone

Lovely VSCode theme builder

Create multiple theme variants from a single source with variables.

Install

npm install --global pinecone-cli

Usage

Pinecone will create any necessary files on first run

$ pinecone --help

    Usage
        $ pinecone <command> [options]

    Commands
        watch  Rebuild themes on change
                     Watches pinecone.config.js and themes/*

    Options
        --clean-unused-themes          Delete non-active pinecone themes
        --include-non-italic-variants  Generate additional non-italic variants
        --update-contributes           Add contributed themes to \`package.json\`

    Examples
        $ pinecone
        $ pinecone watch --clean-unused-themes --include-non-italic-variants --update-contributes

Theme

By default, pinecone looks for ./themes/_pinecone-color-theme.json. This will look like any other VSCode theme file with the addition of variable values.

{
    "colors": {
        "editor.background": "$bg",
        "editor.foreground": "$fg",
        "widget.shadow": "$transparent"
    },
    "tokenColors": [
        {
            "scope": ["comment"],
            "settings": {
                "foreground": "$fg",
                "fontStyle": "italic"
            }
        }
    ]
}

Config

Your theme config and variables will live in ./pinecone.config.js.

import { alpha, defineConfig } from 'pinecone-cli'

// Pinecone defaults
export default defineConfig({
    source: './themes/_pinecone-color-theme.json',
    output: './themes',
    prefix: '

,
    options: {
        cleanUnusedThemes: false,
        includeNonItalicVariants: false,
        updateContributes: false,
    },
    theme: {
        variants: {
            latte: {
                name: 'Latte',
                type: 'light',
            },
            cappuccino: {
                name: 'Cappuccino',
                type: 'light',
            },
            espresso: {
                name: 'Espresso',
                type: 'dark',
            },
        },
        colors: {
            transparent: '#0000', // Shorthand to set for all three variants
            bg: {
                latte: '#faf8f6',
                cappuccino: '#c29d84',
                espresso: '#36261b',
            },
            fg: {
                latte: '#c29d84',
                cappuccino: '#573d2b',
                espresso: '#d5bbaa',
            },
        },
    },
})

Experimental

{
    experimental: {
        removeEmptyThemeValues: true
    }
}

By default, VSCode will consider empty values as #ff0000. Enabling removeEmptyThemeValues allows users to add empty rules for cleaner intellisense or organisation.

Made with pinecone

• Rosé Pine