Package Exports

vscode-webview-tools

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vscode-webview-tools) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

vscode-webview-tools

Miscellaneous tools for building things in VS Code webviews.

npm install --save vscode-webview-tools

API
- Colors
  - parseColors(): { [key in Color]: string }
  - observeColors(callback: (colors: { [key in Color]: string }) => void): () => void
- Theme
  - getTheme(): Theme
  - observeTheme(callback: (theme: Theme) => void): () => void

API

`Colors`

An enumeration of theme variables (colors, mostly) exposed by VS Code.

export const enum Colors {
  TabActiveBackground = 'tab-activeBackground',
  StatusBarBorder = 'statusBar-border',
  // 400 more, or so...

`parseColors(): { [key in Color]: string }`

Gets the map of colors variables to what they're set to in the webview. For example, you can make a custom input validation box-appearing thing:

import { parseColors } from 'vscode-webview-tools';

const colors = parseColors();

const MyErrorMessage = () => (
  <div
    style={{
      background: colors[Color.InputValidationErrorBackground],
      border: `1px solid ${colors[Color.InputValidationErrorBorder]}`,
      color: colors[Color.InputValidationErrorForeground],
    }}
  >
    Your input is invalid!
  </div>
);

`observeColors(callback: (colors: { [key in Color]: string }) => void): () => void`

Watches for changes to the colors and fires a callback when initially invoked and whenever the colors change. It returns a function that can be used to stop listening for color changes.

const stopListening = observeColors((colors) => {
  console.log('The editor text color is now', colors[Color.EditorForeground]);
});

setTimeout(stopListening, 5000);

You can easily wrap this into a React/Preact hook, for example:

import { Color, useColors } from 'vscode-webview-tools';
import { useState, useEffect } from 'preact/hooks';

const useColors = () => {
  const [colors, setColors] = useState<{ [key: string]: string }>({});
  useEffect(() => observeColors(setColors), []);
  return colors;
};

const SomeText = () => {
  const colors = useColors();
  return (
    <span style={{ color: colors[Color.EditorForeground] }}>
      This will always appear the same color as what's in the editor
    </span>
  );
};

`Theme`

The general VS Code theme type, exported as an enum.

export const enum Theme {
  Light = 'vscode-light',
  Dark = 'vscode-dark',
  HighContrast = 'vscode-high-contrast',
}

`getTheme(): Theme`

Gets the current theme.

import { getTheme, Theme } from 'vscode-webview-tools';

const SomeText = () => (
  <span style={{ color: getTheme() === Theme.Light ? 'white' : 'black' }}>Hi!</span>
);

`observeTheme(callback: (theme: Theme) => void): () => void`

Functions identically to observeColors, but for the theme. Can be wrapped in a hook the same way:

import { Theme, useTheme } from 'vscode-webview-tools';
import { useState, useEffect } from 'preact/hooks';

const useTheme = () => {
  const [theme, setTheme] = useState<{ [key: string]: string }>({});
  useEffect(() => observeTheme(setTheme), []);
  return theme;
};

const SomeText = () => {
  const theme = useTheme();
  return <span style={{ color: getTheme() === Theme.Light ? 'white' : 'black' }}>Hi!</span>;
};