/**
 * 图表取色。
 *
 * Canvas 里画的东西不认 CSS 变量，颜色要在 JS 里解析出来传给 ECharts。
 * themeTick 在主题变化（设置页显式切换写 data-theme，或系统偏好翻转）时走一格，
 * 图表的 option 把它算进依赖，主题一变整个重新取色。
 */
import { ref } from 'vue'

export const themeTick = ref(0)

const bump = () => {
  themeTick.value += 1
}

new MutationObserver(bump).observe(document.documentElement, {
  attributes: true,
  attributeFilter: ['data-theme'],
})
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', bump)

/** 当前生效的某个 CSS 变量的值，如 cssColor('--c-accent')。 */
export function cssColor(name: string): string {
  return getComputedStyle(document.documentElement).getPropertyValue(name).trim()
}