Always use Dark-/LightVibrant color as primary color dynamic theme

CHANGELOG.md

@@ -8,6 +8,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
 ### Changed
 - (**Theme**) Improve automatic theme background colors
+- (**Theme**) Adjust "primary color" of dynamic color theme on manga pages
 
 ## [20251230.01] (r2937) - 2025-12-30
 

src/features/theme/services/ThemeCreator.ts

@@ -17,7 +17,6 @@ import {
 import { useCallback } from 'react';
 // eslint-disable-next-line import/no-extraneous-dependencies,no-restricted-imports
 import { deepmerge } from '@mui/utils';
-import { Palette } from '@vibrant/color';
 import { PaletteBackgroundChannel } from 'node_modules/@mui/material/esm/styles/createThemeWithVars';
 import { complement, hsl, parseToHsl } from 'polished';
 import { MediaQuery } from '@/base/utils/MediaQuery.tsx';
@@ -98,50 +97,15 @@ const createAppThemeWithDynamicColors = (
     } satisfies AppTheme['muiTheme'];
 };
 
-const getHighestPopulationColor = (
+const getVibrantColorForTheme = (
-    palette: NonNullableProperties<Palette> | null,
+    palette: TAppThemeContext['dynamicColor'] | null,
     mode: Exclude<ThemeMode, ThemeMode.SYSTEM>,
-): string | null => {
+): string | undefined => {
     if (!palette) {
-        return null;
+        return undefined;
     }
 
-    let highestPopulation = 0;
+    return mode === ThemeMode.LIGHT ? palette.DarkVibrant.hex : palette.LightVibrant.hex;
-    let highestPopulationKey: string = '';
-    let highestPopulationColor: string = '';
-
-    // eslint-disable-next-line guard-for-in
-    for (const key in palette) {
-        const swatch = palette[key];
-
-        if (swatch.population > highestPopulation) {
-            highestPopulationKey = key;
-            highestPopulation = swatch.population;
-            highestPopulationColor = swatch.hex;
-        }
-    }
-
-    if (mode === ThemeMode.LIGHT) {
-        if (highestPopulationKey.startsWith('Light')) {
-            return palette[highestPopulationKey.replace('Light', 'Dark')].hex;
-        }
-
-        if (!highestPopulationKey.startsWith('Dark')) {
-            return palette[`Dark${highestPopulationKey}`].hex;
-        }
-    }
-
-    if (mode === ThemeMode.DARK) {
-        if (highestPopulationKey.startsWith('Dark')) {
-            return palette[highestPopulationKey.replace('Dark', 'Light')].hex;
-        }
-
-        if (!highestPopulationKey.startsWith('Light')) {
-            return palette[`Light${highestPopulationKey}`].hex;
-        }
-    }
-
-    return highestPopulationColor;
 };
 
 const createAppColorTheme = (
@@ -186,7 +150,7 @@ const createAppColorTheme = (
     });
 
     const appThemeWithVibrantPrimaryColor = createAppThemeWithDynamicColors(
-        getHighestPopulationColor(dynamicColor, mode),
+        getVibrantColorForTheme(dynamicColor, mode),
         themeBackgroundColor,
     );
     return deepmerge(themeBackgroundColor, appThemeWithVibrantPrimaryColor);