fix: replace useColorTheme by useThemeColors

BREAKING CHANGE: the useColorTheme was returning a mutable instance which breaks the react contract

Author: Loïc Mangeonjean

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, useColorTheme } from './hooks'
+import { useDeepMemo, useLastValueRef, useLastVersion, useThemeColors } from './hooks'
 import './style'
 
 const STATUS_BAR_HEIGHT = 20
@@ -123,7 +123,7 @@ function MonacoEditor ({
   const preventTriggerChangeEventRef = useRef<boolean>(false)
 
   const [height, setHeight] = useState<number | string>(requestedHeight !== 'auto' ? requestedHeight : 50)
-  const colorTheme = useColorTheme()
+  const [statusBarBackground, statusBarForeground, statusBarBorder] = useThemeColors(['statusBar.background', 'statusBar.foreground', 'statusBar.border'])
 
   const containerRef = useRef<HTMLDivElement>(null)
   const statusBarRef = useRef<HTMLDivElement>(null)
@@ -334,11 +334,11 @@ function MonacoEditor ({
 
   const statusBarStyle = useMemo(() => {
     return {
-      backgroundColor: colorTheme.getColor('statusBar.background')?.toString() ?? '#007ACC',
-      color: colorTheme.getColor('statusBar.foreground')?.toString() ?? '#FFFFFF',
-      borderTop: `1px solid ${colorTheme.getColor('statusBar.border')?.toString() ?? '#FFFFFF'}`
+      backgroundColor: statusBarBackground ?? '#007ACC',
+      color: statusBarForeground ?? '#FFFFFF',
+      borderTop: `1px solid ${statusBarBorder ?? '#FFFFFF'}`
     }
-  }, [colorTheme])
+  }, [statusBarBackground, statusBarBorder, statusBarForeground])
 
   return (
     <div className='react-monaco-editor-react-container' style={{ height }}>

src/hooks.ts

@@ -1,24 +1,28 @@
-import { MutableRefObject, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { MutableRefObject, useCallback, useEffect, useRef, useState } from 'react'
 import deepEqual from 'deep-equal'
 import { getConfiguration, onConfigurationChanged, monaco } from '@codingame/monaco-editor-wrapper'
-import { StandaloneServices, IThemeService, IColorTheme } from 'vscode/services'
+import { StandaloneServices, IThemeService } from 'vscode/services'
 
-export function useColorTheme (): IColorTheme {
-  const themeService = useMemo(() => StandaloneServices.get(IThemeService), [])
-  const [theme, setTheme] = useState(themeService.getColorTheme())
+function getCurrentThemeColor (color: string): string | undefined {
+  const themeService = StandaloneServices.get(IThemeService)
+  return themeService.getColorTheme().getColor(color)?.toString()
+}
+
+export function useThemeColors (colors: string[]): (string | undefined)[] {
+  const [colorValues, setColorValues] = useState(colors.map(getCurrentThemeColor))
   useEffect(() => {
-    const disposable = themeService.onDidColorThemeChange(() => {
-      setTheme(themeService.getColorTheme())
+    const disposable = StandaloneServices.get(IThemeService).onDidColorThemeChange(() => {
+      setColorValues(colors.map(getCurrentThemeColor))
     })
     // Since useEffect is asynchronous, the theme may have changed between the initialization of state and now
     // Let's update the state just in case
-    setTheme(themeService.getColorTheme())
+    setColorValues(colors.map(getCurrentThemeColor))
     return () => {
       disposable.dispose()
     }
-  }, [themeService])
+  }, [colors])
 
-  return theme
+  return colorValues
 }
 
 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 { useColorTheme, useUserConfiguration } from './hooks'
+import { useThemeColors, useUserConfiguration } from './hooks'
 import MonacoEditor, { MonacoEditorProps } from './MonacoEditor'
 
 export default MonacoEditor
 export {
   monaco,
-  useColorTheme,
+  useThemeColors,
   useUserConfiguration,
   updateKeybindings,
   updateUserConfiguration,