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,10 +17,7 @@ module.exports = {
       sm: "640px",
     },
 
-    // Uncomment the following extend
+    extend: {
-    // if existing Tailwind color palette will be used
-
-    // extend: {
       textColor: {
         skin: {
           base: withOpacity("--color-text-base"),
@@ -59,7 +56,20 @@ module.exports = {
       fontFamily: {
         mono: ["IBM Plex Mono", "monospace"],
       },
-    // },
+
+      typography: {
+        DEFAULT: {
+          css: {
+            pre: {
+              color: false,
+            },
+            code: {
+              color: false,
+            },
+          },
+        },
+      },
+    },
   },
   plugins: [require("@tailwindcss/typography")],
 };