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.

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.

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:

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:

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 one of an array of patterns to watch for changes in the file system. Multiple VSCode watchers are created for each pattern.