feat: 聊天页暗夜模式

src/components/Markdown/index.module.scss

@@ -4,7 +4,7 @@
   width: 4px;
   height: 14px;
   transform: translate(4px, 2px) scaleY(1.3);
-  background-color: rgba(0, 0, 0, 0.7);
+  background-color: var(--chakra-colors-chakra-body-text);
   animation: blink 0.6s infinite;
 }
 .animation {
@@ -14,7 +14,7 @@
     width: 4px;
     height: 14px;
     transform: translate(4px, 2px) scaleY(1.3);
-    background-color: rgba(0, 0, 0, 0.7);
+    background-color: var(--chakra-colors-chakra-body-text);
     animation: blink 0.6s infinite;
   }
 }
@@ -65,7 +65,6 @@
 .markdown h4 .mini-icon-link,
 .markdown h5 .mini-icon-link,
 .markdown h6 .mini-icon-link {
-  color: #000000;
   display: none;
 }
 .markdown h1:hover a.anchor,
@@ -103,11 +102,9 @@
   font-size: inherit;
 }
 .markdown h1 {
-  color: #000000;
   font-size: 28px;
 }
 .markdown h2 {
-  color: #000000;
   font-size: 24px;
 }
 .markdown h3 {
@@ -120,8 +117,7 @@
   font-size: 14px;
 }
 .markdown h6 {
-  color: #777777;
-  font-size: 14px;
+  font-size: 12px;
 }
 .markdown p,
 .markdown blockquote,
@@ -132,14 +128,6 @@
 .markdown pre {
   margin: 10px 0;
 }
-.markdown hr {
-  background: url('https://a248.e.akamai.net/assets.github.com/assets/primer/markdown/dirty-shade-350cca8f57223ebd53603021b2e670f4f319f1b7.png')
-    repeat-x scroll 0 0 transparent;
-  border: 0 none;
-  color: #cccccc;
-  height: 4px;
-  padding: 0;
-}
 .markdown > h2:first-child,
 .markdown > h1:first-child,
 .markdown > h1:first-child + h2,
@@ -321,7 +309,6 @@
 }
 .markdown code,
 .markdown tt {
-  background-color: #f0f0f0;
   border: 1px solid #eaeaea;
   border-radius: 3px 3px 3px 3px;
   margin: 0 2px;
@@ -336,7 +323,6 @@
 }
 .markdown .highlight pre,
 .markdown pre {
-  background-color: #f0f0f0;
   border: 1px solid #cccccc;
   border-radius: 3px 3px 3px 3px;
   font-size: max(0.9em, 14px);
@@ -369,11 +355,11 @@
     border-radius: 0;
     background-color: #222 !important;
     overflow-x: auto;
+    color: #fff;
   }
 
   pre code {
     background-color: #222 !important;
-    color: #fff;
     width: 100%;
   }
 
@@ -385,6 +371,7 @@
   table {
     border-collapse: separate;
     border-spacing: 0px;
+    color: var(--chakra-colors-gray-700);
 
     thead tr:first-child th {
       border-bottom-width: 1px;

src/components/Markdown/index.tsx

@@ -1,7 +1,7 @@
 import React, { memo, useMemo } from 'react';
 import ReactMarkdown from 'react-markdown';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { Box, Flex } from '@chakra-ui/react';
+import { Box, Flex, useColorModeValue } from '@chakra-ui/react';
 import { useCopyData } from '@/utils/tools';
 import Icon from '@/components/Iconfont';
 import remarkGfm from 'remark-gfm';
@@ -34,7 +34,7 @@ const Markdown = ({ source, isChatting = false }: { source: string; isChatting?:
               <Flex
                 py={2}
                 px={5}
-                backgroundColor={'#323641'}
+                backgroundColor={useColorModeValue('#323641', 'gray.600')}
                 color={'#fff'}
                 fontSize={'sm'}
                 userSelect={'none'}