feat: 优化暗黑模式

Author: nonhana

components/hana/RangeInput.vue

@@ -0,0 +1,57 @@
+<script lang="ts" setup>
+defineProps<{
+  id: string
+  min: number
+  max: number
+  step: number
+  value: number
+  ariaValuemin: number
+  ariaValuemax: number
+  ariaValuenow: number
+  ariaLabel: string
+}>()
+
+const emits = defineEmits<{
+  (e: 'input', event: Event): void
+  (e: 'change', event: Event): void
+  (e: 'pointerdown'): void
+}>()
+</script>
+
+<template>
+  <input
+    :id="id"
+    class="h-2 appearance-none rounded outline-none transition-[box-shadow] duration-200 accent-hana-blue dark:bg-hana-black-700 focus-visible:ring-2 focus-visible:ring-hana-blue-300 dark:accent-hana-blue-300"
+    type="range"
+    :min="min"
+    :max="max"
+    :step="step"
+    :value="value"
+    :aria-valuemin="ariaValuemin"
+    :aria-valuemax="ariaValuemax"
+    :aria-valuenow="ariaValuenow"
+    :aria-label="ariaLabel"
+    :style="`--progress: ${value}`"
+    @input="emits('input', $event)"
+    @change="emits('change', $event)"
+    @pointerdown="emits('pointerdown')"
+  >
+</template>
+
+<style scoped>
+input[type="range"] {
+  background: linear-gradient(to right,
+    oklch(0.5 0.1102 250.04) calc(var(--progress) * 100%),
+    oklch(0.93 0.0358 205.23) calc(var(--progress) * 100%)
+  );
+}
+
+.dark {
+  input[type="range"] {
+    background: linear-gradient(to right,
+      oklch(0.75 0.0883 226.04) calc(var(--progress) * 100%),
+      oklch(0.93 0.0358 205.23) calc(var(--progress) * 100%)
+    );
+  }
+}
+</style>

components/hana/VolumeController.vue

@@ -58,7 +58,7 @@ function handleInput(e: Event) {
     @mouseleave="toggleShowVolumePanel"
   >
     <div class="absolute bottom-2 flex flex-col items-center gap-4">
-      <p class="text-xs text-text">
+      <p class="text-xs text-text dark:text-hana-white-700">
         {{ Math.round(volume * 100) }}%
       </p>
       <input
@@ -92,7 +92,7 @@ function handleInput(e: Event) {
     oklch(0.5 0.1102 250.04) calc(var(--progress) * 100%),
     oklch(0.93 0.0358 205.23) calc(var(--progress) * 100%)
   );
-  appearance: slider-vertical;
-  writing-mode: bt-lr;
+  writing-mode: vertical-lr;
+  direction: rtl;
 }
 </style>

components/recently/MusicCard.vue

@@ -61,18 +61,18 @@ function stepMusic(type: 'prev' | 'next') {
 </script>
 
 <template>
-  <div class="w-full flex flex-col gap-3 overflow-hidden border border-hana-blue-200 rounded-lg bg-hana-blue-200/10 p-4 sm:flex-row sm:items-center">
+  <div class="w-full flex flex-col gap-3 overflow-hidden border border-hana-blue-200 rounded-lg bg-hana-blue-200/10 p-4 sm:flex-row sm:items-center dark:bg-hana-black">
     <nuxt-img
       :src="curMusic.album.cover"
       :alt="curMusic.album.title"
       class="aspect-video w-full rounded-lg object-cover sm:aspect-square sm:size-42"
     />
     <div class="min-w-0 flex flex-1 flex-col gap-3">
       <div class="min-w-0 flex flex-col gap-1">
-        <h3 class="truncate text-base font-bold leading-snug md:text-lg">
+        <h3 class="truncate text-base font-bold leading-snug md:text-lg dark:text-hana-white">
           {{ curMusic.title }}
         </h3>
-        <p class="truncate text-sm text-text-3">
+        <p class="truncate text-sm text-text dark:text-hana-white-700">
           {{ curMusic.album.title }}
         </p>
       </div>
@@ -98,9 +98,9 @@ function stepMusic(type: 'prev' | 'next') {
           @click="stepMusic('next')"
         />
       </div>
-      <input
+      <!-- <input
         id="music-progress"
-        class="h-2 appearance-none rounded outline-none transition-[box-shadow] duration-200 accent-hana-blue dark:bg-hana-black-700 focus-visible:ring-2 focus-visible:ring-hana-blue-300"
+        class="h-2 appearance-none rounded outline-none transition-[box-shadow] duration-200 accent-hana-blue dark:bg-hana-black-700 focus-visible:ring-2 focus-visible:ring-hana-blue-300 dark:accent-hana-blue-300"
         type="range"
         min="0"
         max="1"
@@ -114,8 +114,22 @@ function stepMusic(type: 'prev' | 'next') {
         @input="handleInput"
         @change="handleChange"
         @pointerdown="isSeeking = true"
-      >
-      <div class="w-full flex items-center justify-between text-xs text-text tabular-nums">
+      > -->
+      <hana-range-input
+        id="music-progress"
+        :min="0"
+        :max="1"
+        :step="0.001"
+        :value="currentProgress"
+        :aria-valuemin="0"
+        :aria-valuemax="1"
+        :aria-valuenow="progressPercent"
+        aria-label="播放进度"
+        @input="handleInput"
+        @change="handleChange"
+        @pointerdown="isSeeking = true"
+      />
+      <div class="w-full flex items-center justify-between text-xs text-text tabular-nums dark:text-hana-white-700">
         <p>{{ formatTime(currentTime) }}</p>
         <p>{{ formatTime(curMusic.seconds) }}</p>
       </div>
@@ -130,4 +144,13 @@ function stepMusic(type: 'prev' | 'next') {
     oklch(0.93 0.0358 205.23) calc(var(--progress) * 100%)
   );
 }
+
+.dark {
+  #music-progress {
+    background: linear-gradient(to right,
+      oklch(0.75 0.0883 226.04) calc(var(--progress) * 100%),
+      oklch(0.93 0.0358 205.23) calc(var(--progress) * 100%)
+    );
+  }
+}
 </style>