Merge pull request #56 from christian-byrne/dark-theme

remap tailwind colors

Author: ai-business-hql

ui/src/components/chat/messages/AIMessage.tsx

@@ -72,7 +72,7 @@ export function AIMessage({ content, name = 'Assistant', avatar, format, onOptio
           rehypeKatex
         ]}
         remarkPlugins={[remarkGfm, remarkMath]}
-        className={`prose prose-xs prose-neutral prose-a:text-accent-foreground/50 break-words [&>*]:!my-1 leading-relaxed text-xs
+        className={`prose prose-xs prose-neutral prose-a:text-accent-foreground/50 break-words [&>*]:!my-1 leading-relaxed text-xs text-gray-800
                   prose-headings:font-semibold
                   prose-h1:text-base
                   prose-h2:text-sm
@@ -89,6 +89,9 @@ export function AIMessage({ content, name = 'Assistant', avatar, format, onOptio
           p: ({ children }) => {
             return <p className="!my-0.5 leading-relaxed text-xs">{children}</p>
           },
+          strong: ({ children }) => {
+            return <strong className="text-gray-900">{children}</strong>
+          },
           h1: ({ children }) => {
             return <h1 className="text-base font-semibold !my-1">{children}</h1>
           },
@@ -278,7 +281,7 @@ export function AIMessage({ content, name = 'Assistant', avatar, format, onOptio
 
   return (
     <BaseMessage name={name}>
-      <div className="w-full rounded-lg bg-gray-50 p-4 text-gray-700 text-sm break-words overflow-hidden">
+      <div className="w-full rounded-lg bg-gray-50 p-4 text-gray-900 text-sm break-words overflow-hidden">
         {renderContent()}
       </div>
     </BaseMessage>

ui/tailwind.config.js

@@ -18,6 +18,21 @@ export default {
   ],
   theme: {
     extend: {
+      colors: {
+        white: 'var(--p-panel-background)',
+        gray: {
+          50: 'color-mix(in srgb, var(--p-text-color) 5%, transparent)',
+          100: 'color-mix(in srgb, var(--p-text-color) 10%, transparent)',
+          200: 'color-mix(in srgb, var(--p-text-color) 20%, transparent)',
+          300: 'color-mix(in srgb, var(--p-text-color) 30%, transparent)',
+          400: 'color-mix(in srgb, var(--p-text-color) 40%, transparent)',
+          500: 'color-mix(in srgb, var(--p-text-color) 50%, transparent)',
+          600: 'color-mix(in srgb, var(--p-text-color) 60%, transparent)',
+          700: 'color-mix(in srgb, var(--p-text-color) 70%, transparent)',
+          800: 'color-mix(in srgb, var(--p-text-color) 80%, transparent)',
+          900: 'color-mix(in srgb, var(--p-text-color) 90%, transparent)',
+        }
+      },
       animation: {
         // bounce: 'bounce 1s infinite',
       },