Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/connor4312/vscode-webview-tools
Miscellaneous tools for building things in VS Code webviews
https://github.com/connor4312/vscode-webview-tools
Last synced: 2 months ago
JSON representation
Miscellaneous tools for building things in VS Code webviews
- Host: GitHub
- URL: https://github.com/connor4312/vscode-webview-tools
- Owner: connor4312
- License: other
- Created: 2020-05-10T15:41:34.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2020-09-24T18:10:22.000Z (about 4 years ago)
- Last Synced: 2024-10-10T14:17:39.785Z (2 months ago)
- Language: TypeScript
- Size: 62.5 KB
- Stars: 5
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# vscode-webview-tools
[](https://bundlephobia.com/result?p=vscode-webview-tools)  
Miscellaneous tools for building things in VS Code webviews.
```
npm install --save vscode-webview-tools
```
## Table of Contents
- [API](#api)
- [`Colors`](#colors)
- [`parseColors(): { [key in Color]: string }`](#parsecolors--key-in-color-string-)
- [`observeColors(callback: (colors: { [key in Color]: string }) => void): () => void`](#observecolorscallback-colors--key-in-color-string---void---void)
- [`Theme`](#theme)
- [`getTheme(): Theme`](#gettheme-theme)
- [`observeTheme(callback: (theme: Theme) => void): () => void`](#observethemecallback-theme-theme--void---void)
## API
### `Colors`
An enumeration of theme variables (colors, mostly) exposed by VS Code.
```ts
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:
```tsx
import { parseColors } from 'vscode-webview-tools';
const colors = parseColors();
const MyErrorMessage = () => (
Your input is invalid!
);
```
#### `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.
```tsx
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:
```tsx
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 (
This will always appear the same color as what's in the editor
);
};
```
### `Theme`
The general VS Code theme type, exported as an enum.
```ts
export const enum Theme {
Light = 'vscode-light',
Dark = 'vscode-dark',
HighContrast = 'vscode-high-contrast',
}
```
#### `getTheme(): Theme`
Gets the current theme.
```ts
import { getTheme, Theme } from 'vscode-webview-tools';
const SomeText = () => (
Hi!
);
```
#### `observeTheme(callback: (theme: Theme) => void): () => void`
Functions identically to `observeColors`, but for the theme. Can be wrapped in a hook the same way:
```tsx
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 Hi!;
};
```