Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions .github/workflows/publish.yml
Original file line number Diff line number Diff line change
Expand Up @@ -32,9 +32,9 @@ jobs:
VSCE_PAT: ${{ secrets.VSCE_PAT }}
run: npx @vscode/vsce publish --pat $VSCE_PAT

# - name: Setup npm authentication
# run: |
# echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" > ~/.npmrc
- name: Setup npm authentication
run: |
echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" > ~/.npmrc

# - name: Publish to npm
# run: npm publish
- name: Publish to npm
run: npm publish
2 changes: 1 addition & 1 deletion .vscode/extensions.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"recommendations": [
"pierre-computer-co.pierre-vscode-theme"
"pierrecomputer.pierre-theme"
]
}
40 changes: 29 additions & 11 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,20 +1,38 @@
# Pierre VS Code Theme
# Pierre Theme

Light and dark themes for Visual Studio Code, Cursor, and Shiki. Built for [Diffs.com](https://diffs.com) by [The Pierre Computer Company](https://pierre.computer).

## Preview

![Pierre dark theme screenshot](https://github.com/user-attachments/assets/e8b2a6e0-995b-4515-997a-f805f4fbc5bf)
![Pierre light theme screenshot](https://github.com/user-attachments/assets/2ebb09d0-eb42-4c28-9617-35873d96ed8f)

## Install

1. Go to the [Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=pierre-computer-co.pierre-vscode-theme).
2. Click on the "Install" button.
3. Then [select a theme](https://code.visualstudio.com/docs/getstarted/themes#_selecting-the-color-theme). Four themes are included:
- `Pierre Light`
- `Pierre Dark`
### Visual Studio Code

From the menu in Visual Studio Code:

- View > Extensions (or hit Command+Shift+X or Control+Shift+X)
- Search for `Pierre Theme`
- Click install

You can also install or download from the [Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=pierrecomputer.pierre-theme).

### Cursor

From the menu in Cursor:

- View > Extensions (or hit Command+Shift+X or Control+Shift+X)
- Search for `Pierre Theme`
- Click install

You can also install or download from the [Open VSX registry](https://open-vsx.org/extension/pierrecomputer/pierre-theme).

## Vibrant themes (Display P3)

> [!NOTE]
> Vibrant themes do not work in VS Code at this time as it does not support color formats other than Hex or RGB. You can, however, use these with [Diffs](https://diffs.com) or any [Shiki](https://shiki.style) project to render code.
> Vibrant themes do not work in VS Code or Cursor at this time as it does not support color formats other than Hex or RGB. You can, however, use these with [Diffs](https://diffs.com) or any [Shiki](https://shiki.style) project to render code.

The **Vibrant** theme variants use CSS's `color(display-p3 r g b)` format with enhanced saturation to fully utilize Display P3's wider color gamut. Display P3 can represent ~25% more colors than standard sRGB, and these themes are optimized to take full advantage of that on compatible displays.

Expand All @@ -26,11 +44,11 @@ To override this (or any other) theme in your personal config file, please follo

## Contribute

1. Clone and open this [repo](https://github.com/pierrecomputer/pierre-vscode-theme) in VS Code
2. Run `yarn` to install the dependencies.
1. Clone and open this [repo](https://github.com/pierrecomputer/theme) in your editor
2. Run `npm install` to install the dependencies.
3. Press `F5` to open a new window with your extension loaded
4. Open `Code > Preferences > Color Theme` [`⌘k ⌘t`] and pick the "Pierre…" theme you want to test.
5. Make changes to the [`/src/theme.ts`](https://github.com/pierrecomputer/pierre-vscode-theme/blob/main/src/theme.ts) file.
5. Make changes to the [`/src/theme.ts`](https://github.com/pierrecomputer/theme/blob/main/src/theme.ts) file.
6. Run `npm run build` to update the theme. You can also run `npm run start` instead to automatically rebuild the theme while making changes and no reloading should be necessary.
7. Run `npm test` to validate your changes (this runs automatically on PRs).
8. Once you're happy, commit your changes and open a PR.
Expand All @@ -46,4 +64,4 @@ To override this (or any other) theme in your personal config file, please follo

## Credit

This theme was built on top of [GitHub's VS Code Theme](https://github.com/primer/github-vscode-theme). All credit to them for the technique and build tooling, which we've since iterated on for more specific language tokens.
This theme was built on top of [GitHub's Visual Studio Code Theme](https://github.com/primer/github-vscode-theme). All credit to them for the technique and build tooling, which we've since iterated on for more specific language tokens.
8 changes: 4 additions & 4 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

12 changes: 6 additions & 6 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
{
"name": "pierre-vscode-theme",
"name": "@pierre/theme",
"displayName": "Pierre Theme",
"description": "Pierre theme for Shiki, VS Code, and more",
"version": "0.0.17",
"publisher": "pierre-computer-co",
"version": "0.0.19",
"publisher": "pierrecomputer",
"icon": "icon.png",
"galleryBanner": {
"color": "#141415",
Expand All @@ -12,10 +12,10 @@
"license": "MIT",
"repository": {
"type": "git",
"url": "https://github.com/pierrecomputer/pierre-vscode-theme"
"url": "https://github.com/pierrecomputer/theme"
},
"bugs": {
"url": "https://github.com/pierrecomputer/pierre-vscode-theme/issues"
"url": "https://github.com/pierrecomputer/theme/issues"
},
"engines": {
"vscode": "^1.0.0"
Expand Down Expand Up @@ -47,7 +47,7 @@
"build": "ts-node src/build.ts",
"test": "npm run build && ts-node src/test.ts",
"start": "nodemon --watch src --ext ts --exec npm run build",
"package": "vsce package"
"package": "ts-node src/package-vsix.ts"
},
"devDependencies": {
"nodemon": "^3.1.11",
Expand Down
22 changes: 22 additions & 0 deletions src/package-vsix.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import { readFileSync, writeFileSync } from "fs";
import { execSync } from "child_process";
import { join } from "path";

const pkgPath = join(__dirname, "..", "package.json");
const original = readFileSync(pkgPath, "utf-8");
const pkg = JSON.parse(original);

// Store original name and swap to unscoped version for VSIX
const originalName = pkg.name;
pkg.name = "pierre-theme";

console.log(`Temporarily renaming package: ${originalName} → ${pkg.name}\n`);

try {
writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + "\n");
execSync("vsce package", { stdio: "inherit", cwd: join(__dirname, "..") });
} finally {
// Always restore original package.json
writeFileSync(pkgPath, original);
console.log(`\nRestored package name: ${originalName}`);
}