�� Refactor CSS to use constants for media queries

src/components/Settings/KeyboardShortcutInfo.vue

@@ -65,6 +65,8 @@ export default {
 
 <style scoped lang="scss">
 
+@import '@/styles/media-queries.scss';
+
 .kb-sc-info {
   position: fixed;
   width: 30em;
@@ -82,7 +84,7 @@ export default {
   background: var(--background-darker);
   cursor: default;
   opacity: 0.94;
-  @media screen and (max-width: 600px) {
+  @include phone {
     display: none;
   }
   h5 { /* The dialog title */

src/components/Settings/SettingsContainer.vue

@@ -50,8 +50,11 @@ export default {
     getInitialTheme() {
       return this.appConfig.theme || '';
     },
+    /* Gets user themes if available */
     getUserThemes() {
-      return this.appConfig.cssThemes || [];
+      const userThemes = this.appConfig.cssThemes || [];
+      if (typeof userThemes === 'string') return [userThemes];
+      return userThemes;
     },
   },
   data() {

src/components/Settings/ThemeSelector.vue

@@ -30,7 +30,7 @@ export default {
       selectedTheme: this.getInitialTheme(),
       themeHelper: new ThemeHelper(),
       loading: true,
-      builtInThemes: Defaults.builtInThemes.concat(this.userThemes),
+      builtInThemes: this.userThemes.concat(Defaults.builtInThemes),
     };
   },
   computed: {