From 48a1c6bb1da55613f6aec566a12d5582a76c3cb5 Mon Sep 17 00:00:00 2001
From: neon <18559658+neonsolstice@users.noreply.github.com>
Date: Thu, 26 Mar 2026 07:49:30 -0600
Subject: [PATCH] fix: restore Genre Reading Time treemap colors using
 getThemePalette

---
 .../components/user/GenreReadingTimeTreemapChart.vue   | 10 ++++++++--
 client/src/lib/echarts.ts                              | 10 ++++++++++
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/client/src/features/statistics/components/user/GenreReadingTimeTreemapChart.vue b/client/src/features/statistics/components/user/GenreReadingTimeTreemapChart.vue
index fc5163f96..014e00a19 100644
--- a/client/src/features/statistics/components/user/GenreReadingTimeTreemapChart.vue
+++ b/client/src/features/statistics/components/user/GenreReadingTimeTreemapChart.vue
@@ -3,11 +3,14 @@ import { computed, shallowRef, watchEffect } from 'vue'
 import VChart from 'vue-echarts'
 import { Tag } from 'lucide-vue-next'
 
+import { useThemeStore } from '@/stores/theme'
+import { getThemePalette, readCssColor } from '@/lib/echarts'
 import { useUserGenreReadingTime } from '../../composables/useUserGenreReadingTime'
 import ChartCard from '../ChartCard.vue'
 
 const MIN_GENRES = 2
 
+const themeStore = useThemeStore()
 const { data, loading, error } = useUserGenreReadingTime()
 
 const totalSeconds = computed(() => data.value.reduce((s, item) => s + item.readingSeconds, 0))
@@ -20,6 +23,9 @@ watchEffect(() => {
   option.value = {}
   if (isEmpty.value || !hasEnoughData.value || !data.value.length) return
 
+  const palette = getThemePalette(themeStore.theme, themeStore.accent)
+  const background = readCssColor('--background')
+
   option.value = {
     tooltip: {
       trigger: 'item',
@@ -40,9 +46,9 @@ watchEffect(() => {
           name: item.genre,
           value: item.readingSeconds,
           itemStyle: {
-            color: `var(--chart-${(i % 10) + 1})`,
+            color: palette[i % palette.length],
             borderWidth: 2,
-            borderColor: 'var(--background)',
+            borderColor: background,
           },
         })),
         label: {
diff --git a/client/src/lib/echarts.ts b/client/src/lib/echarts.ts
index 889f76f3a..7101db032 100644
--- a/client/src/lib/echarts.ts
+++ b/client/src/lib/echarts.ts
@@ -171,6 +171,16 @@ function oklchToHex(L: number, C: number, H: number): string {
   )
 }
 
+export function getThemePalette(mode: ProjectxThemeMode, accent: string): string[] {
+  const resolvedAccent = accent in ACCENT_PRIMARY ? accent : DEFAULT_ACCENT
+  const def = ACCENT_PRIMARY[resolvedAccent]!
+  const dark = mode === 'dark'
+  const L = dark ? def[2] : def[0]
+  const C = dark ? def[3] : def[1]
+  const H = ACCENT_HUE[resolvedAccent]!
+  return HUE_OFFSETS.map((off) => oklchToHex(L, C, H + off))
+}
+
 function buildTheme(accent: string, dark: boolean) {
   const def = ACCENT_PRIMARY[accent] ?? ACCENT_PRIMARY[DEFAULT_ACCENT]!
   const L = dark ? def[2] : def[0]