diff --git a/apps/remix-ide/src/app/tabs/theme-module.js b/apps/remix-ide/src/app/tabs/theme-module.js
index d66ed07854..e973bdd2f9 100644
--- a/apps/remix-ide/src/app/tabs/theme-module.js
+++ b/apps/remix-ide/src/app/tabs/theme-module.js
@@ -35,15 +35,17 @@ 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
+    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'
+    this.active = queryTheme || currentTheme || 'dark'
     this.forced = !!queryTheme
   }
 
@@ -82,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()}
                   />
                   <label
                     className="form-check-label custom-control-label"