Qihan/MyBlog-Next
1
0
Fork 0
mirror of https://github.com/ChenQihan666/MyBlog-Next.git synced 2026-08-14 11:29:33 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/base.css
+2 -2
View File
@@ -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
+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")],
};