chore: preview 黑暗模式 & 圆角微调

theme-shoka-x · Jan 15, 2025 · c9aea99 · c9aea99
1 parent f42c61c
commit c9aea99
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 5 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -72,8 +72,8 @@ const colorsLight
   --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);
+  --primary-color: rgb(${stylesPresent.styles.light.primaryColor});
+  --primary-color-a: rgba(${stylesPresent.styles.light.primaryColor},0.3);
 }`
 
 const colorsDark
@@ -86,8 +86,8 @@ const colorsDark
   --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);
+  --primary-color: rgb(${stylesPresent.styles.dark.primaryColor});
+  --primary-color-a: rgba(${stylesPresent.styles.dark.primaryColor},0.3);
 }`
 
 if (props.darkModeTarget) {

diff --git a/src/Preview.vue b/src/Preview.vue
@@ -27,3 +27,11 @@ function clickChangeTheme() {
     切换主题
   </button>
 </template>
+
+<style>
+html[data-theme='dark'] {
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+}
+</style>
diff --git a/src/components/AudioPlayer.vue b/src/components/AudioPlayer.vue
@@ -56,7 +56,7 @@ const src = computed(() => {
 
 <template>
   <Transition name="slideRight">
-    <div v-show="playingStore.showPlayer" class="player-info fixed z-9 overflow-hidden border-r-0.5rem">
+    <div v-show="playingStore.showPlayer" class="player-info border-radius-0.8rem fixed z-9 overflow-hidden rounded-xl">
       <AudioPreview />
       <AudioController />
       <audio id="audioPlayer" :src="src" :muted="!playingStore.enableVolume" @timeupdate="updateCurrentTime" @canplay="playingStore.currentId++" />