feat: 黑暗模式

README.md

@@ -6,7 +6,7 @@
 
 TODO:
 
-- [ ] 黑暗模式
+- [x] 黑暗模式
 - [x] 颜色预设与自定义
 - [ ] CSS 进一步原子化
 

package.json

@@ -23,6 +23,7 @@
   },
   "dependencies": {
     "@iconify-json/ri": "^1.2.5",
+    "@vueuse/core": "^12.4.0",
     "es-toolkit": "^1.31.0",
     "pinia": "^2.3.0",
     "pinia-plugin-persistedstate": "^4.2.0",

src/App.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { onMounted, reactive, watch } from 'vue'
+import { useStyleTag } from '@vueuse/core'
+import { onMounted, watch } from 'vue'
 import AudioPlayer from './components/AudioPlayer.vue'
 import { usePlayingStore } from './components/playingStore'
 import { type Preset, presets } from './presets'
@@ -8,6 +9,7 @@ const props = defineProps<{
   urls: { url: string, name: string }[]
   showBtn: string
   playBtn?: string
+  darkModeTarget?: string
   preset?: string
   styles?: Preset
 }>()
@@ -60,23 +62,49 @@ if (props.preset) {
   }
 }
 
-const colors = reactive({
-  '--player-border': stylesPresent.styles.light.playerBorder,
-  '--close-btn': stylesPresent.styles.light.closeBtn,
-  '--secondary-text': stylesPresent.styles.light.secondaryText,
-  '--primary-text': stylesPresent.styles.light.primaryText,
-  '--player-background': stylesPresent.styles.light.playerBackground,
-  '--playlist-line': stylesPresent.styles.light.playListLine,
-  '--hover-btn': stylesPresent.styles.light.hoverBtn,
-  '--box-bg-shadow': stylesPresent.styles.light.boxBackgroundShadow,
-  '--primary-color': `rgb(${stylesPresent.styles.light.primaryColor})`,
-  '--primary-color-a': `rgba(${stylesPresent.styles.light.primaryColor},0.3)`,
-})
+const colorsLight
+= `{
+  --player-border: ${stylesPresent.styles.light.playerBorder};
+  --close-btn: ${stylesPresent.styles.light.closeBtn};
+  --secondary-text: ${stylesPresent.styles.light.secondaryText};
+  --primary-text: ${stylesPresent.styles.light.primaryText};
+  --player-background: ${stylesPresent.styles.light.playerBackground};
+  --playlist-line: ${stylesPresent.styles.light.playListLine};
+  --hover-btn: ${stylesPresent.styles.light.hoverBtn};
+  --box-bg-shadow: ${stylesPresent.styles.light.boxBackgroundShadow};
+  --primary-color: 'rgb(${stylesPresent.styles.light.primaryColor})';
+  --primary-color-a: 'rgba(${stylesPresent.styles.light.primaryColor},0.3);
+}`
+
+const colorsDark
+= `{
+  --player-border: ${stylesPresent.styles.dark.playerBorder}; 
+  --close-btn: ${stylesPresent.styles.dark.closeBtn};
+  --secondary-text: ${stylesPresent.styles.dark.secondaryText};
+  --primary-text: ${stylesPresent.styles.dark.primaryText};
+  --player-background: ${stylesPresent.styles.dark.playerBackground};
+  --playlist-line: ${stylesPresent.styles.dark.playListLine};
+  --hover-btn: ${stylesPresent.styles.dark.hoverBtn};
+  --box-bg-shadow: ${stylesPresent.styles.dark.boxBackgroundShadow};
+  --primary-color: 'rgb(${stylesPresent.styles.dark.primaryColor})';
+  --primary-color-a: 'rgba(${stylesPresent.styles.dark.primaryColor},0.3);
+}`
+
+if (props.darkModeTarget) {
+  if (props.darkModeTarget === 'auto') {
+    useStyleTag(`@media(prefers-color-scheme:light){body${colorsLight}}`)
+    useStyleTag(`@media(prefers-color-scheme:dark){body${colorsDark}}`)
+  }
+  else {
+    useStyleTag(`html${colorsLight}`)
+    useStyleTag(`${props.darkModeTarget}${colorsDark}`)
+  }
+}
 </script>
 
 <template>
   <Suspense>
