20260814173126

code/fms/fms-vue/src/theme/color.js

@@ -0,0 +1,196 @@
+// 约定：对外一律 hex('#rrggbb')，内部算法用 RGB 数组 [r, g, b]。
+
+// ---------- 配置 ----------
+export const STORAGE_KEYS = {
+  mode: 'fms-theme',
+  color: 'fms-theme-color',
+}
+
+export const DEFAULT_MODE = 'light'
+export const DEFAULT_COLOR = '#18181b'
+
+export const PRESETS = [
+  { name: 'Shadcn 中性', value: '#18181b' },
+  { name: '蓝色', value: '#2563eb' },
+  { name: '靛蓝', value: '#4f46e5' },
+  { name: '紫色', value: '#7c3aed' },
+  { name: '青色', value: '#0d9488' },
+  { name: '绿色', value: '#16a34a' },
+  { name: '橙色', value: '#ea580c' },
+  { name: '红色', value: '#dc2626' },
+  { name: '粉色', value: '#db2777' },
+]
+
+export const ALGORITHM = {
+  minContrast: 3, // 主色与背景最小对比度
+  hoverDelta: 0.06, // hover 明度偏移
+  activeDelta: 0.14, // active 明度偏移
+  borderMixRatio: 0.55, // 边框与背景混合比例
+}
+
+// 背景参照色：用于主色对比度兜底（浅色=纯白、深色=zinc-900，与原始实现保持一致）。
+export const SURFACES = {
+  light: '#ffffff',
+  dark: '#18181b',
+}
+
+// 主色上文字的前景候选（白 / 近黑），取对比度更大者。
+export const FOREGROUND_CANDIDATES = ['#ffffff', '#18181b']
+
+// ---------- 颜色数学 ----------
+export function normalizeHex(value) {
+  const color = String(value ?? '').trim().toLowerCase()
+
+  if (/^#[0-9a-f]{6}$/.test(color)) return color
+  if (/^#[0-9a-f]{3}$/.test(color)) {
+    const [red, green, blue] = color.slice(1)
+    return `#${red}${red}${green}${green}${blue}${blue}`
+  }
+
+  return null
+}
+
+export function hexToRgb(hex) {
+  return [
+    Number.parseInt(hex.slice(1, 3), 16),
+    Number.parseInt(hex.slice(3, 5), 16),
+    Number.parseInt(hex.slice(5, 7), 16),
+  ]
+}
+
+export function rgbToHex([red, green, blue]) {
+  return `#${[red, green, blue]
+    .map((channel) => Math.round(channel).toString(16).padStart(2, '0'))
+    .join('')}`
+}
+
+export function rgbToHsl([red, green, blue]) {
+  const r = red / 255
+  const g = green / 255
+  const b = blue / 255
+  const max = Math.max(r, g, b)
+  const min = Math.min(r, g, b)
+  const lightness = (max + min) / 2
+
+  if (max === min) return { h: 0, s: 0, l: lightness }
+
+  const delta = max - min
+  const saturation = lightness > 0.5 ? delta / (2 - max - min) : delta / (max + min)
+  let hue
+
+  if (max === r) hue = (g - b) / delta + (g < b ? 6 : 0)
+  else if (max === g) hue = (b - r) / delta + 2
+  else hue = (r - g) / delta + 4
+
+  return { h: hue / 6, s: saturation, l: lightness }
+}
+
+function hueToRgb(p, q, t) {
+  let hue = t
+  if (hue < 0) hue += 1
+  if (hue > 1) hue -= 1
+  if (hue < 1 / 6) return p + (q - p) * 6 * hue
+  if (hue < 1 / 2) return q
+  if (hue < 2 / 3) return p + (q - p) * (2 / 3 - hue) * 6
+  return p
+}
+
+export function hslToRgb({ h, s, l }) {
+  if (s === 0) {
+    const value = Math.round(l * 255)
+    return [value, value, value]
+  }
+
+  const q = l < 0.5 ? l * (1 + s) : l + s - l * s
+  const p = 2 * l - q
+
+  return [
+    Math.round(hueToRgb(p, q, h + 1 / 3) * 255),
+    Math.round(hueToRgb(p, q, h) * 255),
+    Math.round(hueToRgb(p, q, h - 1 / 3) * 255),
+  ]
+}
+
+export function adjustLightness(rgb, delta) {
+  const hsl = rgbToHsl(rgb)
+  return hslToRgb({ ...hsl, l: Math.min(1, Math.max(0, hsl.l + delta)) })
+}
+
+export function mixRgb(firstRgb, secondRgb, secondRatio) {
+  const firstRatio = 1 - secondRatio
+  return firstRgb.map((channel, index) =>
+    Math.round(channel * firstRatio + secondRgb[index] * secondRatio),
+  )
+}
+
+export function getRelativeLuminance(rgb) {
+  const [red, green, blue] = rgb.map((channel) => {
+    const value = channel / 255
+    return value <= 0.04045 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4
+  })
+
+  return red * 0.2126 + green * 0.7152 + blue * 0.0722
+}
+
+export function getContrastRatio(firstRgb, secondRgb) {
+  const firstLuminance = getRelativeLuminance(firstRgb)
+  const secondLuminance = getRelativeLuminance(secondRgb)
+  const lighter = Math.max(firstLuminance, secondLuminance)
+  const darker = Math.min(firstLuminance, secondLuminance)
+
+  return (lighter + 0.05) / (darker + 0.05)
+}
+
+// ---------- 主色派生 ----------
+function getForegroundRgb(themeRgb) {
+  const [light, dark] = FOREGROUND_CANDIDATES.map(hexToRgb)
+  const lightContrast = getContrastRatio(themeRgb, light)
+  const darkContrast = getContrastRatio(themeRgb, dark)
+
+  return lightContrast >= darkContrast ? light : dark
+}
+
+function ensurePrimaryContrast(rgb, backgroundRgb) {
+  if (getContrastRatio(rgb, backgroundRgb) >= ALGORITHM.minContrast) return rgb
+
+  const sourceLightness = rgbToHsl(rgb).l
+
+  for (let step = 1; step <= 100; step += 1) {
+    const delta = step / 100
+    const candidates = [adjustLightness(rgb, -delta), adjustLightness(rgb, delta)]
+    const candidate = candidates.find(
+      (item) => getContrastRatio(item, backgroundRgb) >= ALGORITHM.minContrast,
+    )
+
+    if (candidate) return candidate
+  }
+
+  return sourceLightness >= 0.5 ? adjustLightness(rgb, -0.5) : adjustLightness(rgb, 0.5)
+}
+
+export function createPrimaryTokens(color, mode) {
+  const sourceRgb = hexToRgb(color)
+  const backgroundRgb = hexToRgb(SURFACES[mode])
+  const primaryRgb = ensurePrimaryContrast(sourceRgb, backgroundRgb)
+  const primaryLightness = rgbToHsl(primaryRgb).l
+  const direction =
+    mode === 'dark' ? (primaryLightness > 0.85 ? -1 : 1) : primaryLightness < 0.15 ? 1 : -1
+  const hoverRgb = ensurePrimaryContrast(
+    adjustLightness(primaryRgb, direction * ALGORITHM.hoverDelta),
+    backgroundRgb,
+  )
+  const activeRgb = ensurePrimaryContrast(
+    adjustLightness(primaryRgb, direction * ALGORITHM.activeDelta),
+    backgroundRgb,
+  )
+  const primaryBorderRgb = mixRgb(primaryRgb, backgroundRgb, ALGORITHM.borderMixRatio)
+
+  return {
+    primary: rgbToHex(primaryRgb),
+    'primary-foreground': rgbToHex(getForegroundRgb(primaryRgb)),
+    'primary-hover': rgbToHex(hoverRgb),
+    'primary-active': rgbToHex(activeRgb),
+    'primary-border': rgbToHex(primaryBorderRgb),
+    ring: rgbToHex(primaryRgb),
+  }
+}

code/fms/fms-vue/src/theme/useTheme.js

@@ -0,0 +1,72 @@
+import { ref } from 'vue'
+import {
+  createPrimaryTokens,
+  DEFAULT_COLOR,
+  DEFAULT_MODE,
+  normalizeHex,
+  STORAGE_KEYS,
+} from './color'
+
+const theme = ref(DEFAULT_MODE)
+const themeColor = ref(DEFAULT_COLOR)
+
+function applyTheme() {
+  const root = document.documentElement
+  const tokens = createPrimaryTokens(themeColor.value, theme.value)
+
+  root.dataset.theme = theme.value
+  root.style.colorScheme = theme.value
+
+  for (const [name, value] of Object.entries(tokens)) {
+    root.style.setProperty(`--${name}`, value)
+  }
+}
+
+function readStorage(key) {
+  try {
+    return window.localStorage.getItem(key)
+  } catch {
+    return null
+  }
+}
+
+function writeStorage(key, value) {
+  try {
+    window.localStorage.setItem(key, value)
+  } catch {
+    // storage 不可用时主题仍生效。
+  }
+}
+
+export function initTheme() {
+  const storedMode = readStorage(STORAGE_KEYS.mode)
+  const storedColor = normalizeHex(readStorage(STORAGE_KEYS.color))
+
+  theme.value = storedMode === 'dark' ? 'dark' : 'light'
+  themeColor.value = storedColor ?? DEFAULT_COLOR
+  applyTheme()
+}
+
+function setTheme(value) {
+  theme.value = value === 'dark' ? 'dark' : 'light'
+  applyTheme()
+  writeStorage(STORAGE_KEYS.mode, theme.value)
+}
+
+function setThemeColor(value) {
+  const color = normalizeHex(value)
+  if (!color) return false
+
+  themeColor.value = color
+  applyTheme()
+  writeStorage(STORAGE_KEYS.color, color)
+  return true
+}
+
+function toggleTheme() {
+  setTheme(theme.value === 'dark' ? 'light' : 'dark')
+}
+
+export function useTheme() {
+  return { theme, themeColor, setTheme, setThemeColor, toggleTheme }
+}