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>
This commit is contained in:
Haibo
2023-12-12 16:27:49 +08:00
committed by GitHub
parent bca2fe2e44
commit 64b3a286e6
2 changed files with 52 additions and 42 deletions
+50 -40
View File
@@ -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"),
},
},
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: {
textColor: {
skin: {
base: withOpacity("--color-text-base"),
accent: withOpacity("--color-accent"),
inverted: withOpacity("--color-fill"),
typography: {
DEFAULT: {
css: {
pre: {
color: false,
},
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")],
};