fix(markdown): css styles added

yokesh-ks · Oct 15, 2023 · bff1a05 · bff1a05
1 parent 2ef30dc
commit bff1a05
Show file tree

Hide file tree

Showing 3 changed files with 1,178 additions and 4 deletions.
diff --git a/src/components/common/mode-toggle.tsx b/src/components/common/mode-toggle.tsx
@@ -32,10 +32,20 @@ export function ModeToggle() {
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align='end'>
-        <DropdownMenuItem onClick={() => setTheme('light')}>
+        <DropdownMenuItem
+          onClick={() => {
+            document.body.setAttribute('data-theme', 'light')
+            setTheme('light')
+          }}
+        >
           Light
         </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme('dark')}>
+        <DropdownMenuItem
+          onClick={() => {
+            document.body.setAttribute('data-theme', 'dark')
+            setTheme('dark')
+          }}
+        >
           Dark
         </DropdownMenuItem>
         <DropdownMenuItem onClick={() => setTheme('system')}>

diff --git a/src/components/readme-editor/PreviewColumn.tsx b/src/components/readme-editor/PreviewColumn.tsx
@@ -1,5 +1,7 @@
+import { useTheme } from 'next-themes'
 import ReactMarkdown from 'react-markdown'
 
+import '../../styles/github-markdown.css'
 import { Card } from '../ui/card'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs'
 import RawPreview from './RawPreview'
@@ -15,15 +17,20 @@ export const PreviewColumn = ({ selectedSectionSlugs, getTemplate }) => {
     }
   }, ``)
 
+  const { theme } = useTheme()
+
   return (
     <Tabs defaultValue='preview'>
       <TabsList className='grid w-48 grid-cols-2'>
         <TabsTrigger value='preview'>Preview</TabsTrigger>
         <TabsTrigger value='raw'>Raw</TabsTrigger>
       </TabsList>
       <TabsContent value='preview'>
-        <Card className={`p-4 overflow-scroll readme-editor-full`}>
-          <ReactMarkdown className='markdown'>{markdown}</ReactMarkdown>
+        <Card
+          className={`p-4 overflow-scroll readme-editor-full [data-theme=${theme}] markdown-body`}
+          style={{ background: 'transparent' }}
+        >
+          <ReactMarkdown className={``}>{markdown}</ReactMarkdown>
         </Card>
       </TabsContent>
       <TabsContent value='raw'>