Theme Detector

Detects the user's theme, and show a message accordingly.

Used functions

• useActiveColorTheme - Reactive API for window.activeColorTheme.
• useIsDarkTheme - Determines if the current color theme is dark. See ColorTheme.kind.

Reactive VSCode

import { defineExtension, useActiveColorTheme, useIsDarkTheme, watchEffect } from 'reactive-vscode'
import { window } from 'vscode'

export = defineExtension(() => {
  const theme = useActiveColorTheme()
  const isDark = useIsDarkTheme()
  watchEffect(() => {
    window.showInformationMessage(`Your theme is ${theme.value} (kind: ${isDark.value ? 'dark' : 'light'})`)
  })
})

Original VSCode API

import type { ExtensionContext } from 'vscode'
import { ColorThemeKind, window } from 'vscode'

function showMessage() {
  const theme = window.activeColorTheme
  const isDark = theme.kind === ColorThemeKind.Dark || theme.kind === ColorThemeKind.HighContrast
  window.showInformationMessage(`Your theme is ${theme} (kind: ${isDark ? 'dark' : 'light'})`)
}

export function activate(extensionContext: ExtensionContext) {
  showMessage()
  extensionContext.subscriptions.push(window.onDidChangeActiveColorTheme(showMessage))
}