diff --git a/packages/console/src/pages/SignInExperience/components/ColorForm.tsx b/packages/console/src/pages/SignInExperience/components/ColorForm.tsx
index 03da48fb0..137707471 100644
--- a/packages/console/src/pages/SignInExperience/components/ColorForm.tsx
+++ b/packages/console/src/pages/SignInExperience/components/ColorForm.tsx
@@ -1,6 +1,6 @@
 import { absoluteLighten } from '@logto/shared';
 import color from 'color';
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback, useEffect, useMemo } from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
@@ -24,11 +24,15 @@ const ColorForm = () => {
 
   const isDarkModeEnabled = watch('color.isDarkModeEnabled');
   const primaryColor = watch('color.primaryColor');
+  const darkPrimaryColor = watch('color.darkPrimaryColor');
+
+  const calculatedDarkPrimaryColor = useMemo(() => {
+    return absoluteLighten(color(primaryColor), 10).hex();
+  }, [primaryColor]);
 
   const handleResetColor = useCallback(() => {
-    const darkPrimaryColor = absoluteLighten(color(primaryColor), 10);
-    setValue('color.darkPrimaryColor', darkPrimaryColor.hex());
-  }, [primaryColor, setValue]);
+    setValue('color.darkPrimaryColor', calculatedDarkPrimaryColor);
+  }, [calculatedDarkPrimaryColor, setValue]);
 
   useEffect(() => {
     if (!isDirty) {
@@ -70,15 +74,17 @@ const ColorForm = () => {
               )}
             />
           </FormField>
-          <div className={styles.darkModeTip}>
-            {t('sign_in_exp.color.dark_mode_reset_tip')}
-            <Button
-              type="plain"
-              size="small"
-              title="admin_console.sign_in_exp.color.reset"
-              onClick={handleResetColor}
-            />
-          </div>
+          {calculatedDarkPrimaryColor !== darkPrimaryColor && (
+            <div className={styles.darkModeTip}>
+              {t('sign_in_exp.color.dark_mode_reset_tip')}
+              <Button
+                type="plain"
+                size="small"
+                title="admin_console.sign_in_exp.color.reset"
+                onClick={handleResetColor}
+              />
+            </div>
+          )}
         </>
       )}
     </>