Merge pull request #69 from jellyfin/feat/dark-toggle

feat(theme): add dark theme toggle

components/Card.vue

@@ -167,6 +167,7 @@ export default Vue.extend({
   -webkit-tap-highlight-color: transparent;
 }
 .card-overlay {
+  border-radius: 0.3em;
   position: absolute;
   background: radial-gradient(
     farthest-corner at 50% 50%,

components/HomeSection.vue

@@ -160,4 +160,10 @@ h1 {
 .home-section .vueperslides__arrow--prev {
   margin-right: 0.75em;
 }
+.vueperslides:not(.no-shadow):not(.vueperslides--3d)
+  .vueperslides__parallax-wrapper::after,
+.vueperslides:not(.no-shadow):not(.vueperslides--3d)
+  .vueperslides__parallax-wrapper::before {
+  box-shadow: none;
+}
 </style>

components/UserButton.vue

@@ -13,6 +13,11 @@
       </v-btn>
     </template>
     <v-list>
+      <v-list-item @click="switchColodScheme">
+        <v-switch>
+          <template #label>Toggle dark mode</template>
+        </v-switch>
+      </v-list-item>
       <v-list-item
         v-for="(item, index) in menuItems"
         :key="index"
@@ -52,6 +57,11 @@ export default Vue.extend({
         }
       }
     }
+  },
+  methods: {
+    switchColodScheme() {
+      this.$vuetify.theme.dark = !this.$vuetify.theme.dark;
+    }
   }
 });
 </script>

nuxt.config.ts

@@ -176,6 +176,9 @@ const config: NuxtConfig = {
       themes: {
         dark: {
           primary: '#00A4DC'
+        },
+        light: {
+          primary: '#00A4DC'
         }
       },
       options: {