style: personal fm card

src/components/FMCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="fm">
+  <div class="fm" :style="{ background }" data-theme="dark">
     <img
       class="cover"
       :src="track.album && track.album.picUrl | resizeImage(512)"
@@ -35,10 +35,17 @@
 import ButtonIcon from '@/components/ButtonIcon.vue';
 import ArtistsInLine from '@/components/ArtistsInLine.vue';
 import { mapState } from 'vuex';
+import * as Vibrant from 'node-vibrant';
+import Color from 'color';
 
 export default {
   name: 'FMCard',
   components: { ButtonIcon, ArtistsInLine },
+  data() {
+    return {
+      background: '',
+    };
+  },
   computed: {
     ...mapState(['player']),
     track() {
@@ -51,12 +58,17 @@ export default {
       return this.track.artists || this.track.ar || [];
     },
   },
+  created() {
+    this.getColor();
+    window.ok = this.getColor;
+  },
   methods: {
     play() {
       this.player.playPersonalFM();
     },
     next() {
       this.player.playNextTrack(true);
+      this.getColor();
     },
     goToAlbum() {
       if (this.track.album.id === 0) return;
@@ -65,6 +77,23 @@ export default {
     moveToFMTrash() {
       this.player.moveToFMTrash();
     },
+    getColor() {
+      const cover = `${this.player.personalFMTrack.album.picUrl}?param=512y512`;
+      Vibrant.from(cover, { colorCount: 1 })
+        .getPalette()
+        .then(palette => {
+          const color = Color.rgb(palette.Vibrant._rgb)
+            .darken(0.1)
+            .rgb()
+            .string();
+          const color2 = Color.rgb(palette.Vibrant._rgb)
+            .lighten(0.28)
+            .rotate(-30)
+            .rgb()
+            .string();
+          this.background = `linear-gradient(to top left, ${color}, ${color2})`;
+        });
+    },
   },
 };
 </script>
@@ -81,7 +110,6 @@ export default {
   clip-path: border-box;
   border-radius: 0.75rem;
   margin-right: 1.2rem;
-  border: 1px solid rgb(243, 243, 243);
   cursor: pointer;
   user-select: none;
 }