From 0c3602c17c22d27a6bdd17b4691a66f04183b7f0 Mon Sep 17 00:00:00 2001
From: dhairyashil <dhairyashil10101010@gmail.com>
Date: Thu, 16 Jan 2025 03:49:36 +0530
Subject: [PATCH] Feat: Add color to link messages & link in link preview based
 on light and dark theme

---
 packages/markups/src/elements/LinkSpan.js     | 26 +++++++++++++++++--
 .../src/views/LinkPreview/LinkPreview.js      | 20 +++++++++-----
 2 files changed, 37 insertions(+), 9 deletions(-)

diff --git a/packages/markups/src/elements/LinkSpan.js b/packages/markups/src/elements/LinkSpan.js
index b1257f98de..319d180130 100644
--- a/packages/markups/src/elements/LinkSpan.js
+++ b/packages/markups/src/elements/LinkSpan.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { useTheme } from '@embeddedchat/ui-elements';
 import PlainSpan from './PlainSpan';
 import StrikeSpan from './StrikeSpan';
 import ItalicSpan from './ItalicSpan';
@@ -27,6 +28,9 @@ const getBaseURI = () => {
 const isExternal = (href) => href.indexOf(getBaseURI()) !== 0;
 
 const LinkSpan = ({ href, label }) => {
+  const { theme } = useTheme();
+  const { mode } = useTheme();
+
   const contents = React.useMemo(() => {
     const labelArray = Array.isArray(label) ? label : [label];
 
@@ -54,13 +58,31 @@ const LinkSpan = ({ href, label }) => {
 
   if (isExternal(href)) {
     return (
-      <a href={href} title={href} rel="noopener noreferrer" target="_blank">
+      <a
+        href={href}
+        title={href}
+        style={{
+          color:
+            mode === 'light'
+              ? theme.colors.info
+              : theme.colors.warningForeground,
+        }}
+        rel="noopener noreferrer"
+        target="_blank"
+      >
         {contents}
       </a>
     );
   }
   return (
-    <a href={href} title={href}>
+    <a
+      href={href}
+      title={href}
+      style={{
+        color:
+          mode === 'light' ? theme.colors.info : theme.colors.warningForeground,
+      }}
+    >
       {contents}
     </a>
   );
diff --git a/packages/react/src/views/LinkPreview/LinkPreview.js b/packages/react/src/views/LinkPreview/LinkPreview.js
index 7290714edc..62ae860001 100644
--- a/packages/react/src/views/LinkPreview/LinkPreview.js
+++ b/packages/react/src/views/LinkPreview/LinkPreview.js
@@ -1,6 +1,5 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { css } from '@emotion/react';
 import {
   Box,
   ActionButton,
@@ -20,6 +19,7 @@ const LinkPreview = ({
 }) => {
   const { classNames, styleOverrides } = useComponentOverrides('LinkPreview');
   const { theme } = useTheme();
+  const { mode } = useTheme();
   const styles = getLinkPreviewStyles(theme);
 
   const [isPreviewOpen, setIsPreviewOpen] = useState(true);
@@ -88,9 +88,12 @@ const LinkPreview = ({
           <Box style={{ padding: '8px' }}>
             <a
               href={url}
-              css={css`
-                color: ${theme.colors.foreground};
-              `}
+              style={{
+                color:
+                  mode === 'light'
+                    ? theme.colors.info
+                    : theme.colors.warningForeground,
+              }}
               target="_blank"
               rel="noopener noreferrer"
             >
@@ -100,9 +103,12 @@ const LinkPreview = ({
             {isSiteName && (
               <a
                 href={url}
-                css={css`
-                  color: ${theme.colors.foreground};
-                `}
+                style={{
+                  color:
+                    mode === 'light'
+                      ? theme.colors.info
+                      : theme.colors.warningForeground,
+                }}
                 target="_blank"
                 rel="noopener noreferrer"
               >