From 27c53cd6882de0b0110274c0b5266a02ed00e0b0 Mon Sep 17 00:00:00 2001
From: Soybean <soybeanjs@outlook.com>
Date: Tue, 16 Apr 2024 00:14:32 +0800
Subject: [PATCH] fix(projects): fix update theme color

---
 packages/color-palette/src/index.ts |  1 +
 src/store/modules/theme/index.ts    | 10 ++++++++--
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/color-palette/src/index.ts b/packages/color-palette/src/index.ts
index 790220b4..2c7543a8 100644
--- a/packages/color-palette/src/index.ts
+++ b/packages/color-palette/src/index.ts
@@ -3,6 +3,7 @@ import { getColorName } from './name';
 import type { ColorPalette, ColorPaletteFamily, ColorPaletteItem, ColorPaletteNumber } from './type';
 import defaultPalettes from './json/palette.json';
 
+// to do: there is a bug in the code below, when the color is '#1c5cff', the colorPaletteFamily is not similar to the provided color
 /**
  * Get color palette by provided color and color name
  *
diff --git a/src/store/modules/theme/index.ts b/src/store/modules/theme/index.ts
index 248c479a..96778742 100644
--- a/src/store/modules/theme/index.ts
+++ b/src/store/modules/theme/index.ts
@@ -2,6 +2,7 @@ import { computed, effectScope, onScopeDispose, ref, toRefs, watch } from 'vue';
 import type { Ref } from 'vue';
 import { defineStore } from 'pinia';
 import { useEventListener, usePreferredColorScheme } from '@vueuse/core';
+import { getColorPalette } from '@sa/color-palette';
 import { SetupStoreId } from '@/enum';
 import { localStg } from '@/utils/storage';
 import { addThemeVarsToHtml, createThemeToken, getNaiveTheme, initThemeSettings, toggleCssDarkMode } from './shared';
@@ -79,10 +80,15 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
    * @param color Theme color
    */
   function updateThemeColors(key: App.Theme.ThemeColorKey, color: string) {
+    // get a color palette by provided color and color name, and use the suitable color
+    const colorPalette = getColorPalette(color, key);
+
+    const mainColor = colorPalette.main.hexcode;
+
     if (key === 'primary') {
-      settings.value.themeColor = color;
+      settings.value.themeColor = mainColor;
     } else {
-      settings.value.otherColor[key] = color;
+      settings.value.otherColor[key] = mainColor;
     }
   }