diff --git a/app/components/Chart/SplitSparkline.vue b/app/components/Chart/SplitSparkline.vue
index e63ea4e4f5..7b9fee5c6f 100644
--- a/app/components/Chart/SplitSparkline.vue
+++ b/app/components/Chart/SplitSparkline.vue
@@ -5,7 +5,7 @@ import {
   type VueUiSparklineDatasetItem,
 } from 'vue-data-ui/vue-ui-sparkline'
 import { VueUiPatternSeed } from 'vue-data-ui/vue-ui-pattern-seed'
-import { useCssVariables } from '~/composables/useColors'
+import { useColors } from '~/composables/useColors'
 import type { VueUiXyDatasetItem } from 'vue-data-ui/vue-ui-xy'
 import { getPalette, lightenColor } from 'vue-data-ui/utils'
 import { CHART_PATTERN_CONFIG } from '~/utils/charts'
@@ -50,23 +50,7 @@ watch(
   { flush: 'sync', immediate: true },
 )
 
-const { colors } = useCssVariables(
-  [
-    '--bg',
-    '--fg',
-    '--bg-subtle',
-    '--bg-elevated',
-    '--border-hover',
-    '--fg-subtle',
-    '--border',
-    '--border-subtle',
-  ],
-  {
-    element: rootEl,
-    watchHtmlAttributes: true,
-    watchResize: false, // set to true only if a var changes color on resize
-  },
-)
+const { colors } = useColors(rootEl)
 
 const isDarkMode = computed(() => resolvedMode.value === 'dark')
 
diff --git a/app/components/Compare/FacetBarChart.vue b/app/components/Compare/FacetBarChart.vue
index c48f9ad8e4..f8393c14b0 100644
--- a/app/components/Compare/FacetBarChart.vue
+++ b/app/components/Compare/FacetBarChart.vue
@@ -9,6 +9,7 @@ import { VueUiPatternSeed } from 'vue-data-ui/vue-ui-pattern-seed'
 import { getFrameworkColor, isListedFramework } from '~/utils/frameworks'
 import { createPatternDef } from 'vue-data-ui/utils'
 import { drawSmallNpmxLogoAndTaglineWatermark } from '~/composables/useChartWatermark'
