feat(client): custom typography theme

bbdaniels · Mar 4, 2023 · 70ebff0 · 70ebff0
1 parent d5defe0
commit 70ebff0
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 1 deletion.
diff --git a/components/Chat.vue b/components/Chat.vue
@@ -254,7 +254,7 @@ if (!process.server) {
                         </div>
                         <!-- message text -->
                         <div
-                            class="prose prose-sm prose-invert prose-blockquote:border-l-white/50 break-words max-w-6xl"
+                            class="prose prose-sm prose-chatgpt break-words max-w-6xl"
                             v-html="(message.role === 'user' || message.raw) ? parseMarkdown(message.text) : parseMarkdown(message.text, true)"
                         />
                     </div>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -4,4 +4,30 @@ module.exports = {
     plugins: [
         require('@tailwindcss/typography'),
     ],
+    theme: {
+        extend: {
+            typography: ({ theme }) => ({
+                chatgpt: {
+                    css: {
+                        '--tw-prose-body': theme('colors.slate[300]'),
+                        '--tw-prose-headings': theme('colors.slate[100]'),
+                        '--tw-prose-lead': theme('colors.slate[300]'),
+                        '--tw-prose-links': theme('colors.slate[200]'),
+                        '--tw-prose-bold': theme('colors.slate[100]'),
+                        '--tw-prose-counters': theme('colors.slate[300] / 50%'),
+                        '--tw-prose-bullets': theme('colors.slate[300] / 50%'),
+                        '--tw-prose-hr': theme('colors.slate[300] / 50%'),
+                        '--tw-prose-quotes': theme('colors.slate[100]'),
+                        '--tw-prose-quote-borders': theme('colors.slate[300] / 50%'),
+                        '--tw-prose-captions': theme('colors.slate[300] / 50%'),
+                        '--tw-prose-code': theme('colors.white'),
+                        '--tw-prose-pre-code': theme('colors.slate[300]'),
+                        '--tw-prose-pre-bg': 'rgb(0 0 0 / 50%)',
+                        '--tw-prose-th-borders': theme('colors.slate[300]'),
+                        '--tw-prose-td-borders': theme('colors.slate[300] / 50%'),
+                    },
+                },
+            }),
+        },
+    },
 };