fix download chart

Author: jellydeck

app/components/AppLogo.vue

@@ -20,7 +20,7 @@ defineProps<{
       fill="var(--accent)"
       x="320"
       y="370"
-      font-family="ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace"
+      font-family="'Geist Mono',ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace"
       font-size="420"
       font-weight="500"
       text-anchor="middle"

app/components/PackageWeeklyDownloadStats.vue

@@ -64,7 +64,7 @@ const isDarkMode = computed(() => resolvedMode.value === 'dark')
 
 const accentColorValueById = computed<Record<string, string>>(() => {
   const map: Record<string, string> = {}
-  for (const item of accentColors) {
+  for (const item of accentColors.value) {
     map[item.id] = item.value
   }
   return map

app/composables/useSettings.ts

@@ -72,33 +72,44 @@ export function useAccentColor() {
   const { settings } = useSettings()
   const colorMode = useColorMode()
 
-  const accentColors = computed(() =>
-    Object.entries(ACCENT_COLORS[colorMode.value as 'light' | 'dark']).map(([id, value]) => ({
+  const accentColors = computed(() => {
+    const mode = (colorMode.value || 'dark') as 'light' | 'dark'
+    const colors = ACCENT_COLORS[mode]
+
+    return Object.entries(colors).map(([id, value]) => ({
       id: id as AccentColorId,
       name: id,
       value,
-    })),
-  )
-
-  const currentAccentColor = computed(() => {
-    const id = settings.value.accentColorId
-    const theme = colorMode.value as 'light' | 'dark'
-    return id ? ACCENT_COLORS[theme][id] : null
+    }))
   })
 
-  // Simple client-side check
+  function setAccentColor(id: AccentColorId | null) {
+    const mode = (colorMode.value || 'dark') as 'light' | 'dark'
+    const color = id ? ACCENT_COLORS[mode][id] : null
+
+    if (color) {
+      document.documentElement.style.setProperty('--accent-color', color)
+    } else {
+      document.documentElement.style.removeProperty('--accent-color')
+    }
+
+    settings.value.accentColorId = id
+  }
+
+  // Apply color on mount and when theme changes
   if (process.client) {
-    watchEffect(() => {
-      if (currentAccentColor.value) {
-        document.documentElement.style.setProperty('--accent-color', currentAccentColor.value)
-      } else {
-        document.documentElement.style.removeProperty('--accent-color')
-      }
+    onMounted(() => {
+      const id = settings.value.accentColorId
+      if (id) setAccentColor(id)
     })
-  }
 
-  function setAccentColor(id: AccentColorId | null) {
-    settings.value.accentColorId = id
+    watch(
+      () => colorMode.value,
+      () => {
+        const id = settings.value.accentColorId
+        if (id) setAccentColor(id)
+      },
+    )
   }
 
   return {