-    <AudioPlayer id="MusicPlayerRoot" :style="colors" :playlist-u-r-ls="urls" :show-player="playingStore.showPlayer" />
+    <AudioPlayer id="MusicPlayerRoot" :playlist-u-r-ls="urls" :show-player="playingStore.showPlayer" />
   </Suspense>
 </template>
 

src/Preview.vue

@@ -7,15 +7,23 @@ const playingStore = usePlayingStore()
 const url = [
   { url: 'https://music.163.com/#/playlist?id=2943811283', name: '1' },
 ]
+
+function clickChangeTheme() {
+  document.documentElement.dataset.theme = document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark'
+}
 </script>
 
 <template>
-  <App :urls="url" show-btn="#test" play-btn="#play" />
+  <App :urls="url" show-btn="#test" play-btn="#play" dark-mode-target="html[data-theme=&quot;dark&quot;]" />
   <button id="test">
     {{ playingStore.showPlayer ? '隐藏' : '显示' }}播放器
   </button>
 
   <button id="play">
     {{ playingStore.playing ? '暂停' : '播放' }}
   </button>
+
+  <button @click="clickChangeTheme">
+    切换主题
+  </button>
 </template>

src/presets.ts

@@ -1,16 +1,19 @@
+interface colorsConfig {
+  playerBorder?: string
+  playerBackground?: string
+  closeBtn?: string
+  primaryText?: string
+  secondaryText?: string
+  playListLine?: string
+  hoverBtn?: string
+  boxBackgroundShadow?: string
+  primaryColor?: string
+}
+
 export interface Preset {
   styles: {
-    light: {
-      playerBorder?: string
-      playerBackground?: string
-      closeBtn?: string
-      primaryText?: string
-      secondaryText?: string
-      playListLine?: string
-      hoverBtn?: string
-      boxBackgroundShadow?: string
-      primaryColor?: string
-    }
+    light: colorsConfig
+    dark: colorsConfig
   }
 }
 
@@ -27,6 +30,17 @@ export const nyxPreset: Preset = {
       boxBackgroundShadow: 'var(--playlist-line)',
       primaryColor: '10,116,38',
     },
+    dark: {
+      playerBorder: '#363636',
+      playerBackground: 'alpha(#22222, 0.7)',
+      closeBtn: '#aaa',
+      primaryText: '#aaa',
+      secondaryText: '#aaa',
+      playListLine: 'alpha(#fff, 0.1)',
+      hoverBtn: 'rgb(26, 194, 203)',
+      boxBackgroundShadow: 'var(--playlist-line)',
+      primaryColor: '10,116,38',
+    },
   },
 }
 
@@ -43,6 +57,17 @@ export const shokaxPreset: Preset = {
       boxBackgroundShadow: 'var(--playlist-line)',
       primaryColor: '233,84,107',
     },
+    dark: {
+      playerBorder: '#363636',
+      playerBackground: 'alpha(#22222, 0.7)',
+      closeBtn: '#aaa',
+      primaryText: '#aaa',
+      secondaryText: '#aaa',
+      playListLine: 'alpha(#fff, 0.1)',
+      hoverBtn: '#ed6ea0',
+      boxBackgroundShadow: 'var(--playlist-line)',
+      primaryColor: '233,84,107',
+    },
   },
 }
 

src/style.css

@@ -1,79 +1,11 @@
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
 button {
   border-radius: 8px;
   border: 1px solid transparent;
   padding: 0.6em 1.2em;
   font-size: 1em;
   font-weight: 500;
   font-family: inherit;
-  background-color: #1a1a1a;
+  background-color: rgb(255, 255, 255);
   cursor: pointer;
   transition: border-color 0.25s;
 }
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-.card {
-  padding: 2em;
-}
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}