fix: aligned solution after rebase

Author: gusa4grr

app/app.vue

@@ -22,7 +22,7 @@ const localeMap = locales.value.reduce(
 )
 
 const darkMode = usePreferredDark()
-const colorMode = useColorMode()
+const { colorMode } = useColorModePreference()
 const colorScheme = computed(() => {
   return {
     system: darkMode ? 'dark light' : 'light dark',

app/components/Chart/SplitSparkline.vue

@@ -28,7 +28,7 @@ const props = defineProps<{
 }>()
 
 const { locale } = useI18n()
-const colorMode = useColorMode()
+const { colorMode } = useColorModePreference()
 const resolvedMode = shallowRef<'light' | 'dark'>('light')
 const rootEl = shallowRef<HTMLElement | null>(null)
 const palette = getPalette('')

app/components/Compare/FacetBarChart.vue

@@ -24,7 +24,7 @@ const props = defineProps<{
   facetLoading?: boolean
 }>()
 
-const colorMode = useColorMode()
+const { colorMode } = useColorModePreference()
 const resolvedMode = shallowRef<'light' | 'dark'>('light')
 const rootEl = shallowRef<HTMLElement | null>(null)
 const { width } = useElementSize(rootEl)

app/components/Package/Header.vue

@@ -120,7 +120,7 @@ const diffLink = computed((): RouteLocationRaw | null => {
   return diffRoute(props.pkg.name, props.resolvedVersion, props.latestVersion.version)
 })
 
-const keyboardShortcuts = useKeyboardShortcuts()
+const keyboardShortcuts = useKeyboardShortcutsPreference()
 
 onKeyStroke(
   e => keyboardShortcuts.value && isKeyWithoutModifiers(e, '.') && !isEditableElement(e.target),

app/components/Package/TrendsChart.vue

@@ -62,7 +62,7 @@ const { accentColors, selectedAccentColor } = useAccentColor();
 const { localSettings } = useUserLocalSettings();
 const { copy, copied } = useClipboard();
 
-const colorMode = useColorMode();
+const { colorMode } = useColorModePreference();
 const resolvedMode = shallowRef<"light" | "dark">("light");
 const rootEl = shallowRef<HTMLElement | null>(null);
 const isZoomed = shallowRef(false);

app/components/Package/VersionDistribution.vue

@@ -21,7 +21,7 @@ const props = defineProps<{
 const { accentColors, selectedAccentColor } = useAccentColor()
 const { copy, copied } = useClipboard()
 
-const colorMode = useColorMode()
+const { colorMode } = useColorModePreference()
 const resolvedMode = shallowRef<'light' | 'dark'>('light')
 const rootEl = shallowRef<HTMLElement | null>(null)
 

app/components/Package/WeeklyDownloadStats.vue

@@ -20,6 +20,7 @@ const props = defineProps<{
 const router = useRouter()
 const route = useRoute()
 const { localSettings } = useUserLocalSettings()
+const { preferences } = useUserPreferencesState()
 
 const chartModal = useModal('chart-modal')
 const hasChartModalTransitioned = shallowRef(false)
@@ -63,7 +64,7 @@ const { fetchPackageDownloadEvolution } = useCharts()
 
 const { accentColors, selectedAccentColor } = useAccentColor()
 
-const colorMode = useColorMode()
+const { colorMode } = useColorModePreference()
 
 const resolvedMode = shallowRef<'light' | 'dark'>('light')
 
@@ -306,7 +307,7 @@ function layEgg() {
   showPulse.value = false
   nextTick(() => {
     showPulse.value = true
-    settings.value.enableGraphPulseLooping = !settings.value.enableGraphPulseLooping
+    preferences.value.enableGraphPulseLooping = !preferences.value.enableGraphPulseLooping
     playEggPulse()
   })
 }
@@ -364,7 +365,7 @@ const config = computed<VueUiSparklineConfig>(() => {
         color: colors.value.borderHover,
         pulse: {
           show: showPulse.value, // the pulse will not show if prefers-reduced-motion (enforced by vue-data-ui)
-          loop: settings.value.enableGraphPulseLooping,
+          loop: preferences.value.enableGraphPulseLooping,
           radius: 1.5,
           color: pulseColor.value!,
           easing: 'ease-in-out',

app/composables/userPreferences/useAccentColor.ts

@@ -3,7 +3,8 @@ import type { AccentColorId } from '#shared/schemas/userPreferences'
 
 export function useAccentColor() {
   const { preferences } = useUserPreferencesState()
-  const colorMode = useColorMode()
+  const { colorMode } = useColorModePreference()
+  const { t } = useI18n()
 
   const accentColors = computed(() => {
     const isDark = colorMode.value === 'dark'
@@ -12,6 +13,7 @@ export function useAccentColor() {
     return Object.entries(colors).map(([id, value]) => ({
       id: id as AccentColorId,
       name: id,
+      label: id === 'neutral' ? t('settings.clear_accent') : t(`settings.accent_colors.${id}`),
       value,
     }))
   })

app/composables/userPreferences/useBackgroundTheme.ts

@@ -2,13 +2,17 @@ import { BACKGROUND_THEMES } from '#shared/utils/constants'
 import type { BackgroundThemeId } from '#shared/schemas/userPreferences'
 
 export function useBackgroundTheme() {
-  const backgroundThemes = Object.entries(BACKGROUND_THEMES).map(([id, value]) => ({
-    id: id as BackgroundThemeId,
-    name: id,
-    value,
-  }))
-
   const { preferences } = useUserPreferencesState()
+  const { t } = useI18n()
+
+  const backgroundThemes = computed(() =>
+    Object.entries(BACKGROUND_THEMES).map(([id, value]) => ({
+      id: id as BackgroundThemeId,
+      name: id,
+      label: t(`settings.background_themes.${id}`),
+      value,
+    })),
+  )
 
   function setBackgroundTheme(id: BackgroundThemeId | null) {
     if (import.meta.server) {

app/composables/userPreferences/useColorModePreference.ts

@@ -26,6 +26,7 @@ export function useColorModePreference() {
   }
 
   return {
+    colorMode,
     colorModePreference: computed(
       () => preferences.value.colorModePreference ?? colorMode.preference,
     ),