Feat: Add color to link messages & link in link preview based on light and dark theme (#912)

Author: dhairyashiil

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>
   );

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"
               >