From 5cc598cffcae9b8783f4dccbdcd735b02f5d4173 Mon Sep 17 00:00:00 2001 From: yann300 Date: Thu, 13 Jan 2022 11:23:30 +0100 Subject: [PATCH 1/2] fix theme parameter being case sensitive --- apps/remix-ide/src/app/tabs/theme-module.js | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/apps/remix-ide/src/app/tabs/theme-module.js b/apps/remix-ide/src/app/tabs/theme-module.js index d66ed07854..3349e4c53b 100644 --- a/apps/remix-ide/src/app/tabs/theme-module.js +++ b/apps/remix-ide/src/app/tabs/theme-module.js @@ -6,16 +6,16 @@ import Registry from '../state/registry' const _paq = window._paq = window._paq || [] const themes = [ - { name: 'Dark', quality: 'dark', url: 'assets/css/themes/remix-dark_tvx1s2.css' }, - { name: 'Light', quality: 'light', url: 'assets/css/themes/remix-light_powaqg.css' }, - { name: 'Midcentury', quality: 'light', url: 'assets/css/themes/remix-midcentury_hrzph3.css' }, - { name: 'Black', quality: 'dark', url: 'assets/css/themes/remix-black_undtds.css' }, - { name: 'Candy', quality: 'light', url: 'assets/css/themes/remix-candy_ikhg4m.css' }, + { name: 'dark', quality: 'dark', url: 'assets/css/themes/remix-dark_tvx1s2.css' }, + { name: 'light', quality: 'light', url: 'assets/css/themes/remix-light_powaqg.css' }, + { name: 'midcentury', quality: 'light', url: 'assets/css/themes/remix-midcentury_hrzph3.css' }, + { name: 'black', quality: 'dark', url: 'assets/css/themes/remix-black_undtds.css' }, + { name: 'candy', quality: 'light', url: 'assets/css/themes/remix-candy_ikhg4m.css' }, - { name: 'Cerulean', quality: 'light', url: 'assets/css/themes/bootstrap-cerulean.min.css' }, - { name: 'Flatly', quality: 'light', url: 'assets/css/themes/bootstrap-flatly.min.css' }, - { name: 'Spacelab', quality: 'light', url: 'assets/css/themes/bootstrap-spacelab.min.css' }, - { name: 'Cyborg', quality: 'dark', url: 'assets/css/themes/bootstrap-cyborg.min.css' } + { name: 'cerulean', quality: 'light', url: 'assets/css/themes/bootstrap-cerulean.min.css' }, + { name: 'flatly', quality: 'light', url: 'assets/css/themes/bootstrap-flatly.min.css' }, + { name: 'spacelab', quality: 'light', url: 'assets/css/themes/bootstrap-spacelab.min.css' }, + { name: 'cyborg', quality: 'dark', url: 'assets/css/themes/bootstrap-cyborg.min.css' } ] const profile = { @@ -39,8 +39,10 @@ export class ThemeModule extends Plugin { }, {}) this._paq = _paq let queryTheme = (new QueryParams()).get().theme + queryTheme = queryTheme && queryTheme.toLocaleLowerCase() queryTheme = this.themes[queryTheme] ? queryTheme : null let currentTheme = this._deps.config.get('settings/theme') + currentTheme = currentTheme && currentTheme.toLocaleLowerCase() currentTheme = this.themes[currentTheme] ? currentTheme : null this.currentThemeState = { queryTheme, currentTheme } this.active = queryTheme || currentTheme || 'Dark' From 1e0d479ac2b2e8c5762988889a7f6a4f80f4fac1 Mon Sep 17 00:00:00 2001 From: yann300 Date: Thu, 13 Jan 2022 12:16:17 +0100 Subject: [PATCH 2/2] fix lower casing the theme&& remove unneded --- apps/remix-ide/src/app/tabs/theme-module.js | 23 +++++---- .../src/lib/remix-ui-theme-module.tsx | 51 +------------------ 2 files changed, 13 insertions(+), 61 deletions(-) diff --git a/apps/remix-ide/src/app/tabs/theme-module.js b/apps/remix-ide/src/app/tabs/theme-module.js index 3349e4c53b..e973bdd2f9 100644 --- a/apps/remix-ide/src/app/tabs/theme-module.js +++ b/apps/remix-ide/src/app/tabs/theme-module.js @@ -6,16 +6,16 @@ import Registry from '../state/registry' const _paq = window._paq = window._paq || [] const themes = [ - { name: 'dark', quality: 'dark', url: 'assets/css/themes/remix-dark_tvx1s2.css' }, - { name: 'light', quality: 'light', url: 'assets/css/themes/remix-light_powaqg.css' }, - { name: 'midcentury', quality: 'light', url: 'assets/css/themes/remix-midcentury_hrzph3.css' }, - { name: 'black', quality: 'dark', url: 'assets/css/themes/remix-black_undtds.css' }, - { name: 'candy', quality: 'light', url: 'assets/css/themes/remix-candy_ikhg4m.css' }, + { name: 'Dark', quality: 'dark', url: 'assets/css/themes/remix-dark_tvx1s2.css' }, + { name: 'Light', quality: 'light', url: 'assets/css/themes/remix-light_powaqg.css' }, + { name: 'Midcentury', quality: 'light', url: 'assets/css/themes/remix-midcentury_hrzph3.css' }, + { name: 'Black', quality: 'dark', url: 'assets/css/themes/remix-black_undtds.css' }, + { name: 'Candy', quality: 'light', url: 'assets/css/themes/remix-candy_ikhg4m.css' }, - { name: 'cerulean', quality: 'light', url: 'assets/css/themes/bootstrap-cerulean.min.css' }, - { name: 'flatly', quality: 'light', url: 'assets/css/themes/bootstrap-flatly.min.css' }, - { name: 'spacelab', quality: 'light', url: 'assets/css/themes/bootstrap-spacelab.min.css' }, - { name: 'cyborg', quality: 'dark', url: 'assets/css/themes/bootstrap-cyborg.min.css' } + { name: 'Cerulean', quality: 'light', url: 'assets/css/themes/bootstrap-cerulean.min.css' }, + { name: 'Flatly', quality: 'light', url: 'assets/css/themes/bootstrap-flatly.min.css' }, + { name: 'Spacelab', quality: 'light', url: 'assets/css/themes/bootstrap-spacelab.min.css' }, + { name: 'Cyborg', quality: 'dark', url: 'assets/css/themes/bootstrap-cyborg.min.css' } ] const profile = { @@ -35,7 +35,7 @@ export class ThemeModule extends Plugin { } this.themes = themes.reduce((acc, theme) => { theme.url = window.location.origin + window.location.pathname + theme.url - return { ...acc, [theme.name]: theme } + return { ...acc, [theme.name.toLocaleLowerCase()]: theme } }, {}) this._paq = _paq let queryTheme = (new QueryParams()).get().theme @@ -45,7 +45,7 @@ export class ThemeModule extends Plugin { currentTheme = currentTheme && currentTheme.toLocaleLowerCase() currentTheme = this.themes[currentTheme] ? currentTheme : null this.currentThemeState = { queryTheme, currentTheme } - this.active = queryTheme || currentTheme || 'Dark' + this.active = queryTheme || currentTheme || 'dark' this.forced = !!queryTheme } @@ -84,6 +84,7 @@ export class ThemeModule extends Plugin { * @param {string} [themeName] - The name of the theme */ switchTheme (themeName) { + themeName = themeName && themeName.toLocaleLowerCase() if (themeName && !Object.keys(this.themes).includes(themeName)) { throw new Error(`Theme ${themeName} doesn't exist`) } diff --git a/libs/remix-ui/theme-module/src/lib/remix-ui-theme-module.tsx b/libs/remix-ui/theme-module/src/lib/remix-ui-theme-module.tsx index 92002f3a66..9a8e22143c 100644 --- a/libs/remix-ui/theme-module/src/lib/remix-ui-theme-module.tsx +++ b/libs/remix-ui/theme-module/src/lib/remix-ui-theme-module.tsx @@ -8,55 +8,6 @@ export interface RemixUiThemeModuleProps { themeModule: ThemeModule; } -const defaultThemes = [ - { - name: 'Dark', - quality: 'dark', - url: 'assets/css/themes/remix-dark_tvx1s2.css' - }, - { - name: 'Light', - quality: 'light', - url: 'assets/css/themes/remix-light_powaqg.css' - }, - { - name: 'Midcentury', - quality: 'light', - url: 'assets/css/themes/remix-midcentury_hrzph3.css' - }, - { - name: 'Black', - quality: 'dark', - url: 'assets/css/themes/remix-black_undtds.css' - }, - { - name: 'Candy', - quality: 'light', - url: 'assets/css/themes/remix-candy_ikhg4m.css' - }, - - { - name: 'Cerulean', - quality: 'light', - url: 'assets/css/themes/bootstrap-cerulean.min.css' - }, - { - name: 'Flatly', - quality: 'light', - url: 'assets/css/themes/bootstrap-flatly.min.css' - }, - { - name: 'Spacelab', - quality: 'light', - url: 'assets/css/themes/bootstrap-spacelab.min.css' - }, - { - name: 'Cyborg', - quality: 'dark', - url: 'assets/css/themes/bootstrap-cyborg.min.css' - } -]; - export function RemixUiThemeModule({ themeModule }: RemixUiThemeModuleProps) { const [themeName, setThemeName] = useState('') @@ -85,7 +36,7 @@ export function RemixUiThemeModule({ themeModule }: RemixUiThemeModuleProps) { name="theme" id={theme.name} data-id={`settingsTabTheme${theme.name}`} - checked={themeModule.active === theme.name} + checked={themeModule.active === theme.name.toLocaleLowerCase()} />