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,14 +58,41 @@
     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-composite: subtract;
-    -webkit-mask-composite: source-out; // This is needed due to autoprefixed not converting subtract to the proper webkit equivalent
+    mask-image: linear-gradient(to right,
+        hsla(0, 0%, 0%, 0) 0%,
+        hsla(0, 0%, 0%, 0.182) 5.6%,
+        hsla(0, 0%, 0%, 0.34) 9.9%,
+        hsla(0, 0%, 0%, 0.476) 13.1%,
+        hsla(0, 0%, 0%, 0.593) 15.7%,
+        hsla(0, 0%, 0%, 0.69) 17.9%,
+        hsla(0, 0%, 0%, 0.771) 20.2%,
+        hsla(0, 0%, 0%, 0.836) 22.9%,
+        hsla(0, 0%, 0%, 0.888) 26.3%,
+        hsla(0, 0%, 0%, 0.927) 30.8%,
+        hsla(0, 0%, 0%, 0.956) 36.7%,
+        hsla(0, 0%, 0%, 0.976) 44.4%,
+        hsla(0, 0%, 0%, 0.989) 54.3%,
+        hsla(0, 0%, 0%, 0.996) 66.6%,
+        hsla(0, 0%, 0%, 0.999) 81.7%,
+        hsl(0, 0%, 0%) 100%),
+      linear-gradient(to top,
+        hsla(0, 0%, 0%, 0) 0%,
+        hsla(0, 0%, 0%, 0.182) 5.6%,
+        hsla(0, 0%, 0%, 0.34) 9.9%,
+        hsla(0, 0%, 0%, 0.476) 13.1%,
+        hsla(0, 0%, 0%, 0.593) 15.7%,
+        hsla(0, 0%, 0%, 0.69) 17.9%,
+        hsla(0, 0%, 0%, 0.771) 20.2%,
+        hsla(0, 0%, 0%, 0.836) 22.9%,
+        hsla(0, 0%, 0%, 0.888) 26.3%,
+        hsla(0, 0%, 0%, 0.927) 30.8%,
+        hsla(0, 0%, 0%, 0.956) 36.7%,
+        hsla(0, 0%, 0%, 0.976) 44.4%,
+        hsla(0, 0%, 0%, 0.989) 54.3%,
+        hsla(0, 0%, 0%, 0.996) 66.6%,
+        hsla(0, 0%, 0%, 0.999) 81.7%,
+        hsl(0, 0%, 0%) 100%);
+    mask-composite: intersect;
   }
 
   .swiper {

assets/variables.scss

@@ -4,16 +4,25 @@
 // $font-size-root: 20px;
 
 // 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: ('background': #f2f2f2);
 
-$material-dark: (
-  'background': #101010
-);
+$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

@@ -2,15 +2,19 @@
   <v-menu offset-y>
     <template #activator="{ on, attrs }">
       <div
-        class="d-flex align-center no-overflow space-evenly"
+        v-ripple
+        class="d-flex align-center full-width py-8 px-4 no-overflow"
         v-bind="attrs"
         v-on="on"
       >
         <user-image />
-        <h1 v-if="$auth.user" class="font-weight-light pb-1 text-truncate">
+        <h1
+          v-if="$auth.user"
+          class="flex-grow-1 font-weight-light ml-3 pb-1 text-truncate user-select-none"
+        >
           {{ $auth.user.Name }}
         </h1>
-        <v-icon>mdi-chevron-down</v-icon>
+        <v-icon>mdi-dots-horizontal</v-icon>
       </div>
     </template>
     <v-list dense>
@@ -42,14 +46,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('metadataEditor'),
           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"
@@ -42,9 +42,10 @@
               !item.ImageTags ||
               (item.ImageTags && !item.ImageTags.Primary)
             "
-            class="card-image absolute"
+            class="card-image absolute text--disabled"
             size="96"
-            color="primary darken-2"
+            color="white"
+            dark
           >
             {{ itemIcon }}
           </v-icon>
@@ -233,7 +234,7 @@ export default Vue.extend({
             episodeNumber: this.item.IndexNumber
           })} - ${this.item.Name}`;
         case 'MusicAlbum':
-          return `${this.item.AlbumArtist}`;
+          return `${this.item.AlbumArtist || ''}`;
         case 'Series': {
           if (this.item.Status === 'Continuing') {
             return `${this.item.ProductionYear} - ${this.$t('present')}`;
@@ -323,6 +324,7 @@ export default Vue.extend({
 }
 
 .card-content {
+  background-color: #{map-get($material-dark, 'menus')};
   overflow: hidden;
   position: absolute;
   top: 0;
@@ -339,6 +341,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%;

components/Layout/AudioControls.vue

@@ -27,6 +27,7 @@
             </v-btn>
           </span>
           <nuxt-link
+            v-if="getCurrentItem.AlbumArtists[0].Id"
             tag="span"
             class="text--secondary text-caption text-truncate mt-md-n2 link"
             :to="`/artist/${getCurrentItem.AlbumArtists[0].Id}`"

components/Layout/Backdrop.vue

@@ -42,11 +42,13 @@ export default Vue.extend({
     left: 0;
     right: 0;
     background-color: #{map-get($material-light, 'background')};
-    opacity: 0.75;
+    mix-blend-mode: screen;
+    opacity: 0.85;
   }
 }
 
 .theme--dark .backdrop::after {
   background-color: #{map-get($material-dark, 'background')};
+  mix-blend-mode: multiply;
 }
 </style>

components/Layout/HomeHeader/HomeHeaderItems.vue

@@ -10,6 +10,22 @@
     >
       <swiper-slide v-for="item in items" :key="item.Id">
         <div class="slide-backdrop" data-swiper-parallax="-100">
+          <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)"
@@ -191,6 +207,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) {
@@ -238,4 +282,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

@@ -166,6 +166,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: {