From b252b2eb20e78df551753a9c5d3f930ed0bee60b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BE=90=E6=B6=9B?= <midnite@outlook.com>
Date: Thu, 2 Jan 2025 09:00:08 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E9=A2=9C=E8=89=B2=E6=8B=A3?=
 =?UTF-8?q?=E9=80=89=E5=99=A8=EF=BC=8C=E4=BD=BF=E5=85=B6=E8=83=BD=E5=88=9D?=
 =?UTF-8?q?=E5=A7=8B=E5=8C=96=E9=A2=9C=E8=89=B2=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Harmonies.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/pages/Harmonies.tsx b/src/pages/Harmonies.tsx
index 5714fac..864934b 100644
--- a/src/pages/Harmonies.tsx
+++ b/src/pages/Harmonies.tsx
@@ -1,19 +1,20 @@
 import cx from 'clsx';
+import { useAtom } from 'jotai';
 import { useMemo, useState } from 'react';
 import { useColorFunction } from '../ColorFunctionContext';
 import { ColorPicker } from '../components/ColorPicker';
 import { VSegmentedControl } from '../components/VSegmentedControl';
 import { HarmonyColor } from '../models';
 import { HarmonyPreview } from '../page-components/harmonies/HarmonyPreview';
+import { currentPickedColor } from '../stores/colors';
 import styles from './Harmonies.module.css';
 
 export function Harmonies() {
   const { colorFn } = useColorFunction();
-  const [seletedColor, setSelectedColor] = useState('000000');
+  const [seletedColor, setSelectedColor] = useAtom(currentPickedColor);
   const [selectedMode, setSelectedMode] = useState('complementary');
   const generatedColors = useMemo(() => {
     try {
-      console.debug('[Mode]', selectedMode);
       const colors: HarmonyColor[] = [];
       switch (selectedMode) {
         case 'complementary':
@@ -91,7 +92,6 @@ export function Harmonies() {
         default:
           break;
       }
-      console.debug('[Generated colors]', colors);
       return colors;
     } catch (error) {
       console.error('[Generate Color Series]', error);
@@ -109,7 +109,7 @@ export function Harmonies() {
         <aside className={styles.function_side}>
           <div>
             <h5>Basic color</h5>
-            <ColorPicker onSelect={setSelectedColor} />
+            <ColorPicker color={seletedColor} onSelect={(color) => setSelectedColor(color)} />
           </div>
           <div className={styles.mode_navigation}>
             <h5>Color selection method</h5>