Skip to content

Commit

Permalink
clean up changes to switchTheme
Browse files Browse the repository at this point in the history
  • Loading branch information
joeizang committed Dec 10, 2021
1 parent 63bca4a commit 7391393
Show file tree
Hide file tree
Showing 4 changed files with 7 additions and 79 deletions.
5 changes: 4 additions & 1 deletion apps/remix-ide/src/app/tabs/theme-module.js
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
19 changes: 0 additions & 19 deletions libs/remix-ui/settings/src/lib/remix-ui-settings.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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}
Expand Down
60 changes: 1 addition & 59 deletions libs/remix-ui/theme-module/src/lib/remix-ui-theme-module.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
2 changes: 2 additions & 0 deletions libs/remix-ui/theme-module/types/theme-module.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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};
Expand Down

0 comments on commit 7391393

Please sign in to comment.