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

* fix: pre > code font color Co-authored-by: Nomango <[email protected]> Co-authored-by: shuaixr <[email protected]> * refactor: extend other css properties besides typography Update theme extend to include other properties like textColor etc, to clarify confusion. --------- Co-authored-by: shuaixr <[email protected]> Co-authored-by: Sat Naing <[email protected]>
satnaing · Dec 12, 2023 · 64b3a28 · 64b3a28
1 parent bca2fe2
commit 64b3a28
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 39 deletions.
diff --git a/src/styles/base.css b/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 

diff --git a/tailwind.config.cjs b/tailwind.config.cjs
@@ -17,49 +17,59 @@ module.exports = {
       sm: "640px",
     },
 
-    // Uncomment the following extend
-    // if existing Tailwind color palette will be used
-
-    // extend: {
-    textColor: {
-      skin: {
-        base: withOpacity("--color-text-base"),
-        accent: withOpacity("--color-accent"),
-        inverted: withOpacity("--color-fill"),
+    extend: {
+      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"),
+      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"),
+      outlineColor: {
+        skin: {
+          fill: withOpacity("--color-accent"),
+        },
       },
-    },
-    borderColor: {
-      skin: {
-        line: withOpacity("--color-border"),
-        fill: withOpacity("--color-text-base"),
-        accent: 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"),
+      fill: {
+        skin: {
+          base: withOpacity("--color-text-base"),
+          accent: withOpacity("--color-accent"),
+        },
+        transparent: "transparent",
+      },
+      fontFamily: {
+        mono: ["IBM Plex Mono", "monospace"],
+      },
+
+      typography: {
+        DEFAULT: {
+          css: {
+            pre: {
+              color: false,
+            },
+            code: {
+              color: false,
+            },
+          },
+        },
       },
-      transparent: "transparent",
-    },
-    fontFamily: {
-      mono: ["IBM Plex Mono", "monospace"],
     },
-    // },
   },
   plugins: [require("@tailwindcss/typography")],
 };