fixed settings icon theme change bug

apps/remix-ide/src/app/components/vertical-icons.js

@@ -163,6 +163,15 @@ export class VerticalIcons extends Plugin {
     this.events.emit('showContent', name)
   }
 
+  onThemeChanged (themeType) {
+    const invert = themeType === 'dark' ? 1 : 0
+    const active = this.view.querySelector('.active')
+    if (active) {
+      const image = active.querySelector('.image')
+      image.style.setProperty('filter', `invert(${invert})`)
+    }
+  }
+
   /**
    * Toggles the side panel for plugin
    * @param {string} name Name of profile of the module to activate

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

@@ -1,7 +1,7 @@
 /* eslint-disable no-use-before-define */
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
-import React, { useEffect } from 'react'
+import React, { useEffect, useRef } from 'react'
 import { Chevron } from './Chevron'
 import Icon from './Icon'
 
@@ -11,25 +11,30 @@ interface SettingsProps {
   addActive: (name: string) => void
   removeActive: () => void
   scrollableRef: React.MutableRefObject<any>
-  onThemeChanged: (themeType: any) => void
 }
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-function Settings ({ scrollableRef, verticalIconsPlugin, itemContextAction, addActive, removeActive, onThemeChanged }: SettingsProps) {
-  useEffect(() => {
-    // const themeModule = verticalIconsPlugin.registry.get('themeModule').api
-    // themeModule.events.on('themeChanged', (theme: any) => {
-    //   onThemeChanged(theme.quality)
-    // })
-    return () => {
-      document.addEventListener('themeChanged', (theme: any) => {
-        // onThemeChanged(theme.quality)
-        console.log('this is what theme contains', theme)
-      })
+function Settings ({ scrollableRef, verticalIconsPlugin, itemContextAction, addActive, removeActive }: SettingsProps) {
+  const settingsRef = useRef(null)
+  function onThemeChanged (themeType: any) {
+    const invert = themeType === 'dark' ? 1 : 0
+    // @ts-ignore
+    const active = settingsRef.current.querySelector('.active')
+    if (active) {
+      // @ts-ignore
+      const image = settingsRef.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)
+      console.log('There was a theme change and is caught in settings. This is the theme payload ', theme)
+    })
+  }, [])
   return (
-    <div id="settingsIcons" data-id="vertialIconsSettingsIcons">
+    <div id="settingsIcons" data-id="vertialIconsSettingsIcons" ref={settingsRef}>
       <Chevron
         divElementRef={scrollableRef}
         cssRule={'fa fa-chevron-down remixui_icon-chevron mt-0 mb-0 ml-1 pl-3'}

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

@@ -76,6 +76,7 @@ export function RemixUiVerticalIconsPanel ({
     const themeModule = verticalIconsPlugin.registry.get('themeModule').api
     themeModule.events.on('themeChanged', (theme: any) => {
       onThemeChanged(theme.quality)
+      console.log('There was a theme change. This is the theme payload ', theme)
     })
   }, [])
 
@@ -83,6 +84,7 @@ export function RemixUiVerticalIconsPanel ({
     const themeModule = verticalIconsPlugin.registry.get('themeModule').api
     themeModule.events.on('themeChanged', (theme: any) => {
       onThemeChanged(theme.quality)
+      console.log('There was a theme change. This is the theme payload ', theme)
     })
   }, [])
 
@@ -130,7 +132,6 @@ export function RemixUiVerticalIconsPanel ({
                 removeActive={removeActive}
                 itemContextAction={itemContextAction}
                 scrollableRef={scrollableRef}
-                onThemeChanged={onThemeChanged}
               />
             </Fragment>
           ) : null}