Merge branch 'master' into rememberfix

pull/1947/head
David Disu 3 years ago committed by GitHub
commit 36bef5d5fa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 7
      apps/remix-ide/src/app/tabs/theme-module.js
  2. 51
      libs/remix-ui/theme-module/src/lib/remix-ui-theme-module.tsx

@ -35,15 +35,17 @@ export class ThemeModule extends Plugin {
} }
this.themes = themes.reduce((acc, theme) => { this.themes = themes.reduce((acc, theme) => {
theme.url = window.location.origin + window.location.pathname + theme.url theme.url = window.location.origin + window.location.pathname + theme.url
return { ...acc, [theme.name]: theme } return { ...acc, [theme.name.toLocaleLowerCase()]: theme }
}, {}) }, {})
this._paq = _paq this._paq = _paq
let queryTheme = (new QueryParams()).get().theme let queryTheme = (new QueryParams()).get().theme
queryTheme = queryTheme && queryTheme.toLocaleLowerCase()
queryTheme = this.themes[queryTheme] ? queryTheme : null queryTheme = this.themes[queryTheme] ? queryTheme : null
let currentTheme = this._deps.config.get('settings/theme') let currentTheme = this._deps.config.get('settings/theme')
currentTheme = currentTheme && currentTheme.toLocaleLowerCase()
currentTheme = this.themes[currentTheme] ? currentTheme : null currentTheme = this.themes[currentTheme] ? currentTheme : null
this.currentThemeState = { queryTheme, currentTheme } this.currentThemeState = { queryTheme, currentTheme }
this.active = queryTheme || currentTheme || 'Dark' this.active = queryTheme || currentTheme || 'dark'
this.forced = !!queryTheme this.forced = !!queryTheme
} }
@ -82,6 +84,7 @@ export class ThemeModule extends Plugin {
* @param {string} [themeName] - The name of the theme * @param {string} [themeName] - The name of the theme
*/ */
switchTheme (themeName) { switchTheme (themeName) {
themeName = themeName && themeName.toLocaleLowerCase()
if (themeName && !Object.keys(this.themes).includes(themeName)) { if (themeName && !Object.keys(this.themes).includes(themeName)) {
throw new Error(`Theme ${themeName} doesn't exist`) throw new Error(`Theme ${themeName} doesn't exist`)
} }

@ -8,55 +8,6 @@ export interface RemixUiThemeModuleProps {
themeModule: ThemeModule; 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) { export function RemixUiThemeModule({ themeModule }: RemixUiThemeModuleProps) {
const [themeName, setThemeName] = useState('') const [themeName, setThemeName] = useState('')
@ -85,7 +36,7 @@ export function RemixUiThemeModule({ themeModule }: RemixUiThemeModuleProps) {
name="theme" name="theme"
id={theme.name} id={theme.name}
data-id={`settingsTabTheme${theme.name}`} data-id={`settingsTabTheme${theme.name}`}
checked={themeModule.active === theme.name} checked={themeModule.active === theme.name.toLocaleLowerCase()}
/> />
<label <label
className="form-check-label custom-control-label" className="form-check-label custom-control-label"

Loading…
Cancel
Save