Skip to content

Window and Workspace

Theme

You may want to apply different styles to your extension based on the current theme. Although many of the APIs (like TreeItem.iconPath) have built-in support for dual themes, some don't. You may also want to sync the theme in your webview.

The useActiveColorTheme and useIsDrakTheme composable can be used to get the current theme and whether it's dark or not.

ts
import { 
defineExtension
,
useActiveColorTheme
,
useIsDarkTheme
,
watchEffect
} from 'reactive-vscode'
import {
useDemoWebviewView
} from './webviewView'
export =
defineExtension
(() => {
const
theme
=
useActiveColorTheme
()
const
isDark
=
useIsDarkTheme
()
const
webviewView
=
useDemoWebviewView
()
watchEffect
(() => {
webviewView
.
postMessage
({
type
: 'updateTheme',
isDark
:
isDark
.
value
,
}) }) })

Window State

The useWindowState composable can be used to get the current window state:

  • WindowState.active - Whether the window has been interacted with recently. This will change immediately on activity, or after a short time of user inactivity.
  • WindowState.focused - Whether the current window is focused.
ts
import { 
defineExtension
,
useWindowState
,
watchEffect
} from 'reactive-vscode'
export =
defineExtension
(() => {
const {
active
:
isWindowActive
,
focused
:
isWindowFocused
} =
useWindowState
()
watchEffect
(() => {
console
.
log
('Window is active:',
isWindowActive
.
value
)
console
.
log
('Window is focused:',
isWindowFocused
.
value
)
}) })

Workspace Folders

The useWorkspaceFolders composable can be used to get the workspace folders:

ts
import { 
defineExtension
,
useWorkspaceFolders
,
watchEffect
} from 'reactive-vscode'
export =
defineExtension
(() => {
const
workspaceFolders
=
useWorkspaceFolders
()
watchEffect
(() => {
console
.
log
('There are',
workspaceFolders
.
value
?.
length
, 'workspace folders')
}) })

Watch File System Changes

The useFsWatcher composable can be used to watch file system changes:

ts
import { 
computed
,
defineExtension
,
useFsWatcher
,
watchEffect
} from 'reactive-vscode'
export =
defineExtension
(() => {
const
filesToWatch
=
computed
(() => ['**/*.md', '**/*.txt'])
const
watcher
=
useFsWatcher
(
filesToWatch
)
watcher
.
onDidChange
((
uri
) => {
console
.
log
('File changed:',
uri
)
}) })

Note that you can pass an array of patterns to watch for changes in the file system. Multiple VSCode watchers will be created for each pattern.