fix: solve invisible text code block issue in light-mode (#163)

* fix: pre > code font color

Co-authored-by: Nomango <nomango@qq.com>
Co-authored-by: shuaixr <1025sxr@gmail.com>

* refactor: extend other css properties besides typography

Update theme extend to include other properties like textColor etc, to clarify confusion.

---------

Co-authored-by: shuaixr <1025sxr@gmail.com>
Co-authored-by: Sat Naing <satnaingdev@gmail.com>

src/styles/base.css

@@ -59,9 +59,9 @@
 
     
     prose-code:rounded prose-code:bg-skin-card 
-    prose-code:bg-opacity-75 prose-code:p-1 prose-code:!text-skin-base 
+    prose-code:bg-opacity-75 prose-code:p-1 
     prose-code:before:!content-[''] prose-code:after:!content-['']
-    prose-pre:!text-skin-base prose-ol:!text-skin-base 
+    prose-ol:!text-skin-base 
     prose-ul:overflow-x-clip prose-ul:!text-skin-base prose-li:marker:!text-skin-accent
     prose-table:text-skin-base prose-th:border
     prose-th:border-skin-line prose-td:border 

tailwind.config.cjs

@@ -17,49 +17,59 @@ module.exports = {
       sm: "640px",
     },
 
-    // Uncomment the following extend
+    extend: {
-    // if existing Tailwind color palette will be used
+      textColor: {
+        skin: {
+          base: withOpacity("--color-text-base"),
+          accent: withOpacity("--color-accent"),
+          inverted: withOpacity("--color-fill"),
+        },
+      },
+      backgroundColor: {
+        skin: {
+          fill: withOpacity("--color-fill"),
+          accent: withOpacity("--color-accent"),
+          inverted: withOpacity("--color-text-base"),
+          card: withOpacity("--color-card"),
+          "card-muted": withOpacity("--color-card-muted"),
+        },
+      },
+      outlineColor: {
+        skin: {
+          fill: withOpacity("--color-accent"),
+        },
+      },
+      borderColor: {
+        skin: {
+          line: withOpacity("--color-border"),
+          fill: withOpacity("--color-text-base"),
+          accent: withOpacity("--color-accent"),
+        },
+      },
+      fill: {
+        skin: {
+          base: withOpacity("--color-text-base"),
+          accent: withOpacity("--color-accent"),
+        },
+        transparent: "transparent",
+      },
+      fontFamily: {
+        mono: ["IBM Plex Mono", "monospace"],
+      },
 
-    // extend: {
+      typography: {
-    textColor: {
+        DEFAULT: {
-      skin: {
+          css: {
-        base: withOpacity("--color-text-base"),
+            pre: {
-        accent: withOpacity("--color-accent"),
+              color: false,
-        inverted: withOpacity("--color-fill"),
+            },
+            code: {
+              color: false,
+            },
+          },
+        },
       },
     },
-    backgroundColor: {
-      skin: {
-        fill: withOpacity("--color-fill"),
-        accent: withOpacity("--color-accent"),
-        inverted: withOpacity("--color-text-base"),
-        card: withOpacity("--color-card"),
-        "card-muted": withOpacity("--color-card-muted"),
-      },
-    },
-    outlineColor: {
-      skin: {
-        fill: withOpacity("--color-accent"),
-      },
-    },
-    borderColor: {
-      skin: {
-        line: withOpacity("--color-border"),
-        fill: withOpacity("--color-text-base"),
-        accent: withOpacity("--color-accent"),
-      },
-    },
-    fill: {
-      skin: {
-        base: withOpacity("--color-text-base"),
-        accent: withOpacity("--color-accent"),
-      },
-      transparent: "transparent",
-    },
-    fontFamily: {
-      mono: ["IBM Plex Mono", "monospace"],
-    },
-    // },
   },
   plugins: [require("@tailwindcss/typography")],
 };