Make the hook only return 1 color

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, useThemeColors } from './hooks'
+import { useDeepMemo, useLastValueRef, useLastVersion, useThemeColor } from './hooks'
 import './style'
 
 const STATUS_BAR_HEIGHT = 20
@@ -123,7 +123,9 @@ function MonacoEditor ({
   const preventTriggerChangeEventRef = useRef<boolean>(false)
 
   const [height, setHeight] = useState<number | string>(requestedHeight !== 'auto' ? requestedHeight : 50)
-  const [statusBarBackground, statusBarForeground, statusBarBorder] = useThemeColors(['statusBar.background', 'statusBar.foreground', 'statusBar.border'])
+  const statusBarBackground = useThemeColor('statusBar.background')
+  const statusBarForeground = useThemeColor('statusBar.foreground')
+  const statusBarBorder = useThemeColor('statusBar.border')
 
   const containerRef = useRef<HTMLDivElement>(null)
   const statusBarRef = useRef<HTMLDivElement>(null)

src/hooks.ts

@@ -8,21 +8,21 @@ function getCurrentThemeColor (color: string): string | undefined {
   return themeService.getColorTheme().getColor(color)?.toString()
 }
 
-export function useThemeColors (colors: string[]): (string | undefined)[] {
-  const [colorValues, setColorValues] = useState(colors.map(getCurrentThemeColor))
+export function useThemeColor (color: string): string | undefined {
+  const [colorValue, setColorValue] = useState(getCurrentThemeColor(color))
   useEffect(() => {
     const disposable = StandaloneServices.get(IThemeService).onDidColorThemeChange(() => {
-      setColorValues(colors.map(getCurrentThemeColor))
+      setColorValue(getCurrentThemeColor(color))
     })
     // Since useEffect is asynchronous, the theme may have changed between the initialization of state and now
     // Let's update the state just in case
-    setColorValues(colors.map(getCurrentThemeColor))
+    setColorValue(getCurrentThemeColor(color))
     return () => {
       disposable.dispose()
     }
-  }, [colors])
+  }, [color])
 
-  return colorValues
+  return colorValue
 }
 
 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 { useThemeColors, useUserConfiguration } from './hooks'
+import { useThemeColor, useUserConfiguration } from './hooks'
 import MonacoEditor, { MonacoEditorProps } from './MonacoEditor'
 
 export default MonacoEditor
 export {
   monaco,
-  useThemeColors,
+  useThemeColor,
   useUserConfiguration,
   updateKeybindings,
   updateUserConfiguration,