style: improve code contrast

This commit is contained in:
ZhenShuo Leo
2025-11-23 22:57:27 +08:00
parent 112b22c0d9
commit f29e515147
3 changed files with 18 additions and 12 deletions

View File

@@ -615,7 +615,6 @@
color: var(--tw-prose-code);
font-weight: 600;
font-size: 0.875em;
background-color: rgba(var(--color-neutral-50), 1);
padding-top: 3px;
padding-bottom: 3px;
padding-left: 5px;
@@ -1610,8 +1609,8 @@
:where(mark):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
background-color: rgba(var(--color-primary-400), 1);
}
:where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
background-color: rgba(var(--color-neutral-700), 1);
:where(code:not(pre code)):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
background-color: color-mix(in oklab, oklch(21% 0.006 285.885) 70%, transparent);
}
:where(a.active):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
text-decoration-color: rgba(var(--color-primary-400), 1);
@@ -3068,8 +3067,8 @@
:where(mark):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
background-color: rgba(var(--color-primary-400), 1);
}
:where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
background-color: rgba(var(--color-neutral-700), 1);
:where(code:not(pre code)):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
background-color: color-mix(in oklab, oklch(21% 0.006 285.885) 70%, transparent);
}
:where(a.active):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
text-decoration-color: rgba(var(--color-primary-400), 1);
@@ -3308,15 +3307,19 @@
.prose .chroma {
position: static;
border-radius: var(--radius-md);
background-color: rgba(var(--color-neutral-50), 1);
background-color: oklch(98.5% 0 0);
color: rgba(var(--color-neutral-700), 1);
&:is(.dark *) {
background-color: rgba(var(--color-neutral-700), 1);
background-color: oklch(21% 0.006 285.885);
}
&:is(.dark *) {
color: rgba(var(--color-neutral-200), 1);
}
}
.prose .highlight:not(:has(table)) .chroma, .prose .highlight > .chroma {
--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.chroma .lntd, .chroma .lntd pre {
margin: calc(var(--spacing) * 0);
--tw-border-style: none;

View File

@@ -1,8 +1,12 @@
/* -- Chroma Highlight -- */
/* Background */
.prose .chroma {
@apply static rounded-md text-neutral-700 bg-neutral-50 dark:bg-neutral-700 dark:text-neutral-200;
@apply static rounded-md text-neutral-700 bg-zinc-50 dark:bg-zinc-900 dark:text-neutral-200;
}
.prose .highlight:not(:has(table)) .chroma,
.prose .highlight > .chroma {
@apply shadow;
}
/* LineTableTD */

View File

@@ -120,7 +120,6 @@ module.exports = {
borderRadius: "0.25rem",
},
code: {
backgroundColor: theme("colors.neutral.50 / 1"),
paddingTop: "3px",
paddingBottom: "3px",
paddingLeft: "5px",
@@ -162,8 +161,8 @@ module.exports = {
mark: {
backgroundColor: theme("colors.primary.400 / 1"),
},
code: {
backgroundColor: theme("colors.neutral.700 / 1"),
"code:not(pre code)": {
backgroundColor: theme("colors.zinc.900 / 0.7"),
},
"a.active": {
"text-decoration-color": theme("colors.primary.400 / 1"),