feat(dark-theme): add dark theme colors

assets/global.scss

@@ -1,3 +1,4 @@
+@import '~vuetify/src/styles/styles.sass';
 @import '@fontsource/noto-sans/index.css';
 @import '@fontsource/noto-sans-jp/index.css';
 @import '@fontsource/noto-sans-sc/index.css';
@@ -9,8 +10,11 @@ body {
   background-color: var(--v-background-base);
 }
 
-/* W3C standard (Firefox-only for now) */
 * {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  /* W3C standard scrollbars (Firefox-only for now) */
   scrollbar-width: thin;
   scrollbar-color: var(--v-thumb-lighten5) var(--v-track-base);
 }
@@ -82,3 +86,12 @@ body {
 .link:hover {
   text-decoration: underline;
 }
+
+/* Customized Vuetify components */
+.v-menu__content .v-list {
+  background: map-get($material-light, 'cards') !important;
+}
+
+.theme--dark .v-menu__content .v-list {
+  background: map-get($material-dark, 'menus') !important;
+}

assets/styles/HomeHeader.scss

@@ -35,11 +35,9 @@
   background-size: contain;
   background-repeat: no-repeat;
   box-sizing: border-box;
-  mask-image: linear-gradient(
-    180deg,
-    rgba(37, 18, 18, 0.75) 0%,
-    rgba(0, 0, 0, 0) 100%
-  );
+  mask-image: linear-gradient(180deg,
+      rgba(37, 18, 18, 0.75) 0%,
+      rgba(0, 0, 0, 0) 100%);
   z-index: 1;
 }
 
@@ -60,12 +58,40 @@
     margin-right: 0;
     padding-bottom: (9 / 16) * 80%;
     background-position: right center;
-    mask-image: linear-gradient(
-        180deg,
-        rgba(0, 0, 0, 1) 60%,
-        rgba(0, 0, 0, 0) 100%
-      ),
-      linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 40%);
+    mask-image: linear-gradient(to right,
+        hsla(0, 0%, 0, 0) 0%,
+        hsla(0, 0%, 0, 0.1117) 4.86%,
+        hsla(0, 0%, 0, 0.2182) 9.3%,
+        hsla(0, 0%, 0, 0.3193) 13.5%,
+        hsla(0, 0%, 0, 0.4146) 17.4%,
+        hsla(0, 0%, 0, 0.5041) 21.18%,
+        hsla(0, 0%, 0, 0.5874) 24.72%,
+        hsla(0, 0%, 0, 0.6642) 28.26%,
+        hsla(0, 0%, 0, 0.7342) 31.74%,
+        hsla(0, 0%, 0, 0.7969) 35.28%,
+        hsla(0, 0%, 0, 0.8521) 38.82%,
+        hsla(0, 0%, 0, 0.899) 42.6%,
+        hsla(0, 0%, 0, 0.9371) 46.2%,
+        hsla(0, 0%, 0, 0.9656) 50.7%,
+        hsla(0, 0%, 0, 0.9837) 55.14%,
+        hsla(0, 0%, 0, 0.99) 60%),
+      linear-gradient(to bottom,
+        hsla(0, 0%, 0, 0) 50%,
+        hsla(0, 0%, 0, 0.1117) 54.05%,
+        hsla(0, 0%, 0, 0.2182) 57.75%,
+        hsla(0, 0%, 0, 0.3193) 61.25%,
+        hsla(0, 0%, 0, 0.4146) 64.5%,
+        hsla(0, 0%, 0, 0.5041) 67.65%,
+        hsla(0, 0%, 0, 0.5874) 70.6%,
+        hsla(0, 0%, 0, 0.6642) 73.55%,
+        hsla(0, 0%, 0, 0.7342) 76.45%,
+        hsla(0, 0%, 0, 0.7969) 79.4%,
+        hsla(0, 0%, 0, 0.8521) 82.35%,
+        hsla(0, 0%, 0, 0.899) 85.5%,
+        hsla(0, 0%, 0, 0.9371) 88.75%,
+        hsla(0, 0%, 0, 0.9656) 92.25%,
+        hsla(0, 0%, 0, 0.9837) 95.95%,
+        hsla(0, 0%, 0, 0.99) 100%);
     mask-composite: subtract;
     -webkit-mask-composite: source-out; // This is needed due to autoprefixed not converting subtract to the proper webkit equivalent
   }

assets/variables.scss

@@ -3,17 +3,27 @@
 // The variables you want to modify
 // $font-size-root: 20px;
 
+@import '~vuetify/src/styles/styles.sass';
+
 // Globals
