refactor: replace custom color with preset color

src/common/component/Message/Commands.tsx

@@ -127,7 +127,7 @@ const Commands: FC<Props> = ({ context = "user", contextId = 0, mid = 0, toggleE
         )}
         <li className="flex cursor-pointer p-1 hover:bg-gray-100 dark:hover:bg-gray-800" onClick={handleAddFav}>
           <Tooltip placement="top" tip={t("action.add_to_fav")}>
-            <IconBookmark className="fill-[#667085] w-6 h-6" />
+            <IconBookmark className="fill-slate-500 w-6 h-6" />
           </Tooltip>
         </li>
         <Tippy

src/common/component/Message/Reaction.tsx

@@ -65,7 +65,7 @@ const Reaction: FC<Props> = ({ mid, reactions = null, readOnly = false }) => {
         return uids.length > 0 ? (
           <span
             onClick={readOnly ? undefined : handleReact.bind(null, reaction)}
-            className={`cursor-pointer rounded-md relative flex items-center gap-1 p-1 hover:bg-[#cff9fe] ${reacted ? "shadow-[inset_0_0_0_1px_#06aed4] bg-[#a5f0fc]" : ""}`}
+            className={`cursor-pointer rounded-md relative flex items-center gap-1 p-1 hover:bg-cyan-100 ${reacted ? "shadow-[inset_0_0_0_1px_#06aed4] bg-cyan-200" : ""}`}
             key={reaction}
           >
             <Tippy
@@ -93,7 +93,7 @@ const Reaction: FC<Props> = ({ mid, reactions = null, readOnly = false }) => {
             trigger="click"
             content={<ReactionPicker mid={mid} hidePicker={hideAll} />}
           >
-            <button className="invisible group-hover:visible w-6 h-6 bg-[#ecfdff] hover:bg-[#cff9fe] rounded-md flex-center">
+            <button className="invisible group-hover:visible w-6 h-6 bg-cyan-100 hover:bg-cyan-200 rounded-md flex-center">
               <IconAddEmoji className={'w-4 h-4'} />
             </button>
           </Tippy>