�� Refactor CSS to use constants for media queries

src/components/LinkItems/Item.vue

@@ -3,18 +3,18 @@
       :href="target !== 'iframe' ? url : '#'"
       :target="target === 'newtab' ? '_blank' : ''"
       :class="`item ${!icon? 'short': ''} size-${itemSize}`"
-      :id="`link-${id}`"
       v-tooltip="getTooltipOptions()"
-      rel="noopener noreferrer"
+      v-bind:style="customStyles"
-      tabindex="0"
+      rel="noopener noreferrer" tabindex="0"
+      :id="`link-${id}`"
     >
       <!-- Item Text -->
-      <div class="tile-title" :id="`tile-${id}`">
+      <div class="tile-title" :id="`tile-${id}`" >
         <span class="text">{{ title }}</span>
         <div class="overflow-dots">...</div>
       </div>
       <!-- Item Icon -->
-      <Icon :icon="icon" :url="url" :size="itemSize" />
+      <Icon :icon="icon" :url="url" :size="itemSize" :color="color" v-bind:style="customStyles" />
       <!-- Small icon, showing opening method on hover -->
       <ItemOpenMethodIcon class="opening-method-icon" :isSmall="!icon" :openingMethod="target"
         :position="itemSize === 'medium'? 'bottom right' : 'top right'"/>
@@ -33,7 +33,8 @@ export default {
     subtitle: String, // Optional sub-text
     description: String, // Optional tooltip hover text
     icon: String, // Optional path to icon, within public/img/tile-icons
-    color: String, // Optional background color, specified in hex code
+    color: String, // Optional text and icon color, specified in hex code
+    backgroundColor: String, // Optional item background color
     url: String, // URL to the resource, optional but recommended
     target: { // Where resource will open, either 'newtab', 'sametab' or 'iframe'
       type: String,
@@ -45,6 +46,10 @@ export default {
   data() {
     return {
       getId: this.id,
+      customStyles: {
+        color: this.color,
+        background: this.backgroundColor,
+      },
     };
   },
   components: {
@@ -132,7 +137,6 @@ export default {
   padding: 0;
   z-index: 2;
   span.text {
-    position: absolute;
     white-space: nowrap;
     transition: 1s;
     float: left;

src/components/LinkItems/ItemGroup.vue

@@ -21,6 +21,8 @@
         :description="item.description"
         :icon="item.icon"
         :target="item.target"
+        :color="item.color"
+        :backgroundColor="item.backgroundColor"
         :itemSize="newItemSize"
         @itemClicked="$emit('itemClicked')"
         @triggerModal="triggerModal"

src/components/LinkItems/ItemIcon.vue

@@ -1,5 +1,5 @@
 <template>
-  <i v-if="determineImageType(icon) === 'font-awesome'" :class="`${icon} ${size}`"></i>
+  <i v-if="determineImageType(icon) === 'font-awesome'" :class="`${icon} ${size}`" ></i>
   <img v-else-if="icon" :src="getIconPath(icon, url)" :class="`tile-icon ${size}`" />
 </template>
 

src/components/PageStrcture/Header.vue

@@ -31,6 +31,8 @@ export default {
 
 <style scoped lang="scss">
 
+@import '@/styles/media-queries.scss';
+
   header {
     margin: 0;
     padding: 0.5rem;
@@ -39,7 +41,7 @@ export default {
     background: var(--background-darker);
     align-items: center;
     align-content: flex-start;
-    @media screen and (max-width: 600px) {
+    @include phone {
       flex-direction: column-reverse;
     }
   }

src/components/PageStrcture/PageTitle.vue

@@ -16,16 +16,13 @@ export default {
 </script>
 
 <style scoped lang="scss">
+@import '@/styles/media-queries.scss';
 
 .page-titles {
   display: flex;
   flex-direction: column;
   h1 {
     color: var(--primary);
-    // background: -webkit-linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
-    // background: linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
-    // -webkit-background-clip: text;
-    // -webkit-text-fill-color: transparent;
     font-size: 2.5rem;
     margin: 0;
   }
@@ -35,7 +32,7 @@ export default {
     text-shadow: 1px 1px 2px #130f23;
     opacity: var(--dimming-factor);
   }
-  @media screen and (max-width: 600px) {
+  @include phone {
     text-align: center;
     padding: 0.25rem 0;
   }

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: {