fixed color of tab icons for theme change

apps/remix-ide/src/app/panels/tab-proxy.js

@@ -22,12 +22,14 @@ export class TabProxy extends Plugin {
     this.loadedTabs = []
     this.el = document.createElement('div')
     this.dispatch = null
+    this.themeQuality = 'dark'
   }
 
   onActivation () {
     this.on('theme', 'themeChanged', (theme) => {
+      this.themeQuality = theme.quality
       // update invert for all icons
-      this.updateImgStyles()
+      this.renderComponent()
     })
 
     this.on('fileManager', 'filesAllClosed', () => {
@@ -157,13 +159,6 @@ export class TabProxy extends Plugin {
     this.tabsApi.activateTab(name)
   }
 
-  updateImgStyles () {
-    const images = this.el.getElementsByClassName('iconImage')
-    for (const element of images) {
-      this.call('theme', 'fixInvert', element)
-    }
-  }
-
   switchTab (tabName) {
     if (this._handlers[tabName]) {
       this._handlers[tabName].switchTo()
@@ -265,7 +260,6 @@ export class TabProxy extends Plugin {
     }
 
     this.renderComponent()
-    this.updateImgStyles()
     this._handlers[name] = { switchTo, close }
   }
 
@@ -277,7 +271,6 @@ export class TabProxy extends Plugin {
       return tab.name !== name
     })
     this.renderComponent()
-    this.updateImgStyles()
     if (previous) this.switchTab(previous.name)
   }
 
@@ -291,7 +284,7 @@ export class TabProxy extends Plugin {
   }
 
   updateComponent(state) {
-    return <TabsUI tabs={state.loadedTabs} onSelect={state.onSelect} onClose={state.onClose} onZoomIn={state.onZoomIn} onZoomOut={state.onZoomOut} onReady={state.onReady} />
+    return <TabsUI tabs={state.loadedTabs} onSelect={state.onSelect} onClose={state.onClose} onZoomIn={state.onZoomIn} onZoomOut={state.onZoomOut} onReady={state.onReady} themeQuality={state.themeQuality} />
   }
 
   renderComponent () {
@@ -322,7 +315,8 @@ export class TabProxy extends Plugin {
       onClose,
       onZoomIn,
       onZoomOut,
-      onReady
+      onReady,
+      themeQuality: this.themeQuality
     })
   }
 

libs/remix-ui/tabs/src/lib/remix-ui-tabs.tsx

@@ -10,6 +10,7 @@ export interface TabsUIProps {
  onZoomOut: () => void
  onZoomIn: () => void
  onReady: (api: any) => void
+ themeQuality: "dark"
 }
 
 export interface TabsUIApi {
@@ -35,9 +36,11 @@ export const TabsUI = (props: TabsUIProps) => {
   const renderTab = (tab, index) => {
     const classNameImg = 'my-1 mr-1 text-dark ' + tab.iconClass
     const classNameTab = 'nav-item nav-link d-flex justify-content-center align-items-center px-2 py-1 tab' + (index === currentIndexRef.current ? ' active' : '')
+    const invert = props.themeQuality === 'dark' ? 'invert(1)' : 'invert(0)'
+
     return (
       <div ref={el => { tabsRef.current[index] = el }} className={classNameTab} data-id={index === currentIndexRef.current ? 'tab-active' : ''} title={tab.tooltip}>
-        {tab.icon ? (<img className="my-1 mr-1 iconImage" src={tab.icon} />) : (<i className={classNameImg}></i>)}
+        {tab.icon ? (<img className="my-1 mr-1 iconImage" style={{filter: invert}} src={tab.icon} />) : (<i className={classNameImg}></i>)}
         <span className="title-tabs">{tab.title}</span>
         <span className="close-tabs" onClick={(event) => { props.onClose(index); event.stopPropagation() }}>
           <i className="text-dark fas fa-times"></i>