style: modify theme style.

website/src/pages/home/Preview.tsx

@@ -5,11 +5,12 @@ import { Context } from '../../store/context';
 
 import { markdownToHTML } from '../../utils/markdownToHTML';
 
-const Warpper = styled.div`
+export const Warpper = styled.div`
   width: 375px;
   padding: 20px;
   box-shadow: 0 0 60px rgb(0 0 0 / 10%);
   min-height: 100%;
+  font-size: 17px;
 `;
 
 export const Preview = (props: MarkdownPreviewProps) => {

website/src/pages/home/index.tsx

@@ -1,37 +1,30 @@
 import MarkdownEditor, { getCommands } from '@uiw/react-markdown-editor';
 import { useContext } from 'react';
 import { EditorView } from '@codemirror/view';
-import styled from 'styled-components';
 import { Preview } from './Preview';
 import { copy } from '../../commands/copy';
 import { theme as themeCommand, previeTheme } from '../../commands/theme';
 import { cssCommand } from '../../commands/css';
 import { Context, themes } from '../../store/context';
 
-export const Warpper = styled.div`
-  height: calc(100vh - 2.9rem);
-`;
-
 export const HomePage = () => {
   const commands = [...getCommands(), themeCommand];
   const { theme, markdown, isLoading, setMarkdown } = useContext(Context);
   const themeValue = themes[theme].value;
   const handleChange = (value: string) => setMarkdown(value);
   return (
-    <Warpper>
-      <MarkdownEditor
-        value={markdown}
-        toolbars={commands}
-        theme={themeValue}
-        readOnly={isLoading}
-        toolbarsMode={[cssCommand, previeTheme, copy, 'fullscreen', 'preview']}
-        extensions={[EditorView.lineWrapping]}
-        renderPreview={Preview}
-        previewWidth="420px"
-        onChange={handleChange}
-        visible={true}
-        height="calc(100vh - 4.70rem)"
-      />
-    </Warpper>
+    <MarkdownEditor
+      value={markdown}
+      toolbars={commands}
+      theme={themeValue}
+      readOnly={isLoading}
+      toolbarsMode={[cssCommand, previeTheme, copy, 'fullscreen', 'preview']}
+      extensions={[EditorView.lineWrapping]}
+      renderPreview={Preview}
+      previewWidth="420px"
+      onChange={handleChange}
+      visible={true}
+      height="calc(100vh - 4.6rem)"
+    />
   );
 };