Skip to content

Theme Detector

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

Used functions

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
))
}