more workon theme module

apps/remix-ide/src/app/tabs/theme-module.js

@@ -47,6 +47,7 @@ export class ThemeModule extends Plugin {
     queryTheme = this.themes[queryTheme] ? queryTheme : null
     let currentTheme = this._deps.config.get('settings/theme')
     currentTheme = this.themes[currentTheme] ? currentTheme : null
+    this.currentThemeState = { queryTheme, currentTheme }
     this.active = queryTheme || currentTheme || 'Dark'
     this.forced = !!queryTheme
   }
@@ -81,7 +82,7 @@ export class ThemeModule extends Plugin {
   /**
    * Init the theme
    */
-  initTheme (callback) {
+  initTheme (callback) { // callback is setTimeOut in app.js which is always passed
     if (this.active) {
       const nextTheme = this.themes[this.active] // Theme
       document.documentElement.style.setProperty('--theme', nextTheme.quality)

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

@@ -23,10 +23,8 @@ export const RemixUiSettings = (props: RemixUiSettingsProps) => {
   const [, dispatch] = useReducer(settingReducer, initialState)
   const [state, dispatchToast] = useReducer(toastReducer, toastInitialState)
   const [tokenValue, setTokenValue] = useState('')
-  const [themeName, setThemeName] = useState('')
 
   useEffect(() => {
-    props._deps.themeModule.switchTheme()
     const token = props.config.get('settings/gist-access-token')
     if (token === undefined) {
       props.config.set('settings/generate-contract-metadata', true)
@@ -35,7 +33,7 @@ export const RemixUiSettings = (props: RemixUiSettingsProps) => {
     if (token) {
       setTokenValue(token)
     }
-  }, [themeName, state.message])
+  }, [state.message])
 
   useEffect(() => {
     if (props.useMatomoAnalytics !== null) useMatomoAnalytics(props.config, props.useMatomoAnalytics, dispatch)
@@ -67,10 +65,10 @@ export const RemixUiSettings = (props: RemixUiSettingsProps) => {
     useMatomoAnalytics(props.config, event.target.checked, dispatch)
   }
 
-  const onswitchTheme = (event, name) => {
-    props._deps.themeModule.switchTheme(name)
-    setThemeName(name)
-  }
+  // const onswitchTheme = (event, name) => {
+  //   props._deps.themeModule.switchTheme(name)
+  //   setThemeName(name)
+  // }
 
   const getTextClass = (key) => {
     if (props.config.get(key)) {
@@ -159,18 +157,18 @@ export const RemixUiSettings = (props: RemixUiSettingsProps) => {
   )
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const themes = () => {
-    const themes = props._deps.themeModule.getThemes()
-    if (themes) {
-      return themes.map((aTheme, index) => (
-        <div className="radio custom-control custom-radio mb-1 form-check" key={index}>
-          <input type="radio" onChange={event => { onswitchTheme(event, aTheme.name) }} className="align-middle custom-control-input" name='theme' id={aTheme.name} data-id={`settingsTabTheme${aTheme.name}`} checked = {props._deps.themeModule.active === aTheme.name }/>
-          <label className="form-check-label custom-control-label" data-id={`settingsTabThemeLabel${aTheme.name}`} htmlFor={aTheme.name}>{aTheme.name} ({aTheme.quality})</label>
-        </div>
-      )
-      )
-    }
-  }
+  // const themes = () => {
+  //   const themes = props._deps.themeModule.getThemes()
+  //   if (themes) {
+  //     return themes.map((aTheme, index) => (
+  //       <div className="radio custom-control custom-radio mb-1 form-check" key={index}>
+  //         <input type="radio" onChange={event => { onswitchTheme(event, aTheme.name) }} className="align-middle custom-control-input" name='theme' id={aTheme.name} data-id={`settingsTabTheme${aTheme.name}`} checked = {props._deps.themeModule.active === aTheme.name }/>
+  //         <label className="form-check-label custom-control-label" data-id={`settingsTabThemeLabel${aTheme.name}`} htmlFor={aTheme.name}>{aTheme.name} ({aTheme.quality})</label>
+  //       </div>
+  //     )
+  //     )
+  //   }
+  // }
 
   return (
     <div>

libs/remix-ui/theme-module/src/lib/remix-ui-theme-module.tsx

@@ -1,4 +1,5 @@
-import React from 'react'
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React, { useEffect, useRef, useState } from 'react'
 import { ThemeModule } from '../../types/theme-module'
 import './remix-ui-theme-module.module.css'
 
@@ -8,25 +9,50 @@ export interface RemixUiThemeModuleProps {
 }
 
 export function RemixUiThemeModule({ themeModule }: RemixUiThemeModuleProps) {
-  const themes = () => {
-    const themes = themeModule.getThemes()
-    if (themes) {
-      return themes.map((aTheme, index) => (
-        <div className="radio custom-control custom-radio mb-1 form-check" key={index}>
-          <input type="radio" onChange={event => { themeModule.switchTheme(aTheme.name) }} className="align-middle custom-control-input" name='theme' id={aTheme.name} data-id={`settingsTabTheme${aTheme.name}`} checked = {themeModule.active === aTheme.name }/>
-          <label className="form-check-label custom-control-label" data-id={`settingsTabThemeLabel${aTheme.name}`} htmlFor={aTheme.name}>{aTheme.name} ({aTheme.quality})</label>
-        </div>
-      )
-      )
+  const [themeName, setThemeName] = useState('')
+
+  useEffect(() => {
+    themeModule.switchTheme()
+  }, [themeName, themeModule])
+
+  function ThemeHead () {
+    const [nextTheme, setNextTheme] = useState<any>()
+    const linkRef = useRef<any>(null)
+    function initTheme (callback: () => void) {
+      // const theme = yo`<link rel="stylesheet" href="${nextTheme.url}" id="theme-link"/>`
+    if (themeModule.active) {
+      setNextTheme(themeModule.themes[themeModule.active]) // Theme
+      document.documentElement.style.setProperty('--theme', nextTheme.quality)
     }
-    return
   }
+  useEffect(() => {
+    const callback = () => {
+      setTimeout(() => {
+        document.body.removeChild(self._view.splashScreen)
+        self._view.el.style.visibility = 'visible'
+      }, 1500)
+    addEventListener('load', () => {
+        if (callback) callback()
+      })
+      document.head.insertBefore(linkRef.current, document.head.firstChild)
+  }, [])
+    return (
+      <link rel="stylesheet" href={nextTheme.url} ref={linkRef} id="theme-link"/>
+    )
+  }
+
   return (
     <div className="border-top">
         <div className="card-body pt-3 pb-2">
           <h6 className="card-title">Themes Module</h6>
           <div className="card-text themes-container">
-            <h1>Welcome to remix-ui-theme-module!</h1>
+            {themeModule.getThemes() ? themeModule.getThemes().map((theme, idx) => (
+              <div className="radio custom-control custom-radio mb-1 form-check" key={idx}>
+                <input type="radio" onChange={event => { themeModule.switchTheme(theme.name); setThemeName(theme.name) }} className="align-middle custom-control-input" name='theme' id={theme.name} data-id={`settingsTabTheme${theme.name}`} checked = {themeModule.active === theme.name }/>
+                <label className="form-check-label custom-control-label" data-id={`settingsTabThemeLabel${theme.name}`} htmlFor={theme.name}>{theme.name} ({theme.quality})</label>
+              </div>
+              )) : null
+            }
           </div>
         </div>
       </div>

libs/remix-ui/theme-module/types/theme-module.d.ts

@@ -2,6 +2,7 @@ import { Plugin } from "@remixproject/engine/lib/abstract";
 import { EventEmitter } from "events";
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export class ThemeModule extends Plugin<any, any> {
+    currentThemeState: Record<string, unknown>;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     constructor(registry: any);
     events: EventEmitter;
@@ -11,9 +12,9 @@ export class ThemeModule extends Plugin<any, any> {
     };
     element: HTMLDivElement;
     // eslint-disable-next-line @typescript-eslint/ban-types
-    themes: {};
+    themes: {[key: string]: Theme};
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    active: any;
+    active: string;
     forced: boolean;
     render(): HTMLDivElement;
     renderComponent(): void;
@@ -22,7 +23,7 @@ export class ThemeModule extends Plugin<any, any> {
     currentTheme(): any;
     /** Returns all themes as an array */
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    getThemes(): any[];
+    getThemes(): Theme[];
     /**
      * Init the theme
      */
@@ -40,3 +41,5 @@ export class ThemeModule extends Plugin<any, any> {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     fixInvert(image?: any): void;
 }
+
+interface Theme { name: string, quality: string, url: string }