active class update for filepanel

libs/remix-ui/vertical-icons-panel/src/lib/components/FilePanel.tsx

@@ -1,6 +1,6 @@
 import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
 // eslint-disable-next-line no-use-before-define
-import React, { Fragment } from 'react'
+import React, { Fragment, useEffect, useRef } from 'react'
 import Icon from './Icon'
 
 interface FilePanelProps {
@@ -11,6 +11,25 @@ interface FilePanelProps {
 }
 
 function FilePanel ({ verticalIconsPlugin, itemContextAction, addActive, removeActive }: FilePanelProps) {
+  const filePanelRef = useRef(null)
+  function onThemeChanged (themeType: any) {
+    const invert = themeType === 'dark' ? 1 : 0
+    // @ts-ignore
+    const active = filePanelRef.current && filePanelRef.current.querySelector('.active')
+    if (active) {
+      // @ts-ignore
+      const image = filePanelRef.current.querySelector('.remixui_image')
+      image.style.setProperty('filter', `invert(${invert})`)
+    }
+  }
+
+  useEffect(() => {
+    const themeModule = verticalIconsPlugin.registry.get('themeModule').api
+    themeModule.events.on('themeChanged', (theme: any) => {
+      onThemeChanged(theme.quality)
+    })
+  }, [])
+
   return (
     <Fragment>
       {verticalIconsPlugin.targetProfileForChange &&
@@ -20,7 +39,9 @@ function FilePanel ({ verticalIconsPlugin, itemContextAction, addActive, removeA
           .map(p => (
             <div id="fileExplorerIcons" key={
               verticalIconsPlugin.targetProfileForChange[p].displayName
-            } data-id="verticalIconsFileExplorerIcons">
+            } data-id="verticalIconsFileExplorerIcons"
+            ref={filePanelRef}
+            >
               <Icon
                 kind={verticalIconsPlugin.targetProfileForChange[p].kind}
                 displayName={

package-lock.json

@@ -35941,16 +35941,6 @@
         "es-abstract": "^1.19.1"
       }
     },
-    "object.hasown": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/object.hasown/-/object.hasown-1.1.0.tgz",
-      "integrity": "sha512-MhjYRfj3GBlhSkDHo6QmvgjRLXQ2zndabdf3nX0yTyZK9rPfxb6uRpAac8HXNLy1GpqWtZ81Qh4v3uOls2sRAg==",
-      "dev": true,
-      "requires": {
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.19.1"
-      }
-    },
     "object.map": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/object.map/-/object.map-1.0.1.tgz",