💄 Fix styling for email composer and did history table

components/email/Composer.tsx

@@ -10,6 +10,7 @@ import client from '@/lib/client'
 import { compileTemplateContent, getTemplate } from './helpers'
 import { useRepoAndProfile } from '@/repositories/useRepoAndProfile'
 import { useEmailComposer } from './useComposer'
+import { useColorScheme } from '@/common/useColorScheme'
 
 const MDEditor = dynamic(() => import('@uiw/react-md-editor'), { ssr: false })
 
@@ -25,6 +26,7 @@ export const EmailComposer = ({ did }: { did: string }) => {
     setContent,
     communicationTemplates,
   } = useEmailComposer()
+  const { theme } = useColorScheme()
   const subjectField = useRef<HTMLInputElement>(null)
   const commentField = useRef<HTMLTextAreaElement>(null)
 
@@ -138,7 +140,7 @@ export const EmailComposer = ({ did }: { did: string }) => {
           value={content}
           onChange={setContent}
           fullscreen={false}
-          data-color-mode="light"
+          data-color-mode={theme}
           commands={[
             commands.bold,
             commands.divider,

components/repositories/DidHistory.tsx

@@ -81,22 +81,26 @@ export const DidHistory = ({ did }: { did: string }) => {
 
   return (
     <div className="mb-3">
-      <h4 className="font-semibold text-gray-500">
+      <h4 className="font-semibold text-gray-500 dark:text-gray-50">
         DID History{' '}
-        <a href={getDidPlcWebUrl(did)} target="_blank" title="Open the web view for this DID record">
+        <a
+          href={getDidPlcWebUrl(did)}
+          target="_blank"
+          title="Open the web view for this DID record"
+        >
           <ArrowTopRightOnSquareIcon className="inline-block h-4 w-4 mr-1" />
         </a>
       </h4>
       <table className="min-w-full divide-y divide-gray-300">
-        <thead className="bg-gray-50">
-          <tr className="text-gray-500 text-left text-sm">
+        <thead className="bg-gray-50 dark:bg-slate-700">
+          <tr className="text-gray-500 dark:text-gray-50 text-left text-sm">
             <th className="py-2 pl-2">Timestamp</th>
             <th className="py-2 pl-2">Type</th>
             <th className="py-2 pl-2">Handle</th>
             <th className="py-2 pl-2">Service</th>
           </tr>
         </thead>
-        <tbody>
+        <tbody className="dark:text-gray-100">
           {history.map((log) => (
             <tr key={log.cid} className="text-sm align-top">
               <td className="pr-2 py-2 pl-2">

styles/globals.css

@@ -1,3 +1,8 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+.wmde-markdown-var[data-color-mode*='dark'] {
+      --color-canvas-default: theme(colors.slate.800) !important;
+      --color-border-default: theme(colors.teal.500) !important;
+}