Skip to content

Latest commit

 

History

History
39 lines (25 loc) · 1.58 KB

README.md

File metadata and controls

39 lines (25 loc) · 1.58 KB
Raw

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

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

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

Local Development

Dependencies

# 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