fix!: replace useThemeData hook by useColorTheme

Author: CGNonofr

src/MonacoEditor.tsx

@@ -2,7 +2,7 @@ import React, { ForwardedRef, forwardRef, ReactElement, useEffect, useMemo, useR
 import debounce from 'lodash.debounce'
 import { monaco, createEditor, getMonacoLanguage, updateEditorKeybindingsMode, registerEditorOpenHandler } from '@codingame/monaco-editor-wrapper'
 import { IEditorOptions } from 'vscode/service-override/modelEditor'
-import { useDeepMemo, useLastValueRef, useLastVersion, useThemeData } from './hooks'
+import { useDeepMemo, useLastValueRef, useLastVersion, useColorTheme } from './hooks'
 import './style'
 
 const STATUS_BAR_HEIGHT = 20
@@ -116,7 +116,7 @@ function MonacoEditor ({
   const preventTriggerChangeEventRef = useRef<boolean>(false)
 
   const [height, setHeight] = useState<number | string>(requestedHeight !== 'auto' ? requestedHeight : 50)
-  const themeData = useThemeData()
+  const colorTheme = useColorTheme()
 
   const containerRef = useRef<HTMLDivElement>(null)
   const statusBarRef = useRef<HTMLDivElement>(null)
@@ -325,11 +325,11 @@ function MonacoEditor ({
 
   const statusBarStyle = useMemo(() => {
     return {
-      backgroundColor: themeData?.getColor('statusBar.background')?.toString() ?? '#007ACC',
-      color: themeData?.getColor('statusBar.foreground')?.toString() ?? '#FFFFFF',
-      borderTop: `1px solid ${themeData?.getColor('statusBar.border')?.toString() ?? '#FFFFFF'}`
+      backgroundColor: colorTheme.getColor('statusBar.background')?.toString() ?? '#007ACC',
+      color: colorTheme.getColor('statusBar.foreground')?.toString() ?? '#FFFFFF',
+      borderTop: `1px solid ${colorTheme.getColor('statusBar.border')?.toString() ?? '#FFFFFF'}`
     }
-  }, [themeData])
+  }, [colorTheme])
 
   return (
     <div className='react-monaco-editor-react-container' style={{ height }}>

src/hooks.ts

@@ -1,24 +1,22 @@
 import { MutableRefObject, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import deepEqual from 'deep-equal'
-import { getConfiguration, getThemeData, onConfigurationChanged, monaco } from '@codingame/monaco-editor-wrapper'
+import { getConfiguration, onConfigurationChanged, monaco } from '@codingame/monaco-editor-wrapper'
+import { StandaloneServices, IThemeService, IColorTheme } from 'vscode/services'
 
-const standaloneThemeService = monaco.extra.StandaloneServices.get(monaco.editor.IStandaloneThemeService)
-export function useThemeData (): monaco.extra.ColorThemeData | null {
-  const [themeName, setThemeName] = useState(standaloneThemeService.getColorTheme().themeName)
-  const updateTheme = (theme: monaco.editor.IColorTheme) => {
-    setThemeName((theme as monaco.editor.IStandaloneTheme).themeName)
-  }
+export function useColorTheme (): IColorTheme {
+  const themeService = useMemo(() => StandaloneServices.get(IThemeService), [])
+  const [theme, setTheme] = useState(themeService.getColorTheme())
   useEffect(() => {
-    const disposable = standaloneThemeService.onDidColorThemeChange(updateTheme)
-    updateTheme(standaloneThemeService.getColorTheme())
+    const disposable = themeService.onDidColorThemeChange(() => {
+      setTheme(themeService.getColorTheme())
+    })
+    setTheme(themeService.getColorTheme())
     return () => {
       disposable.dispose()
     }
-  }, [])
+  }, [themeService])
 
-  return useMemo(() => {
-    return getThemeData(themeName)
-  }, [themeName])
+  return theme
 }
 
 export function useUserConfiguration (programmingLanguageId?: string): Partial<monaco.editor.IEditorOptions> {

src/index.ts

@@ -1,11 +1,11 @@
 import { loadLanguage, monaco, updateKeybindings, updateUserConfiguration } from '@codingame/monaco-editor-wrapper'
-import { useThemeData, useUserConfiguration } from './hooks'
+import { useColorTheme, useUserConfiguration } from './hooks'
 import MonacoEditor, { MonacoEditorProps } from './MonacoEditor'
 
 export default MonacoEditor
 export {
   monaco,
-  useThemeData,
+  useColorTheme,
   useUserConfiguration,
   updateKeybindings,
   updateUserConfiguration,