vscode-webview-tools
Miscellaneous tools for building things in VS Code webviews.
npm install --save vscode-webview-tools
Table of Contents
API
Colors
An enumeration of theme variables (colors, mostly) exposed by VS Code.
export const enum Colors {
TabActiveBackground = ' tab-activeBackground ' ,
StatusBarBorder = ' statusBar-border ' ,
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 > ;
} ;