https://github.com/githubnext/spectrum

https://github.com/githubnext/spectrum

Last synced: 5 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/githubnext/spectrum
• Owner: githubnext
• License: mit
• Created: 2022-02-02T21:12:46.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2023-10-08T08:37:39.000Z (over 2 years ago)
• Last Synced: 2025-04-19T04:31:32.518Z (9 months ago)
• Language: TypeScript
• Size: 1.07 MB
• Stars: 13
• Watchers: 3
• Forks: 3
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Spectrum

This is a VSCode extension (webview) that helps you find and copy a VSCode theme CSS variable quickly and easily! No more messing around with the Chrome dev tools – fire up this webview and find what you're looking for, fast.

![Screen Shot 2022-02-02 at 4 13 15 PM](https://user-images.githubusercontent.com/5148596/152238301-cea849d3-442a-46f6-afd2-838e5a17c321.png)

## Usage

Once installed, open the webview by invoking the **Spectrum: Show theme tokens** command from the command palette.

![Screen Shot 2022-02-07 at 11 16 35 AM](https://user-images.githubusercontent.com/5148596/152827601-9354c604-d0d8-4c38-977d-9978041bf3e5.png)

Once the webview is open, filter the grid of swatches via the text field at the top of the screen. To copy a value, click a swatch and the VSCode quickpick UI will pop up. From there you can copy either the:

- Fully qualified CSS variable

- Raw CSS variable name

- Hex/RGB value

![Screen Shot 2022-02-02 at 4 21 47 PM](https://user-images.githubusercontent.com/5148596/152239366-5c1d3485-8b8e-4efc-95e9-bda1a55815bb.png)

## Local Development

### Dependencies

```bash

# Install dependencies for both the extension and webview UI source code

npm run install:all

# Build webview UI source code

npm run build:webview

# Open sample in VS Code

code .

```

### Running the extension

Once the extension is open inside VS Code you can run the extension by doing the following:

1. Press `F5` to open a new Extension Development Host window

2. Inside the host window, open the command palette (`Ctrl+Shift+P` or `Cmd+Shift+P` on Mac) and type `Spectrum: Show theme tokens`