黑夜模式

ButlerDang · Mar 10, 2022 · a766cb8 · a766cb8
1 parent 7680fa1
commit a766cb8
Show file tree

Hide file tree

Showing 22 changed files with 110 additions and 50 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -5,10 +5,10 @@
     <link rel="icon" href="/vue3-music/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>VUE3-MUSIC</title>
-    <script type="module" crossorigin src="/vue3-music/assets/index.c2ca890f.js"></script>
+    <script type="module" crossorigin src="/vue3-music/assets/index.545ff3d6.js"></script>
     <link rel="modulepreload" href="/vue3-music/assets/vendor.4a9443dd.js">
     <link rel="stylesheet" href="/vue3-music/assets/vendor.77ac5f7b.css">
-    <link rel="stylesheet" href="/vue3-music/assets/index.ce38b609.css">
+    <link rel="stylesheet" href="/vue3-music/assets/index.858b42bf.css">
   </head>
   <body>
     <div id="app"></div>

diff --git a/src/assets/base.scss b/src/assets/base.scss
@@ -14,12 +14,32 @@
   --el-color-primary-light-8: #d1fae5 !important;
   --el-color-primary-light-9: #ecfdf5 !important;
   --el-color-primary-dark-2: #337ecc !important;
+  --el-text-color-primary: text-slate-700;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --el-color-primary: #059669 !important;
+
+    --el-color-primary-light-9: #57534e !important;
+
+    --el-border-color-base: #57534e !important;
+    --el-text-color-regular: #e2e8f0 !important;
+    --el-text-color-primary: text-slate-200 !important;
+
+    --el-color-white: #292524 !important;
+    --el-border-color-lighter: #57534e !important;
+    --el-border-color-light:#57534e !important;
+
+    --el-popover-bg-color:#292524 !important;
+  }
 }
 
 html, body {
   font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
   'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
-  @apply text-slate-700;
+  @apply text-slate-700 bg-white;
+  @apply dark:bg-stone-900 dark:text-slate-200;
 }
 
 .hover-text {

diff --git a/src/assets/theme.scss b/src/assets/theme.scss
@@ -0,0 +1,33 @@
+.bg-main {
+  @apply bg-gray-50;
+  @apply dark:bg-stone-900;
+}
+.hover-bg-main {
+  @apply hover:bg-gray-200;
+  @apply dark:hover:bg-stone-700;
+}
+.bg-dc {
+  @apply bg-gray-100;
+  @apply dark:bg-stone-800;
+}
+.bg-view {
+  @apply bg-white;
+  @apply dark:bg-stone-900;
+}
+.hover-bg-view {
+  @apply hover:bg-stone-100;
+  @apply dark:hover:bg-stone-800;
+}
+.bg-active {
+  @apply bg-emerald-400 text-white;
+}
+
+.text-main {
+  @apply text-slate-700;
+  @apply dark:text-slate-200;
+}
+
+.text-dc {
+  @apply text-slate-400;
+  @apply dark:text-slate-500;
+}
diff --git a/src/components/common/SongListItem.vue b/src/components/common/SongListItem.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex song-item items-center w-full" :class="{'playing':id===song.id}"
+  <div class="flex song-item items-center w-full hover-bg-main" :class="{'playing':id===song.id}"
        @dblclick="play(song.id)">
     <div class="flex-shrink-0 flex-1 flex items-center justify-between pr-5 ">
 
@@ -63,7 +63,6 @@ const {play, id} = usePlayerStore()
 <style lang="scss" scoped>
 .song-item {
   @apply py-2.5 pl-0.5;
-  @apply hover:bg-gray-100;
   &:hover {
     .icon-action {
       @apply inline-block;

diff --git a/src/components/common/Title.vue b/src/components/common/Title.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="text-xl py-3 mt-2 flex items-center hover-text">
+  <div class="text-xl py-3 mt-2 flex items-center">
     <div>{{ title }}</div>
     <IconPark :icon="Right" size="25" :stroke-width="2"/>
   </div>

diff --git a/src/components/layout/footer/PlayerAction.vue b/src/components/layout/footer/PlayerAction.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="flex justify-end items-center text-slate-500 gap-x-2.5">
-    <span class="text-xs text-slate-500">
+  <div class="flex justify-end items-center  gap-x-2.5">
+    <span class="text-xs">
       {{ useFormatDuring(currentTime) }} / {{ useFormatDuring(duration) }}
     </span>
     <IconPark :icon="TextMessage" size="18" :stroke-width="3" class="hover-text" title="歌词"/>

diff --git a/src/components/layout/footer/PlayerSlider.vue b/src/components/layout/footer/PlayerSlider.vue
@@ -26,8 +26,8 @@ const {duration, currentTime, onSliderInput, onSliderChange} = toRefs(usePlayerS
     }
 
     .el-slider__runway {
-      @apply bg-slate-50 transition-all;
-      @apply hover:bg-slate-200;
+      //@apply bg-slate-50 dark:bg-stone-700 transition-all;
+      //@apply hover:bg-stone-200 dark:hover:bg-stone-600;
     }
 
     .el-slider__button-wrapper {

diff --git a/src/components/layout/footer/PlayerSong.vue b/src/components/layout/footer/PlayerSong.vue
@@ -8,10 +8,10 @@
                class="bg-red-500  text-xs text-white rounded px-0.5 scale-75">试听
           </div>
           <span>{{ song.name || '开源云音乐' }}</span>
-          <span class="ml-2 text-slate-500">- {{ song.ar?.first().name || `SmallRuralDog` }}</span>
+          <span class="ml-2 text-dc">- {{ song.ar?.first().name || `SmallRuralDog` }}</span>
         </div>
       </div>
-      <div class="flex gap-x-3 text-slate-500">
+      <div class="flex gap-x-3 text-main">
         <IconPark :icon="Like" size="18" :stroke-width="3" class="text-slate-400 hover-text"/>
         <IconPark :icon="DownTwo" size="18" :stroke-width="3" class="text-slate-400 hover-text"/>
         <IconPark :icon="MoreTwo" size="18" :stroke-width="3" class="text-slate-400 hover-text"/>
@@ -35,12 +35,11 @@ const {song, songUrl} = toRefs(usePlayerStore())
 
 <style lang="scss">
 .player-song {
-  .n-badge {
-    .n-badge-sup {
-      @apply scale-75 left-1 bg-stone-100 text-slate-500 bg-opacity-80;
+  .badge {
+    .el-badge__content {
+      @apply scale-75 left-1 bg-stone-100 text-slate-500 bg-opacity-80 right-auto;
+      @apply dark:bg-stone-900;
     }
   }
 }
-
-
 </style>
diff --git a/src/components/layout/header/Header.vue b/src/components/layout/header/Header.vue
@@ -10,7 +10,7 @@
     <div class="flex items-center mr-5">
       <UserInfo class="mr-2"/>
       <IconPark :icon="Mail" :stroke-width="2" class="icon-button"/>
-      <IconPark :icon="Platte" :stroke-width="2" class="icon-button"/>
+      <IconPark :icon="Platte" :stroke-width="2" class="icon-button" @click="changeThemeMode"/>
       <IconPark :icon="HamburgerButton" :stroke-width="2" class="icon-button"/>
     </div>
   </div>
@@ -24,24 +24,33 @@ import UserInfo from "@/components/layout/header/UserInfo.vue";
 import {useSearchStore} from "@/stores/search";
 import {storeToRefs} from "pinia";
 import SearchPop from "@/components/layout/header/SearchPop.vue";
+import {ref} from "vue";
 
 const iconSize = 22;
 
 const router = useRouter();
 
 const {showSearchView, searchKeyword} = storeToRefs(useSearchStore())
 
+const mode = ref(false)
+
+const changeThemeMode = () => {
+  window.document.documentElement.setAttribute('data-theme', mode.value ? 'dark' : 'light')
+
+  mode.value = !mode.value;
+}
+
 </script>
 <style lang="scss" scoped>
 .search {
   @apply text-xs;
   :deep(.el-input__inner) {
-    @apply rounded-full text-xs bg-gray-100;
+    @apply rounded-full text-xs bg-slate-100 dark:bg-stone-900;
   }
 }
 
 .icon-button {
-  @apply text-slate-500 p-2 cursor-pointer;
+  @apply p-2 cursor-pointer;
   @apply hover:text-emerald-400 ;
 }
 </style>
diff --git a/src/components/layout/header/SearchPop.vue b/src/components/layout/header/SearchPop.vue
@@ -16,7 +16,7 @@
             <div class="pt-2 pb-1.5 px-2.5">热门搜索</div>
             <div>
               <div v-for="(item,index) in searchHot" :key="item.searchWord"
-                   class="py-2.5 px-2.5 hover:bg-gray-50 hover-text cursor-pointer flex justify-between items-center text-xs"
+                   class="py-2.5 px-2.5 hover-text cursor-pointer flex justify-between items-center text-xs"
                    @click="hotClick(item.searchWord)">
                 <div>
                   <span class="mr-1">{{ index + 1 }}.</span>

diff --git a/src/components/layout/header/SearchSuggest.vue b/src/components/layout/header/SearchSuggest.vue
@@ -2,24 +2,24 @@
   <div v-if="suggestData" v-for="order in suggestData.order">
     <div class="pt-2 pb-1.5 px-2.5">{{ getTitle(order) }}</div>
     <div v-for="item in suggestData.songs" :key="item.id" v-if="order==='songs'"
-         class="py-1.5 px-2.5 hover:bg-gray-50 text-xs cursor-pointer" @click="play(item.id)">
+         class="py-1.5 px-2.5 hover-bg-main text-xs cursor-pointer" @click="play(item.id)">
       <span class="text-emerald-500">{{ item.name }}</span>
       <span class="pl-1"> - {{ item.artists.first()?.name }}</span>
     </div>
     <div v-for="item in suggestData.albums" :key="item.id" v-if="order==='albums'"
-         class="py-1.5 px-2.5 hover:bg-gray-50 text-xs cursor-pointer"
+         class="py-1.5 px-2.5 hover-bg-main text-xs cursor-pointer"
          @click="routerPush('album',item.id)">
       <span class="text-emerald-500">{{ item.name }}</span>
       <span class="pl-1"> - {{ item.artist.name }}</span>
     </div>
     <div v-for="item in suggestData.artists" :key="item.id" v-if="order==='artists'"
-         class="py-1.5 px-2.5 hover:bg-gray-50 text-xs cursor-pointer flex items-center"
+         class="py-1.5 px-2.5 hover-bg-main text-xs cursor-pointer flex items-center"
          @click="routerPush('artistDetail',item.id)">
       <el-avatar size="small" :src="item.img1v1Url"/>
       <span class="text-emerald-500 ml-2">{{ item.name }}</span>
     </div>
     <div v-for="item in suggestData.playlists" :key="item.id" v-if="order==='playlists'"
-         class="py-1.5 px-2.5 hover:bg-gray-50 text-xs cursor-pointer flex items-center"
+         class="py-1.5 px-2.5 hover-bg-main text-xs cursor-pointer flex items-center"
          @click="routerPush('playlist',item.id)">
       <el-avatar size="small" :src="item.coverImgUrl"/>
       <div class="text-emerald-500 ml-2 truncate flex-1 w-1">{{ item.name }}</div>

diff --git a/src/components/layout/header/UserInfo.vue b/src/components/layout/header/UserInfo.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex items-center cursor-pointer text-gray-600 hover-text">
+  <div class="flex items-center cursor-pointer hover-text">
     <ElAvatar size="small" round class="bg-gray-200"></ElAvatar>
     <span class="text-xs ml-1.5" @click="showModal=true">点击登录</span>
   </div>

diff --git a/src/components/layout/menu/Menu.vue b/src/components/layout/menu/Menu.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-gray-50 bg-opacity-70 h-screen flex flex-col">
+  <div class="bg-main bg-opacity-70 h-screen flex flex-col">
 
     <MenuList/>
   </div>

diff --git a/src/components/layout/menu/MenuList.vue b/src/components/layout/menu/MenuList.vue
@@ -1,9 +1,9 @@
 <template>
   <ElScrollbar>
     <div class="mt-10 pl-6 pr-6 space-y-1.5" v-for="menuItem in menus">
-      <div class="menu-title">{{ menuItem.name }}</div>
+      <div class="menu-title text-main">{{ menuItem.name }}</div>
       <div
-          class="menu-item"
+          class="menu-item hover-bg-main text-main"
           v-for="menu in menuItem.menus"
           :key="menu.key"
           :class="{ 'active': currentKey === menu.key }"
@@ -29,12 +29,11 @@ const {menus, currentKey, click} = userMenu()
 
 <style lang="scss" scoped>
 .menu-title {
-  @apply text-xs text-gray-400 pl-4 pr-4 pb-2;
+  @apply text-xs pl-4 pr-4 pb-2;
 }
 
 .menu-item {
   @apply text-sm pl-4 pr-4 pt-1.5 pb-1.5 rounded cursor-pointer transition-colors flex items-center;
-  @apply hover:bg-gray-200;
 }
 
 .active {

diff --git a/src/components/layout/menu/useMenu.ts b/src/components/layout/menu/useMenu.ts
@@ -52,25 +52,25 @@ export function userMenu() {
                     name: "我喜欢",
                     key: "love",
                     icon: Like,
-                    theme: 'filled',
+                    theme: 'outline',
                 },
                 {
                     name: "本地歌曲",
                     key: "local",
                     icon: Computer,
-                    theme: 'filled',
+                    theme: 'outline',
                 },
                 {
                     name: "下载歌曲",
                     key: "download",
                     icon: DownloadThree,
-                    theme: 'filled',
+                    theme: 'outline',
                 },
                 {
                     name: "最近播放",
                     key: "recently",
                     icon: PlayTwo,
-                    theme: 'filled'
+                    theme: 'outline'
                 },
             ]
         }

diff --git a/src/main.ts b/src/main.ts
@@ -1,6 +1,7 @@
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import '@/assets/base.scss'
+import '@/assets/theme.scss'
 import App from './App.vue'
 import router from './router'
 import "@/utils/extend"

diff --git a/src/views/discover/Personalized.vue b/src/views/discover/Personalized.vue
@@ -5,7 +5,7 @@
       <div v-for="(item,index) in personalized.sampleSize(10)" :key="index" :class="{'item-1':index===0}"
            @click="router.push({name:'playlist',query:{id:item.id}})">
         <CoverPlay :name="item.name" :pic-url="item.picUrl" :play-count="item.playCount" show-play-count/>
-        <div class="mt-2 text-xs text-gray-700 truncate">{{ item.name }}</div>
+        <div class="mt-2 text-xs text-main truncate">{{ item.name }}</div>
       </div>
     </div>
   </div>

diff --git a/src/views/discover/PersonalizedNewSong.vue b/src/views/discover/PersonalizedNewSong.vue
@@ -2,13 +2,13 @@
   <Title title="推荐新音乐"/>
   <div class="grid grid-flow-row grid-cols-2 2xl:grid-cols-5 gap-y-2.5 gap-x-5 cursor-pointer">
     <div v-for="(item,index) in personalizedNewSong" :key="index"
-         class="hover:bg-gray-100 transition-all flex items-center" @click="play(item.id)">
+         class="hover-bg-view transition-all flex items-center" @click="play(item.id)">
       <img :src="item.picUrl" alt="" class="w-12 h-12 object-cover rounded flex-shrink-0"/>
       <div class="px-2 text-xs flex-auto flex flex-col w-1/3">
         <div class="text-xs flex-1 truncate ">
           {{ item.name }}
         </div>
-        <div class="mt-1.5">
+        <div class="mt-1.5 text-dc">
           {{ item.song.artists[0].name }}
         </div>
       </div>

diff --git a/src/views/music/Music.vue b/src/views/music/Music.vue
@@ -2,9 +2,9 @@
   <div class="pl-5 pr-5 music">
     <h1 class="text-3xl font-bold pt-8 pb-4">音乐馆</h1>
     <el-affix target=".music" :offset="56">
-      <div class="bg-white">
+      <div class="bg-view">
         <el-tabs v-model="currentMenu" @tab-click="onTabClick">
-          <el-tab-pane v-for="menu in menus" :key="menu.name" :label="menu.label" :name="menu.name"/>
+          <el-tab-pane v-for="menu in menus" :key="menu.name" :label="menu.label" :name="menu.name" class="text-main"/>
         </el-tabs>
       </div>
     </el-affix>

diff --git a/src/views/music/artist/Artist.vue b/src/views/music/artist/Artist.vue
@@ -17,8 +17,8 @@
   <div class="grid grid-flow-row grid-cols-6 xl:grid-cols-8 2xl:grid-cols-10 gap-5">
     <div v-for="artist in artists" :key="artist.id" class="flex items-center flex-col"
          @click="router.push({name:'artistDetail',query:{id:artist.id}})">
-      <el-image lazy :src="artist.img1v1Url" alt=""
-                class="rounded-full cursor-pointer w-full aspect-square object-cover bg-gray-50"/>
+      <img :src="artist.img1v1Url" alt=""
+           class="rounded-full cursor-pointer w-full aspect-square object-cover bg-dc"/>
       <div class="mt-2 text-sm">{{ artist.name }}</div>
     </div>
   </div>

diff --git a/src/views/music/toplist/TopList.vue b/src/views/music/toplist/TopList.vue
@@ -2,12 +2,12 @@
   <div class="text-xl pb-5 font-bold">官方榜</div>
   <div class="grid grid-flow-row grid-cols-2 2xl:grid-cols-4 gap-5">
     <div v-for="item in topListDetailData.slice(0,4)" :key="item.id"
-         class="flex bg-gray-100 rounded-lg items-center cursor-pointer hover:bg-gray-200" @click="toPlaylist(item)">
+         class="flex bg-dc rounded-lg items-center cursor-pointer" @click="toPlaylist(item)">
       <CoverPlay :name="item.name" :pic-url="item.coverImgUrl" :play-count="item.playCount" class="w-36 flex-shrink-0"
                  show-play-count/>
       <div class="px-5 flex-1 flex-shrink-0 flex flex-col">
         <div class="text-xl font-bold">{{ item.name }}</div>
-        <div class="text-xs text-gray-600 mt-2">
+        <div class="text-xs text-main mt-2">
           <div v-for="(track,index) in item.tracks" class="mt-2">
             <div class="flex">
               <span class="mr-1">{{ index + 1 }}</span>