fix: TOC text color in dark mode (#89)

* feat: Add rounded corners and center alignment for images in markdown * fix: toc display effect in dark mode
openRin · Jun 9, 2024 · 56c16c7 · 56c16c7
1 parent f4e01b5
commit 56c16c7
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 9 deletions.
diff --git a/client/src/index.css b/client/src/index.css
@@ -4,17 +4,22 @@
 
 /* cantarell-latin-400-normal */
 @font-face {
-  font-family: 'Cantarell';
+  font-family: "Cantarell";
   font-style: normal;
   font-display: auto;
   font-weight: 400;
-  src: url(https://cdn.jsdelivr.net/fontsource/fonts/cantarell@latest/latin-400-normal.woff2) format('woff2'), url(https://cdn.jsdelivr.net/fontsource/fonts/cantarell@latest/latin-400-normal.woff) format('woff');
-  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+  src: url(https://cdn.jsdelivr.net/fontsource/fonts/cantarell@latest/latin-400-normal.woff2)
+      format("woff2"),
+    url(https://cdn.jsdelivr.net/fontsource/fonts/cantarell@latest/latin-400-normal.woff)
+      format("woff");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
+    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
 body {
   @apply bg-background-light dark:bg-background-dark text-gray-800;
-  font-family: Cantarell,'Source Han Serif CN VF' !important;
+  font-family: Cantarell, "Source Han Serif CN VF" !important;
 }
 
 textarea:focus {
@@ -23,7 +28,7 @@ textarea:focus {
 
 .wmde-markdown {
   @apply bg-w;
-  font-family: Cantarell,'Source Han Serif CN VF' !important;
+  font-family: Cantarell, "Source Han Serif CN VF" !important;
 }
 
 .w-md-editor {
@@ -81,6 +86,10 @@ ul {
   @apply w-full md:w-7/12 lg:w-8/12 xl:w-10/12 2xl:w-full duration-300;
 }
 
+.wmde-markdown code {
+  @apply text-theme bg-secondary;
+}
+
 .markdown-alert {
   @apply !border-l-0 border-0 rounded-lg !py-4 my-4 !px-4 !leading-snug;
 }

diff --git a/client/src/page/feed.tsx b/client/src/page/feed.tsx
@@ -252,8 +252,8 @@ export function TOCHeader() {
                     })
                 }}
             >
-                <div className="rounded-2xl bg-w py-4 px-4 fixed w-[80vw] sm:w-[60vw] lg:w-[40vw] overflow-clip relative" >
-                    <h1 className="text-xl font-bold t-primary">
+                <div className="rounded-2xl bg-w py-4 px-4 fixed w-[80vw] sm:w-[60vw] lg:w-[40vw] overflow-clip relative t-primary" >
+                    <h1 className="text-xl font-bold">
                         目录
                     </h1>
                     {empty && <p className="text-gray-400 text-sm mt-2">目录为空</p>}
@@ -267,8 +267,8 @@ export function TOCHeader() {
 
 export function TOC({ empty }: { empty: boolean }) {
     return (
-        <div className={`rounded-2xl bg-w mt-2 py-4 px-4 fixed start-0 end-0`} style={{ position: 'sticky', top: '150px' }}>
-            <h1 className="text-xl font-bold t-primary">
+        <div className={`rounded-2xl bg-w mt-2 py-4 px-4 fixed start-0 end-0  t-primary`} style={{ position: 'sticky', top: '150px' }}>
+            <h1 className="text-xl font-bold">
                 目录
             </h1>
             {empty && <p className="text-gray-400 text-sm mt-2">目录为空</p>}