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.
ts
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'})`)
})
})
ts
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))
}