+import { useColors } from '~/composables/useColors'
 
 import {
   loadFile,
@@ -40,23 +41,7 @@ const isMobile = computed(() => width.value > 0 && width.value < mobileBreakpoin
 
 const chartKey = ref(0)
 
-const { colors } = useCssVariables(
-  [
-    '--bg',
-    '--fg',
-    '--bg-subtle',
-    '--bg-elevated',
-    '--fg-subtle',
-    '--fg-muted',
-    '--border',
-    '--border-subtle',
-  ],
-  {
-    element: rootEl,
-    watchHtmlAttributes: true,
-    watchResize: false,
-  },
-)
+const { colors } = useColors(rootEl)
 
 const watermarkColors = computed(() => ({
   fg: colors.value.fg ?? OKLCH_NEUTRAL_FALLBACK,
diff --git a/app/components/Compare/FacetScatterChart.vue b/app/components/Compare/FacetScatterChart.vue
index 9f3cdc332b..2d5442c3e0 100644
--- a/app/components/Compare/FacetScatterChart.vue
+++ b/app/components/Compare/FacetScatterChart.vue
@@ -9,6 +9,7 @@ import {
 } from 'vue-data-ui/vue-ui-scatter'
 import { buildCompareScatterChartDataset } from '~/utils/compare-scatter-chart'
 import { loadFile, copyAltTextForCompareScatterChart } from '~/utils/charts'
+import { useColors } from '~/composables/useColors'
 
 import('vue-data-ui/style.css')
 
@@ -26,25 +27,7 @@ const { copy, copied } = useClipboard()
 const mobileBreakpointWidth = 640
 const isMobile = computed(() => width.value > 0 && width.value < mobileBreakpointWidth)
 
-const { colors } = useCssVariables(
-  [
-    '--bg',
-    '--fg',
-    '--bg-subtle',
-    '--bg-elevated',
-    '--fg-subtle',
-    '--fg-muted',
-    '--border',
-    '--border-subtle',
-    '--border-hover',
-    '--accent',
-  ],
-  {
-    element: rootEl,
-    watchHtmlAttributes: true,
-    watchResize: false,
-  },
-)
+const { colors } = useColors(rootEl)
 
 const watermarkColors = computed(() => ({
   fg: colors.value.fg ?? OKLCH_NEUTRAL_FALLBACK,
diff --git a/app/components/Package/TimelineChart.vue b/app/components/Package/TimelineChart.vue
index 53b0be9727..ed900fe42b 100644
--- a/app/components/Package/TimelineChart.vue
+++ b/app/components/Package/TimelineChart.vue
@@ -19,6 +19,7 @@ import {
 import type { TimelineVersion, SubEvent } from '~~/server/api/registry/timeline/[...pkg].get'
 import { drawSmallNpmxLogoAndTaglineWatermark } from '~/composables/useChartWatermark'
 import { useChartTooltipPosition } from '~/composables/useChartTooltipPosition'
+import { useColors } from '~/composables/useColors'
 
 import('vue-data-ui/style.css')
 
@@ -198,24 +199,7 @@ onMounted(async () => {
   resolvedMode.value = colorMode.value === 'dark' ? 'dark' : 'light'
 })
 
-const { colors } = useCssVariables(
-  [
-    '--bg',
-    '--fg',
-    '--bg-subtle',
-    '--bg-elevated',
-    '--fg-subtle',
-    '--fg-muted',
-    '--border',
-    '--border-subtle',
-    '--accent',
-  ],
-  {
-    element: rootEl,
-    watchHtmlAttributes: true,
-    watchResize: false,
-  },
-)
+const { colors } = useColors(rootEl)
 
 watch(
   () => colorMode.value,
diff --git a/app/components/Package/TrendsChart.vue b/app/components/Package/TrendsChart.vue
index 6499064a5a..995d430faf 100644
--- a/app/components/Package/TrendsChart.vue
+++ b/app/components/Package/TrendsChart.vue
@@ -2,7 +2,7 @@
 import type { Theme as VueDataUiTheme } from 'vue-data-ui'
 import { VueUiXy, type VueUiXyConfig, type VueUiXyDatasetItem } from 'vue-data-ui/vue-ui-xy'
 import { useDebounceFn, useElementSize, useTimeoutFn } from '@vueuse/core'
-import { useCssVariables } from '~/composables/useColors'
+import { useColors } from '~/composables/useColors'
 import { OKLCH_NEUTRAL_FALLBACK, transparentizeOklch, lightenOklch } from '~/utils/colors'
 import { getFrameworkColor, isListedFramework } from '~/utils/frameworks'
 import { drawNpmxLogoAndTaglineWatermark } from '~/composables/useChartWatermark'
@@ -92,23 +92,7 @@ onMounted(async () => {
   loadMetric(selectedMetric.value)
 })
 
-const { colors } = useCssVariables(
-  [
-    '--bg',
-    '--fg',
-    '--bg-subtle',
-    '--bg-elevated',
-    '--fg-subtle',
-    '--fg-muted',
-    '--border',
-    '--border-subtle',
-  ],
-  {
-    element: rootEl,
-    watchHtmlAttributes: true,
-    watchResize: false,
-  },
-)
+const { colors } = useColors(rootEl)
 
 watch(
   () => colorMode.value,
@@ -1390,6 +1374,8 @@ watch(
 
 const tooltipPosition = useChartTooltipPosition(chartRef)
 
+const keepZoomState = shallowRef(true)
+
 // VueUiXy chart component configuration
 const chartConfig = computed<VueUiXyConfig>(() => {
   return {
@@ -1589,7 +1575,7 @@ const chartConfig = computed<VueUiXyConfig>(() => {
         maxWidth: isMobile.value ? 350 : 500,
         highlightColor: colors.value.bgElevated,
         useResetSlot: true,
-        keepState: true,
+        keepState: keepZoomState.value,
         minimap: {
           show: true,
           lineColor: '#FAFAFA',
@@ -1641,6 +1627,28 @@ const isSparklineLayout = computed({
     chartLayout.value = v ? 'split' : 'combined'
   },
 })
+
+const { start: resetZoomState } = useTimeoutFn(
+  () => {
+    keepZoomState.value = true
+  },
+  1000,
+  { immediate: false },
+)
+
+async function resetZoom() {
+  keepZoomState.value = false
+  await nextTick()
+  chartRef.value?.resetZoom?.()
+  resetZoomState()
+}
+
+onMounted(resetZoom)
+
+watch([selectedGranularity, startDate, endDate], async () => {
+  if (!isMounted.value) return
+  await resetZoom()
+})
 </script>
 
 <template>
diff --git a/app/components/Package/VersionDistribution.vue b/app/components/Package/VersionDistribution.vue
index 225bc3193f..950dd38f29 100644
--- a/app/components/Package/VersionDistribution.vue
+++ b/app/components/Package/VersionDistribution.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { VueUiXy, type VueUiXyDatasetItem, type VueUiXyConfig } from 'vue-data-ui/vue-ui-xy'
 import { useElementSize } from '@vueuse/core'
-import { useCssVariables } from '~/composables/useColors'
+import { useColors } from '~/composables/useColors'
 import { OKLCH_NEUTRAL_FALLBACK, transparentizeOklch, lightenHex } from '~/utils/colors'
 import {
   drawSvgPrintLegend,
@@ -29,14 +29,7 @@ onMounted(async () => {
   resolvedMode.value = colorMode.value === 'dark' ? 'dark' : 'light'
 })
 
-const { colors } = useCssVariables(
-  ['--bg', '--fg', '--bg-subtle', '--bg-elevated', '--fg-subtle', '--border', '--border-subtle'],
-  {
-    element: rootEl,
-    watchHtmlAttributes: true,
-    watchResize: false,
-  },
-)
+const { colors } = useColors(rootEl)
 
 watch(
   () => colorMode.value,
diff --git a/app/components/Package/WeeklyDownloadStats.vue b/app/components/Package/WeeklyDownloadStats.vue
index ceb5d1718f..77fdf6e7d3 100644
--- a/app/components/Package/WeeklyDownloadStats.vue
+++ b/app/components/Package/WeeklyDownloadStats.vue
@@ -4,7 +4,7 @@ import {
   type VueUiSparklineConfig,
   type VueUiSparklineDatasetItem,
 } from 'vue-data-ui/vue-ui-sparkline'
-import { useCssVariables } from '~/composables/useColors'
+import { useColors } from '~/composables/useColors'
 import type { WeeklyDataPoint } from '~/types/chart'
 import { applyDataCorrection } from '~/utils/chart-data-correction'
 import { OKLCH_NEUTRAL_FALLBACK, lightenOklch } from '~/utils/colors'
@@ -86,23 +86,7 @@ watch(
   { flush: 'sync' },
 )
 
-const { colors } = useCssVariables(
-  [
-    '--bg',
-    '--fg',
-    '--bg-subtle',
-    '--bg-elevated',
-    '--border-hover',
-    '--fg-subtle',
-    '--border',
-    '--border-subtle',
-  ],
-  {
-    element: rootEl,
-    watchHtmlAttributes: true,
-    watchResize: false, // set to true only if a var changes color on resize
-  },
-)
+const { colors } = useColors(rootEl)
 
 const isDarkMode = computed(() => resolvedMode.value === 'dark')
 
diff --git a/app/composables/useColors.ts b/app/composables/useColors.ts
index 3b66e25fd1..7a5248627f 100644
--- a/app/composables/useColors.ts
+++ b/app/composables/useColors.ts
@@ -1,13 +1,21 @@
-import { computed, type ComputedRef, type Ref, unref } from 'vue'
+import { computed, shallowRef, type ComputedRef, type Ref, type ShallowRef, unref } from 'vue'
 import { useMutationObserver, useResizeObserver, useSupported } from '@vueuse/core'
 
 type CssVariableSource = HTMLElement | null | undefined | Ref<HTMLElement | null | undefined>
 
-type UseCssVariableOptions = {
-  element?: CssVariableSource
-  watchResize?: boolean
-  watchHtmlAttributes?: boolean
-}
+// Add existing css variables to expose in component scripts
+const colorVariables = [
+  '--accent',
+  '--bg',
+  '--bg-elevated',
+  '--bg-subtle',
+  '--border',
+  '--border-hover',
+  '--border-subtle',
+  '--fg',
+  '--fg-muted',
+  '--fg-subtle',
+] as const
 
 function readCssVariable(element: HTMLElement, variableName: string): string {
   return getComputedStyle(element).getPropertyValue(variableName).trim()
@@ -17,69 +25,42 @@ function toCamelCase(cssVariable: string): string {
   return cssVariable.replace(/^--/, '').replace(/-([a-z0-9])/gi, (_, c) => c.toUpperCase())
 }
 
-function resolveElement(element?: CssVariableSource): HTMLElement | null {
+function resolveElement(element: CssVariableSource): HTMLElement | null {
   if (typeof window === 'undefined' || typeof document === 'undefined') return null
-  if (!element) return document.documentElement
   const resolved = unref(element)
   return resolved ?? document.documentElement
 }
 
-/**
- * Read multiple CSS custom properties at once and expose them as a reactive object.
- *
- * Each CSS variable name is normalized into a camelCase key:
- * - Leading `--` is removed
- * - kebab-case is converted to camelCase
- *
- * Example:
- * ```ts
- * useCssVariables(['--bg', '--fg-subtle'])
- * // => colors.value = { bg: '...', fgSubtle: '...' }
- * ```
- *
- * The returned values are always resolved via `getComputedStyle`, meaning the
- * effective value is returned (after cascade, theme classes, etc.).
- *
- * Reactivity behavior:
- * - Updates automatically when the observed element changes
- * - Can react to theme toggles via `watchHtmlAttributes`
- * - Can react to responsive CSS variables via `watchResize`
- *
- * @param variables - List of CSS variable names (must include the leading `--`)
- * @param options - Configuration options
- * @param options.element - Element to read variables from (defaults to `:root`)
- * @param options.watchResize - Re-evaluate values on resize (useful for media-query-driven variables)
- * @param options.watchHtmlAttributes - Re-evaluate values when `<html>` attributes change
- *
- * @returns An object containing a reactive `colors` map, keyed by camelCase names
- */
-export function useCssVariables(
-  variables: readonly string[],
-  options: UseCssVariableOptions = {},
+export function useColors(
+  element: ShallowRef<HTMLElement | null, HTMLElement | null>,
+  options: { watchHtmlAttributes?: boolean; watchResize?: boolean } = {},
 ): { colors: ComputedRef<Record<string, string>> } {
+  const recomputeToken = shallowRef(0)
+  const invalidateColors = () => {
+    recomputeToken.value += 1
+  }
+
   const isClientSupported = useSupported(
     () => typeof window !== 'undefined' && typeof document !== 'undefined',
   )
 
-  const elementComputed = computed(() => resolveElement(options.element))
-
   const colors = computed<Record<string, string>>(() => {
-    const element = elementComputed.value
-    if (!element) return {}
-
+    void recomputeToken.value
+    const resolvedElement = resolveElement(element)
+    if (!resolvedElement) return {}
     const result: Record<string, string> = {}
-    for (const variable of variables) {
-      result[toCamelCase(variable)] = readCssVariable(element, variable)
+    for (const variable of colorVariables) {
+      result[toCamelCase(variable)] = readCssVariable(resolvedElement, variable)
     }
     return result
   })
 
   if (options.watchResize) {
-    useResizeObserver(elementComputed, () => void colors.value)
+    useResizeObserver(element, invalidateColors)
   }
 
   if (options.watchHtmlAttributes && isClientSupported.value) {
-    useMutationObserver(document.documentElement, () => void colors.value, {
+    useMutationObserver(document.documentElement, invalidateColors, {
       attributes: true,
       attributeFilter: ['class', 'style', 'data-theme', 'data-bg-theme'],
     })
diff --git a/test/nuxt/composables/use-colors.spec.ts b/test/nuxt/composables/use-colors.spec.ts
deleted file mode 100644
index 1a00b199ae..0000000000
--- a/test/nuxt/composables/use-colors.spec.ts
+++ /dev/null
@@ -1,103 +0,0 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest'
-import { computed, nextTick, defineComponent } from 'vue'
-import { mount } from '@vue/test-utils'
-import type * as VueUseCore from '@vueuse/core'
-
-const useSupportedMock = vi.hoisted(() => vi.fn())
-const useMutationObserverMock = vi.hoisted(() => vi.fn())
-const useResizeObserverMock = vi.hoisted(() => vi.fn())
-
-let lastMutationObserverInstance: {
-  observe: ReturnType<typeof vi.fn>
-  disconnect: ReturnType<typeof vi.fn>
-  takeRecords: ReturnType<typeof vi.fn>
-} | null = null
-
-const mutationObserverConstructorMock = vi.hoisted(() =>
-  vi.fn(function MutationObserver() {
-    lastMutationObserverInstance = {
-      observe: vi.fn(),
-      disconnect: vi.fn(),
-      takeRecords: vi.fn(),
-    }
-    return lastMutationObserverInstance
-  }),
-)
-
-vi.mock('@vueuse/core', async () => {
-  const actual = await vi.importActual<typeof VueUseCore>('@vueuse/core')
-  return {
-    ...actual,
-    useSupported: useSupportedMock,
-    useMutationObserver: useMutationObserverMock,
-    useResizeObserver: useResizeObserverMock,
-  }
-})
-
-function mockComputedStyle(values: Record<string, string>) {
-  vi.stubGlobal('getComputedStyle', () => {
-    return {
-      getPropertyValue: (name: string) => values[name] ?? '',
-    } as any
-  })
-}
-
-function mountWithSetup(run: () => void) {
-  return mount(
-    defineComponent({
-      name: 'TestHarness',
-      setup() {
-        run()
-        return () => null
-      },
-    }),
-    { attachTo: document.body },
-  )
-}
-
-describe('useCssVariables', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    vi.resetModules()
-    lastMutationObserverInstance = null
-    vi.stubGlobal('MutationObserver', mutationObserverConstructorMock as any)
-  })
-
-  it('does not attach html mutation observer when client is not supported', async () => {
-    const { useCssVariables } = await import('~/composables/useColors')
-
-    useSupportedMock.mockReturnValueOnce(computed(() => false))
-    mockComputedStyle({ '--bg': 'oklch(1 0 0)' })
-
-    const wrapper = mountWithSetup(() => {
-      const { colors } = useCssVariables(['--bg'], { watchHtmlAttributes: true })
-      expect(colors.value.bg).toBe('oklch(1 0 0)')
-    })
-
-    await nextTick()
-
-    expect(useMutationObserverMock).not.toHaveBeenCalled()
-    expect(lastMutationObserverInstance).not.toBeNull()
-    expect(lastMutationObserverInstance!.observe).toHaveBeenCalledTimes(1)
-
-    wrapper.unmount()
-  })
-
-  it('attaches html mutation observer when client is supported', async () => {
-    const { useCssVariables } = await import('~/composables/useColors')
-
-    useSupportedMock.mockReturnValueOnce(computed(() => true))
-    mockComputedStyle({ '--bg': 'oklch(1 0 0)' })
-
-    const wrapper = mountWithSetup(() => {
-      useCssVariables(['--bg'], { watchHtmlAttributes: true })
-    })
-
-    await nextTick()
-
-    expect(lastMutationObserverInstance).not.toBeNull()
-    expect(lastMutationObserverInstance!.observe).toHaveBeenCalledTimes(1)
-
-    wrapper.unmount()
-  })
-})
diff --git a/test/unit/app/composables/use-colors.spec.ts b/test/unit/app/composables/use-colors.spec.ts
new file mode 100644
index 0000000000..6d8369a6c1
--- /dev/null
+++ b/test/unit/app/composables/use-colors.spec.ts
@@ -0,0 +1,60 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { computed, shallowRef } from 'vue'
+import { useColors } from '~/composables/useColors'
+
+const useSupportedMock = vi.hoisted(() => vi.fn())
+const useMutationObserverMock = vi.hoisted(() => vi.fn())
+const useResizeObserverMock = vi.hoisted(() => vi.fn())
+
+vi.mock('@vueuse/core', () => {
+  return {
+    useSupported: (callback: () => boolean) => {
+      useSupportedMock(callback)
+      return computed(() => callback())
+    },
+    useMutationObserver: useMutationObserverMock,
+    useResizeObserver: useResizeObserverMock,
+  }
+})
+
+describe('useColors', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  afterEach(() => {
+    vi.unstubAllGlobals()
+  })
+
+  it('does not attach an html mutation observer when client is not supported', () => {
+    vi.stubGlobal('window', undefined)
+    const elementReference = shallowRef<HTMLElement | null>(null)
+    useColors(elementReference, { watchHtmlAttributes: true })
+    expect(useMutationObserverMock).not.toHaveBeenCalled()
+  })
+
+  it('attaches a resize observer when enabled', () => {
+    const elementReference = shallowRef<HTMLElement | null>(null)
+    useColors(elementReference, { watchResize: true })
+    expect(useResizeObserverMock).toHaveBeenCalledTimes(1)
+    expect(useResizeObserverMock).toHaveBeenCalledWith(expect.any(Object), expect.any(Function))
+    const resizeCallback = useResizeObserverMock.mock.calls?.[0]?.[1]
+    expect(resizeCallback).toBeDefined()
+    expect(() => resizeCallback()).not.toThrow()
+  })
+
+  it('does not attach observers by default', () => {
+    const elementReference = shallowRef<HTMLElement | null>(null)
+    useColors(elementReference)
+    expect(useMutationObserverMock).not.toHaveBeenCalled()
+    expect(useResizeObserverMock).not.toHaveBeenCalled()
+  })
+
+  it('returns an empty color object when window or document is unavailable', () => {
+    vi.stubGlobal('window', undefined)
+    vi.stubGlobal('document', undefined)
+    const elementReference = shallowRef<HTMLElement | null>(null)
+    const { colors } = useColors(elementReference)
+    expect(colors.value).toEqual({})
+  })
+})