feat: add color picker label template in PreferencesDrawer to optimize color contrast calculation

src/layout/header/actions/component/PreferencesDrawer.vue

@@ -14,7 +14,9 @@ import { ButtonAnimation, ButtonAnimationProvider } from '@/components'
 import { useComponentThemeOverrides, useInjection, usePersonalization } from '@/composables'
 import { mediaQueryInjectionKey } from '@/injection'
 import { usePreferencesStore, useSystemStore } from '@/stores'
+import { ccAPCA } from '@/utils/chromaHelper'
 import twColors from '@/utils/tailwindColor'
+import twc from '@/utils/tailwindColor'
 
 import NoiseModal from './NoiseModal.vue'
 import WatermarkModal from './WatermarkModal.vue'
@@ -125,7 +127,14 @@ const showNoiseModal = () => {
               :default-value="color"
               :swatches="colorSwatches"
               @update-value="setColor"
-            />
+            >
+              <template #label="color">
+                <span
+                  :style="color && { color: ccAPCA(color, twc.neutral[150], twc.neutral[950]) }"
+                  >{{ color }}</span
+                >
+              </template>
+            </NColorPicker>
           </div>
           <div>
             <NDivider>布局相关</NDivider>

src/theme/common.ts

@@ -1,52 +1,8 @@
-import chroma from 'chroma-js'
-
-import { usePersonalization } from '@/composables'
+import { ccAPCA, cdh } from '@/utils/chromaHelper'
 import twc from '@/utils/tailwindColor'
 
 import type { GlobalThemeOverrides } from 'naive-ui'
 
-const { isDark } = usePersonalization()
-
-export function ccAPCA(
-  backgroundColor: string,
-  color1: string = '#ffffff',
-  color2: string = '#000000',
-  bodyColor?: string,
-): string {
-  bodyColor = isDark.value ? twc.neutral[950] : twc.neutral[25]
-
-  const cBackgroundColor = chroma(backgroundColor)
-  const cBodyColor = chroma(bodyColor)
-
-  const actualDisplayColor = chroma.mix(
-    cBackgroundColor.alpha(1),
-    cBodyColor,
-    1 - cBackgroundColor.alpha(),
-    'rgb',
-  )
-
-  const contrastWithLight = Math.abs(chroma.contrastAPCA(color1, actualDisplayColor))
-  const contrastWithDark = Math.abs(chroma.contrastAPCA(color2, actualDisplayColor))
-
-  return contrastWithLight > contrastWithDark ? color1 : color2
-}
-
-export function cah(color: string, value: number) {
-  return chroma(color).alpha(value).hex()
-}
-
-export function cbh(color: string, value: number) {
-  return chroma(color).brighten(value).hex()
-}
-
-export function cdh(color: string, value: number) {
-  return chroma(color).darken(value).hex()
-}
-
-export function cmh(color1: string, color2: string, ratio: number) {
-  return chroma.mix(color1, color2, ratio).hex()
-}
-
 export function commonThemeOverrides(primaryColor = ''): GlobalThemeOverrides {
   return {
     common: {

src/theme/dark.ts

@@ -1,7 +1,6 @@
+import { cbh, cdh, cah, cmh } from '@/utils/chromaHelper'
 import twc from '@/utils/tailwindColor'
 
-import { cbh, cdh, cah, cmh } from './common'
-
 import type { GlobalThemeOverrides } from 'naive-ui'
 
 const dark = {

src/theme/light.ts

@@ -1,7 +1,6 @@
+import { cbh, cdh, cah, cmh } from '@/utils/chromaHelper'
 import twc from '@/utils/tailwindColor'
 
-import { cbh, cdh, cah, cmh } from './common'
-
 import type { GlobalThemeOverrides } from 'naive-ui'
 
 const light = {

src/utils/chromaHelper.ts

@@ -0,0 +1,48 @@
+import chroma from 'chroma-js'
+
+import { usePersonalization } from '@/composables'
+import twc from '@/utils/tailwindColor'
+
+const { isDark } = usePersonalization()
+
+export function ccAPCA(
+  backgroundColor: string,
+  color1: string = '#ffffff',
+  color2: string = '#000000',
+  bodyColor?: string,
+): string {
+  if (!bodyColor) {
+    bodyColor = isDark.value ? twc.neutral[950] : twc.neutral[25]
+  }
+
+  const cBackgroundColor = chroma(backgroundColor)
+  const cBodyColor = chroma(bodyColor)
+
+  const actualDisplayColor = chroma.mix(
+    cBackgroundColor.alpha(1),
+    cBodyColor,
+    1 - cBackgroundColor.alpha(),
+    'rgb',
+  )
+
+  const contrastWithLight = Math.abs(chroma.contrastAPCA(color1, actualDisplayColor))
+  const contrastWithDark = Math.abs(chroma.contrastAPCA(color2, actualDisplayColor))
+
+  return contrastWithLight > contrastWithDark ? color1 : color2
+}
+
+export function cah(color: string, value: number) {
+  return chroma(color).alpha(value).hex()
+}
+
+export function cbh(color: string, value: number) {
+  return chroma(color).brighten(value).hex()
+}
+
+export function cdh(color: string, value: number) {
+  return chroma(color).darken(value).hex()
+}
+
+export function cmh(color1: string, color2: string, ratio: number) {
+  return chroma.mix(color1, color2, ratio).hex()
+}