clean up changes to switchTheme

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

@@ -110,7 +110,10 @@ export class ThemeModule extends Plugin {
     const nextTheme = this.themes[next] // Theme
     if (!this.forced) this._deps.config.set('settings/theme', next)
     document.getElementById('theme-link').remove()
-    const theme = yo`<link rel="stylesheet" href="${nextTheme.url}" id="theme-link"/>`
+    const theme = document.createElement('link')
+    theme.rel = 'stylesheet'
+    theme.id = 'theme-link'
+    theme.href = nextTheme.url
     theme.addEventListener('load', () => {
       this.emit('themeLoaded', nextTheme)
       this.events.emit('themeLoaded', nextTheme)

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

@@ -65,11 +65,6 @@ export const RemixUiSettings = (props: RemixUiSettingsProps) => {
     useMatomoAnalytics(props.config, event.target.checked, dispatch)
   }
 
-  // const onswitchTheme = (event, name) => {
-  //   props._deps.themeModule.switchTheme(name)
-  //   setThemeName(name)
-  // }
-
   const getTextClass = (key) => {
     if (props.config.get(key)) {
       return textDark
@@ -156,20 +151,6 @@ export const RemixUiSettings = (props: RemixUiSettingsProps) => {
     </div>
   )
 
-  // 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>
-  //     )
-  //     )
-  //   }
-  // }
-
   return (
     <div>
       {state.message ? <Toaster message= {state.message}/> : null}

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

@@ -63,66 +63,8 @@ export function RemixUiThemeModule({ themeModule }: RemixUiThemeModuleProps) {
   const themeRef = useRef<any>(null);
 
   useEffect(() => {
-    themeModule.switchTheme();
+      themeModule.switchTheme()
   }, [themeName, themeModule]);
-  /**
-   * Change the current theme
-   * @param {string} [themeName] - The name of the theme
-   */
-  function switchTheme(themeName: string) {
-    if (themeName && !Object.keys(themes).includes(themeName)) {
-      throw new Error(`Theme ${themeName} doesn't exist`);
-    }
-    const next = themeName || this.active; // Name
-    if (next === this.active) return;
-    themeModule._paq.push(['trackEvent', 'themeModule', 'switchTo', next]);
-    const nextTheme = themeModule.themes[next]; // Theme
-    if (!themeModule.forced)
-      themeModule._deps.config.set('settings/theme', next);
-    document.getElementById('theme-link').remove();
-    const theme = yo`<link rel="stylesheet" href="${nextTheme.url}" id="theme-link"/>`;
-    theme.addEventListener('load', () => {
-      themeModule.emit('themeLoaded', nextTheme);
-      themeModule.events.emit('themeLoaded', nextTheme);
-    });
-    document.head.insertBefore(theme, document.head.firstChild);
-    document.documentElement.style.setProperty('--theme', nextTheme.quality);
-    if (themeName) themeModule.active = themeName;
-    // TODO: Only keep `this.emit` (issue#2210)
-    themeModule.emit('themeChanged', nextTheme);
-    themeModule.events.emit('themeChanged', nextTheme);
-  }
-
-  function ThemeHead() {
-    const [nextTheme, setNextTheme] = useState<any>();
-    const linkRef = useRef<any>(null);
-    useEffect(() => {
-      const shell = document.querySelector('div[data-id="remixIDE"]') as any;
-      const splashScreen = document.querySelector(
-        'div[data-id="remixIDESplash"]'
-      ) as Node;
-      const callback = () => {
-        // setTimeout(() => {
-        //   document.body.removeChild(splashScreen)
-        //   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        //   shell!.style.visibility = 'visible'
-        // }, 1500)
-      };
-      document.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">

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

@@ -10,6 +10,8 @@ export class ThemeModule extends Plugin<any, any> {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         config: any;
     };
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    _paq: any
     element: HTMLDivElement;
     // eslint-disable-next-line @typescript-eslint/ban-types
     themes: {[key: string]: Theme};