-$heading-font-family: 'Noto Sans', 'Noto Sans HK', 'Noto Sans JP',
-  'Noto Sans KR', 'Noto Sans SC', sans-serif !default;
+$heading-font-family: 'Noto Sans',
+'Noto Sans HK',
+'Noto Sans JP',
+'Noto Sans KR',
+'Noto Sans SC',
+sans-serif !default;
 $body-font-family: $heading-font-family;
 $font-size-root: 14px;
 $input-font-size: 14px;
+$btn-font-weight: 500;
 
-$material-light: (
-  'background': #f2f2f2
-);
+$material-light: map-merge($material-light, ('background': #f2f2f2));
 
-$material-dark: (
-  'background': #101010
-);
+$material-dark: map-merge($material-dark, ('background': #121721,
+    'navigation-drawer': #1c2331,
+    'app-bar': #1c2331,
+    'dividers': #233543,
+    'cards': #1c2331,
+    'chips': #2b4355,
+    'menus': #252e41,
+    'text': ('primary': #edf2f7)))

components/Buttons/UserButton.vue

@@ -1,13 +1,9 @@
 <template>
   <v-menu offset-y>
     <template #activator="{ on, attrs }">
-      <div
-        class="d-flex align-center no-overflow space-evenly"
-        v-bind="attrs"
-        v-on="on"
-      >
+      <div class="d-flex align-center no-overflow" v-bind="attrs" v-on="on">
         <user-image />
-        <h1 class="font-weight-light pb-1 text-truncate">
+        <h1 class="ml-2 font-weight-light pb-1 text-truncate">
           {{ $auth.user.Name }}
         </h1>
         <v-icon>mdi-chevron-down</v-icon>
@@ -42,14 +38,32 @@ export default Vue.extend({
   },
   computed: {
     menuItems(): MenuItem[] {
-      return [
-        {
-          title: this.$t('logout'),
+      const menuItems = [];
+
+      if (this.$auth.$state.user.Policy.IsAdministrator) {
+        menuItems.push({
+          title: this.$t('metadata'),
           action: (): void => {
-            this.logoutUser();
+            this.$router.push('/metadata');
           }
+        });
+      }
+
+      menuItems.push({
+        title: this.$t('settings'),
+        action: (): void => {
+          this.$router.push('/settings');
         }
-      ];
+      });
+
+      menuItems.push({
+        title: this.$t('logout'),
+        action: (): void => {
+          this.logoutUser();
+        }
+      });
+
+      return menuItems;
     }
   },
   methods: {

components/Item/Card.vue

@@ -3,7 +3,7 @@
     <div class="card-box" :class="{ 'card-margin': !noMargin }">
       <div :class="shape || cardType" class="elevation-3">
         <div
-          class="card-content card-content-button d-flex justify-center align-center primary darken-4"
+          class="card-content card-content-button d-flex justify-center align-center darken-4"
         >
           <blurhash-image
             v-if="!imageLoadError && item.ImageTags && item.ImageTags.Primary"
@@ -36,7 +36,9 @@
               (item.ImageTags && !item.ImageTags.Primary)
             "
             size="96"
-            color="primary darken-2"
+            color="white"
+            class="text--disabled"
+            dark
           >
             {{ itemIcon }}
           </v-icon>
@@ -274,6 +276,7 @@ export default Vue.extend({
   border-radius: 0.3em;
 }
 .card-content {
+  background-color: #{map-get($material-dark, 'menus')};
   overflow: hidden;
   position: absolute;
   top: 0;
@@ -290,6 +293,9 @@ export default Vue.extend({
   background-position: center center;
   -webkit-tap-highlight-color: transparent;
 }
+.theme--dark .card-content {
+  background-color: #{map-get($material-dark, 'menus')};
+}
 .card-image {
   width: 100%;
   height: 100%;

components/Layout/Backdrop.vue

@@ -40,7 +40,8 @@ export default Vue.extend({
     left: 0;
     right: 0;
     background-color: #{map-get($material-light, 'background')};
-    opacity: 0.75;
+    mix-blend-mode: multiply;
+    opacity: 0.85;
   }
 }
 

components/Layout/HomeHeader/HomeHeaderItems.vue

@@ -10,6 +10,22 @@
     >
       <swiper-slide v-for="item in items" :key="item.Id">
         <div class="slide-backdrop">
+          <div
+            v-if="
+              !item.BackdropImageTags ||
+              (item.ImageTags && !item.ImageTags.Backdrop)
+            "
+            class="default-icon"
+          >
+            <v-icon
+              :size="$vuetify.breakpoint.mdAndUp ? 256 : 128"
+              class="text--disabled"
+              color="white"
+              dark
+            >
+              {{ getItemIcon(item) }}
+            </v-icon>
+          </div>
           <blurhash-image
             :key="`${item.Id}-image`"
             :item="getRelatedItem(item)"
@@ -174,6 +190,34 @@ export default Vue.extend({
   },
   methods: {
     ...mapActions('playbackManager', ['play']),
+    getItemIcon(item: BaseItemDto): string {
+      switch (item.Type) {
+        case 'Audio':
+          return 'mdi-music-note';
+        case 'Book':
+          return 'mdi-book-open-page-variant';
+        case 'BoxSet':
+          return 'mdi-folder-multiple';
+        case 'Folder':
+        case 'CollectionFolder':
+          return 'mdi-folder';
+        case 'Movie':
+          return 'mdi-filmstrip';
+        case 'MusicAlbum':
+          return 'mdi-album';
+        case 'MusicArtist':
+        case 'Person':
+          return 'mdi-account';
+        case 'PhotoAlbum':
+          return 'mdi-image-multiple';
+        case 'Playlist':
+          return 'mdi-playlist-play';
+        case 'Series':
+          return 'mdi-television-classic';
+        default:
+          return '';
+      }
+    },
     getRelatedItem(item: BaseItemDto): BaseItemDto {
       const rItem = this.relatedItems[this.items.indexOf(item)];
       if (!rItem) {
@@ -226,4 +270,21 @@ export default Vue.extend({
 
 <style lang="scss" scoped>
 @import '~/assets/styles/HomeHeader.scss';
+
+.default-icon {
+  display: flex;
+  align-content: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.slide-backdrop {
+  background-color: #{map-get($material-dark, 'menus')};
+}
 </style>

components/Layout/Images/BlurhashImage.vue

@@ -163,6 +163,7 @@ export default Vue.extend({
   bottom: 0;
 }
 img {
+  color: transparent;
   object-fit: cover;
 }
 </style>

components/System/DarkModeToggle.vue

@@ -1,12 +1,35 @@
 <template>
-  <v-switch v-model="darkMode" :label="$t('darkModeToggle')"></v-switch>
+  <v-tooltip bottom>
+    <template #activator="{ on, attrs }">
+      <v-btn
+        :icon="!fab"
+        :fab="fab"
+        :small="fab"
+        :class="{ 'mr-n1': !fab }"
+        v-bind="attrs"
+        v-on="on"
+        @click="darkMode = !darkMode"
+      >
+        <v-icon>{{
+          darkMode ? 'mdi-weather-sunny' : 'mdi-weather-night'
+        }}</v-icon>
+      </v-btn>
+    </template>
+    <span>{{ $t('tooltips.toggleDarkMode') }}</span>
+  </v-tooltip>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
 import { mapGetters, mapActions } from 'vuex';
 
 export default Vue.extend({
+  props: {
+    fab: {
+      type: Boolean,
+      required: true
+    }
+  },
   computed: {
     ...mapGetters('displayPreferences', ['getBooleanCustomPref']),
     darkMode: {

components/System/LocaleSwitcher.vue

@@ -1,9 +1,21 @@
 <template>
   <v-menu offset-y>
-    <template #activator="{ on, attrs }">
-      <v-btn icon size="36" v-bind="attrs" v-on="on">
-        <v-icon>mdi-web</v-icon>
-      </v-btn>
+    <template #activator="{ on: onMenu, attrs: attrsMenu }">
+      <v-tooltip bottom>
+        <template #activator="{ on: onTooltip, attrsTooltip }">
+          <v-btn
+            :icon="!fab"
+            :fab="fab"
+            :small="fab"
+            :class="{ 'mr-n1': !fab, 'ml-1': fab }"
+            v-bind="{ ...attrsMenu, ...attrsTooltip }"
+            v-on="{ ...onMenu, ...onTooltip }"
+          >
+            <v-icon>mdi-web</v-icon>
+          </v-btn></template
+        >
+        <span>{{ $t('tooltips.changeLanguage') }}</span>
+      </v-tooltip>
     </template>
     <v-list class="overflow-y-auto">
       <v-list-item
@@ -22,6 +34,12 @@ import Vue from 'vue';
 import { mapActions } from 'vuex';
 
 export default Vue.extend({
+  props: {
+    fab: {
+      type: Boolean,
+      required: true
+    }
+  },
   methods: {
     ...mapActions('displayPreferences', ['editCustomPref'])
   }